Khi nào nên dùng main, section, article, header, footer, và aside trong HTML5

HTML5 đã giới thiệu các thẻ ngữ nghĩa giúp cấu trúc nội dung web một cách có ý nghĩa hơn — không chỉ cho lập trình viên mà còn cho trình duyệt và các công nghệ hỗ trợ như trình đọc màn hình.

Nếu bạn chưa chắc khi nào nên dùng <main>, <section>, <article>, <header>, <footer>, hoặc <aside>, thì bài viết này là dành cho bạn. Hãy cùng tìm hiểu chúng là gì, khi nào nên dùng và những điều nên tránh.

1. <main>

Định nghĩa nội dung chính của trang — phần làm cho trang trở nên đặc biệt.

Sử dụng cho:

• Bài viết blog, danh sách sản phẩm, bảng điều khiển
• Bất kỳ nội dung nào là trung tâm của trang

Không dùng cho:

• Header, footer, menu điều hướng, thanh bên
• Mỗi trang chỉ nên có một thẻ <main> duy nhất.

2. <section>

Nhóm các nội dung có chủ đề chung, lý tưởng là có tiêu đề (<h1>–<h6>).

Sử dụng cho:

• Mục "Bài viết mới nhất"
• Mục Câu hỏi thường gặp (FAQ)
• Một trang được chia thành nhiều phần hợp lý

Mẹo: Dùng aria-label hoặc thêm tiêu đề để cải thiện khả năng truy cập.

3. <article>

Một khối nội dung độc lập, có thể tái sử dụng — nó nên có ý nghĩa ngay cả khi đứng một mình.

Sử dụng cho:

• Một bài blog hoặc bài báo
• Một bình luận hoặc đánh giá người dùng

Không dùng để:

• Gói các thành phần không liên quan chỉ vì chúng được hiển thị gần nhau về mặt hình ảnh.

4. <header>

Giới thiệu một phần hoặc toàn bộ trang. Có thể bao gồm:

• Tiêu đề
• Logo
• Menu điều hướng

Sử dụng:

• Một lần ở đầu trang
• Bên trong <section> hoặc <article> như phần giới thiệu

5. <footer>

Kết thúc một phần hoặc cả trang. Có thể bao gồm:

• Thông tin tác giả
• Liên kết liên quan
• Bản quyền

Sử dụng:

• Ở cuối trang
• Bên trong <article> để hiển thị metadata như ngày tháng hoặc thẻ

6. <aside>

Biểu thị nội dung có liên quan nhưng không thiết yếu đối với nội dung chính.

Sử dụng cho:

• Thanh bên
• Bài viết liên quan
• Trích dẫn, mẹo nhỏ hoặc quảng cáo

Kết luận

HTML ngữ nghĩa giúp mã nguồn của bạn dễ truy cập, dễ bảo trì và dễ hiểu hơn — không chỉ với bạn mà còn với tất cả những ai tương tác với trang web.

Cảm ơn bạn đã dành thời gian đọc bài viết.