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>,

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.

Nguồn: viblo.asia

Bài viết liên quan

7 Cách Tăng Tốc Ứng Dụng React Hiệu Quả Mà Bạn Có Thể Làm Ngay

React là một thư viện JavaScript phổ biến trong việc xây dựng giao diện người d

Trung Quốc “thả quân bài tẩy”: hàng loạt robot hình người!

MỘT CUỘC CÁCH MẠNG ROBOT ĐANG HÌNH THÀNH Ở TRUNG QUỐC Thượng Hải, ngày 13/5 –

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con