3.1 Thẻ <main>
HTML5 giới thiệu nhiều phần tử ngữ nghĩa mới giúp lập trình viên tạo trang web cấu trúc và dễ hiểu hơn. Trong đó, thẻ <main> và <aside> đóng vai trò đặc biệt, được dùng để tạo container cho nội dung chính và nội dung phụ tương ứng.
Thẻ <main> đánh dấu nội dung chính của tài liệu. Nó dùng để đặt nội dung duy nhất và chủ chốt cho trang đó. Nội dung trong thẻ <main> nên là duy nhất cho từng trang và không chứa những phần tử xuất hiện trên tất cả các trang như logo, thanh bên, liên kết điều hướng hoặc chân trang.
Cú pháp:
<main>
<!-- Nội dung chính của trang -->
</main>
Ví dụ sử dụng:
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
Đặc điểm chính:
- Nội dung: thẻ
<main>nên chứa nội dung chính của trang, là duy nhất cho trang đó - Vị trí: chỉ nên có một thẻ
<main>trên trang - Khả năng truy cập: thẻ
<main>cải thiện khả năng truy cập trang, giúp công nghệ hỗ trợ (như trình đọc màn hình) nhanh chóng tìm thấy nội dung chính
Ứng dụng:
- Nội dung chính của trang
- Nội dung độc đáo liên quan đến trang hiện tại
Lợi ích:
- Ngữ nghĩa rõ ràng: giúp các công cụ tìm kiếm và công nghệ hỗ trợ hiểu nội dung nào là chính của trang
- Cải thiện cấu trúc trang: tách biệt rõ ràng nội dung chính khỏi các phần khác của trang như tiêu đề, thanh bên và chân trang
Đặc trưng:
- Nên chứa nội dung là duy nhất cho trang
- Không nên bao gồm các phần tử xuất hiện ở các trang khác (như thanh điều hướng, thanh bên, chân trang)
3.2 Thẻ <aside>
Thẻ <aside> dùng để đánh dấu nội dung bổ sung liên quan đến nội dung chính nhưng không phải là một phần của luồng tài liệu chính. Nó thường được sử dụng cho các thanh bên chứa quảng cáo, liên kết đến bài viết liên quan, tiểu sử tác giả và các yếu tố hỗ trợ khác.
Cú pháp:
<aside>
<!-- Nội dung bổ sung -->
</aside>
Ví dụ sử dụng:
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
Đặc điểm chính:
- Nội dung: thẻ
<aside>chứa thông tin bổ sung liên quan đến nội dung chính nhưng không phải là một phần của luồng tài liệu chính. - Vị trí: có thể được đặt bên trong hoặc bên ngoài thẻ
<main>, tùy thuộc vào ngữ cảnh. - Ứng dụng: dùng cho thanh bên, khối quảng cáo, liên kết đến bài viết liên quan và thông tin hỗ trợ khác.
Ứng dụng:
- Thanh bên với thông tin bổ sung
- Khối quảng cáo
- Liên kết đến các nguồn liên quan
- Tài liệu bổ sung, liên quan đến nội dung chính
Lợi ích:
- Ngữ nghĩa rõ ràng: giúp các công cụ tìm kiếm và công nghệ hỗ trợ hiểu rằng đây là nội dung hỗ trợ so với nội dung chính
- Cải thiện cấu trúc trang: tách biệt nội dung bổ sung khỏi nội dung chính, làm cho trang dễ tổ chức và dễ nhận thức hơn
Đặc trưng:
- Chứa nội dung liên quan đến nội dung chính nhưng không phải là một phần của nó
- Có thể dùng cho thanh bên, khối quảng cáo, đăng ký và các tài liệu bổ sung khác
GO TO FULL VERSION