Tiêu đề (Heading) trong HTML: <h1> đến <h6>

Tiêu đề HTML (<h1> đến <h6>) định nghĩa **cấp độ quan trọng** của nội dung, từ cao nhất (h1) đến thấp nhất (h6). Chúng tạo cấu trúc phân cấp cho trang web, giúp người đọc và công cụ tìm kiếm hiểu được tổ chức nội dung.

Lưu ý SEO: Các công cụ tìm kiếm (Google, Bing) sử dụng thẻ heading để lập chỉ mục (index) nội dung trang. <h1> nên chứa từ khóa chính, chỉ có **một** h1 mỗi trang.

Cấp độ heading

Ví dụ: Preview heading động

<!DOCTYPE html>
<html>
<head>
  <title>Demo Heading</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    #preview { margin-top: 1rem; font-weight: bold; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Heading Preview</legend>
      <label>Nội dung: <input type="text" id="text" placeholder="Nhập tiêu đề..."></label><br>
      <div id="radios">
        <label><input type="radio" name="h" value="h1" checked> H1</label>
        <label><input type="radio" name="h" value="h2"> H2</label>
        <label><input type="radio" name="h" value="h3"> H3</label>
        <label><input type="radio" name="h" value="h4"> H4</label>
        <label><input type="radio" name="h" value="h5"> H5</label>
        <label><input type="radio" name="h" value="h6"> H6</label>
      </div>
      <div>Xem trước: <span id="preview">Kết quả</span></div>
      <button type="button" onclick="preview()">Xem trước</button>
    </fieldset>
  </form>
  <script>
    function preview() {
      var text = document.getElementById("text").value;
      var preview = document.getElementById("preview");
      if (!text) { preview.innerHTML = "Vui lòng nhập tiêu đề"; return; }
      var selected = document.querySelector('input[name="h"]:checked').value;
      preview.innerHTML = "<" + selected + ">" + text + "</" + selected + ">";
    }
  </script>
</body>
</html>

Thực hành tốt (Best Practices)

1. Một h1 mỗi trang: Đảm bảo cấu trúc rõ ràng cho SEO và accessibility.
2. Tuân thủ thứ bậc: Không bỏ cấp (h1 → h3 không có h2). Dùng h2 cho section chính, h3 cho subsection...
3. Không dùng heading để to chữ: Dùng CSS font-size cho văn bản thường. Heading là về ngữ nghĩa, không phải trình bày.
4. Có từ khóa: h1 chứa từ khóa chính, h2/h3 chứa từ khóa phụ/liên quan.
5. Accessibility: Screen reader dùng heading để điều hướng. Cấu trúc tốt giúp người khuyết tật đọc dễ dàng.

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

<article>
  <h1>Hướng dẫn HTML hoàn chỉnh</h1>
  <p>Giới thiệu...</p>
  <section>
    <h2>Cơ bản</h2>
    <p>...</p>
    <section>
      <h3>Thẻ văn bản</h3>
      <p>...</p>
    </section>
    <section>
      <h3>Thẻ media</h3>
      <p>...</p>
    </section>
  </section>
  <section>
    <h2>Nâng cao</h2>
    <p>...</p>
  </section>
</article>