Sử Dụng HTML Ngữ Nghĩa Trong Dự Án: Hướng Dẫn Cơ Bản

HTML ngữ nghĩa (Semantic HTML) dùng thẻ có ý nghĩa rõ ràng để mô tả cấu trúc trang, giúp screen reader và voice assistant hiểu nội dung.

HTML Ngữ Nghĩa Là Gì?

"Semantics" = nghiên cứu ý nghĩa. Viết HTML ngữ nghĩa = thẻ gợi mở chức năng/nội dung bên trong (ví dụ: <header>, <nav>, <article>).

Các Thẻ Ngữ Nghĩa Phổ Biến (HTML5)

<header>

Container phần đầu trang/chương, thường chứa logo, <nav>, <h1> tiêu đề trang.

<nav>

Khối điều hướng, chứa liên kết đến các phần trang. Không được lồng <nav> trong <nav>.

<header>
  <div class="logo"><img src="logo.png" alt="Logo"><h1>Tên Trang</h1></div>
  <nav>
    <a href="/about">Giới Thiệu</a>
    <a href="/contact">Liên Hệ</a>
  </nav>
</header>

<main>, <section>, <h2>-<h6>

• <main>: nội dung chính, duy nhất mỗi trang.
• <section>: đoạn nội dung chủ đề riêng, có thể có <header> và heading <h2>-<h6>.
• Quy tắc heading: chỉ một <h1> mỗi trang. Không bỏ bậc (h1→h3), nhưng có thể giảm (h3→h2).

<main>
  <section>
    <header><h2>Chủ Đề Chính</h2></header>
    <article>
      <h3>Mục Con</h3>
      <p>Nội dung...</p>
    </article>
  </section>
</main>

Lưu ý: Duy trình thứ bậc heading đúng chuẩn để truy cập tốt nhất.

Kết Luận

HTML ngữ nghĩa cải thiện SEO, truy cập, bảo trì. Tham khảo MDN/W3C để biết đầy đủ thẻ. Hãy dùng thẻ đúng chỗ!