Cách sử dụng thẻ <h1> đúng chuẩn trong HTML5

Trong HTML5, <h1> là heading (đề mục) cấp cao nhất, không phải title (tiêu đề trang). Hiểu đúng vai trò của h1 giúp SEO, accessibility và cấu trúc tài liệu tốt hơn.

Quy tắc sử dụng <h1> trong HTML5

1. Mỗi sectioning root/content section nên có 1 <h1>: <body>, <article>, <section>, <nav>, <aside> đều là sectioning roots.
2. <h1> đầu tiên trong <body> được coi là nhãn (label) cho toàn bộ tài liệu.
3. Có thể dùng nhiều <h1> trong một trang miễn là mỗi thẻ thuộc một section riêng biệt.
4. Giữa <body> và section nội dung đầu tiên luôn nên có một <h1> cấp tài liệu.

Ví dụ cấu trúc chuẩn HTML5

<body>
  <!-- Heading cấp tài liệu (document-level) -->
  <h1>Tiêu đề trang web</h1>
  <p>Nội dung giới thiệu chung...</p>

  <section>
    <!-- Heading cho section này -->
    <h1>Chương 1: Cơ bản</h1>
    <p>Nội dung chương 1...</p>
    
    <!-- Subsection dùng h2 -->
    <h2>1.1 Lịch sử HTML</h2>
    <p>...</p>
    <h2>1.2 Cấu trúc HTML5</h2>
    <p>...</p>
  </section>

  <article>
    <!-- Article có h1 riêng -->
    <h1>Bài viết: Tối ưu SEO với HTML5</h1>
    <p>Nội dung bài viết...</p>
  </article>
</body>

Lợi ích của cách dùng này

• SEO: Google hiểu cấu trúc chủ đề, từ khóa chính của từng section.
• Accessibility: Screen reader duyệt heading tree (Outline) để người khuyết tật điều hướng.
• Maintainability: Code module, dễ copy section sang trang khác không lo heading bị lệch cấp.

Sai lầm thường gặp

• ❌ Dùng <h1> cho logo/site name trên mọi trang.
• ❌ Chỉ dùng 1 <h1> cho toàn trang (quy tắc HTML4 cũ).
• ❌ Bỏ qua heading level (nhảy từ h1 sang h4).
• ❌ Dùng heading cho mục đích style (to/dậm) thay vì cấu trúc.

Kiểm tra outline

Dùng công cụ: HTML5 Outliner hoặc extension "HeadingsMap" trên Chrome/Firefox để xem cấu trúc heading tree.