<h1>–<h6>: Các phần tử tiêu đề mục HTML

Try it

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

h1,
h2,
h3,
h4 {
  margin: 0.1rem 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding-left: 20px;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

Thuộc tính

Các phần tử này chỉ bao gồm các thuộc tính toàn cục.

Ghi chú sử dụng

• Thông tin tiêu đề có thể được dùng bởi các tác nhân người dùng để tự động tạo mục lục cho tài liệu.
• Không sử dụng các phần tử tiêu đề để thay đổi kích thước văn bản. Thay vào đó, hãy sử dụng thuộc tính font-size trong CSS.
• Không bỏ qua các cấp độ tiêu đề: luôn bắt đầu từ <h1>, tiếp theo là <h2> và cứ tiếp tục như vậy.

Tránh sử dụng nhiều phần tử <h1> trên một trang

Mặc dù tiêu chuẩn HTML cho phép sử dụng nhiều phần tử <h1> trên một trang (miễn là chúng không được lồng nhau), nhưng đây không được coi là thực hành tốt. Một trang thường nên có một phần tử <h1> duy nhất mô tả nội dung của trang (tương tự như phần tử <title> của tài liệu).

Tốt hơn là chỉ sử dụng một <h1> mỗi trang và lồng các tiêu đề mà không bỏ qua các cấp độ.

Chỉ định cỡ chữ đồng nhất cho <h1>

Trước tháng 5 năm 2025, tiêu chuẩn HTML quy định rằng các phần tử <h1> trong phần tử <section>, <article>, <aside> hoặc <nav> sẽ hiển thị như <h2> (font-size nhỏ hơn với margin-block được điều chỉnh), hoặc như <h3> nếu lồng thêm một cấp, và cứ tiếp tục như vậy. Kiểu mặc định phụ thuộc ngữ cảnh đặc biệt này đã được xóa bỏ.

Để đảm bảo hiển thị <h1> nhất quán cho các trình duyệt thực hiện kiểu mặc định phụ thuộc ngữ cảnh cũ, hãy sử dụng quy tắc kiểu sau:

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

Ngoài ra, để tránh ghi đè các quy tắc kiểu khác nhắm vào <h1>, bạn có thể sử dụng :where(), có độ đặc hiệu bằng không:

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

Khả năng tiếp cận

Điều hướng

Một kỹ thuật điều hướng phổ biến cho người dùng phần mềm đọc màn hình là nhảy nhanh từ tiêu đề này sang tiêu đề khác để xác định nội dung của trang. Do đó, điều quan trọng là không bỏ qua một hoặc nhiều cấp độ tiêu đề. Làm như vậy có thể gây nhầm lẫn, vì người đang điều hướng theo cách này có thể tự hỏi tiêu đề bị thiếu ở đâu.

Không làm thế này:

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Nên dùng cách này:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Lồng nhau

Các tiêu đề có thể được lồng nhau dưới dạng các mục con để phản ánh cấu trúc tổ chức nội dung của trang. Hầu hết các đọc màn hình cũng có thể tạo danh sách có thứ tự tất cả các tiêu đề trên một trang, có thể giúp người dùng nhanh chóng xác định hệ thống phân cấp nội dung và điều hướng đến các tiêu đề khác nhau.

Với cấu trúc trang sau:

<h1>Beetles</h1>

<h2>Etymology</h2>

<h2>Distribution and Diversity</h2>

<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h3>Cretaceous</h3>
<h3>Cenozoic</h3>

<h2>External Morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Legs</h3>
<h3>Wings</h3>
<h3>Abdomen</h3>

Đọc màn hình sẽ tạo danh sách như sau:

1. h1 Beetles

   1. h2 Etymology

   2. h2 Distribution and Diversity

   3. h2 Evolution

      1. h3 Late Paleozoic
      2. h3 Jurassic
      3. h3 Cretaceous
      4. h3 Cenozoic

   4. h2 External Morphology

      1. h3 Head

         1. h4 Mouthparts

      2. h3 Thorax

         1. h4 Prothorax
         2. h4 Pterothorax

      3. h3 Legs

      4. h3 Wings

      5. h3 Abdomen

Khi các tiêu đề được lồng nhau, các cấp độ tiêu đề có thể bị "bỏ qua" khi đóng một mục con.

• Headings • Page Structure • WAI Web Accessibility Tutorials
• MDN Understanding WCAG, Guideline 1.3 explanations
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• MDN Understanding WCAG, Guideline 2.4 explanations
• Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0

Gán nhãn nội dung mục

Một kỹ thuật điều hướng phổ biến khác cho người dùng phần mềm đọc màn hình là tạo danh sách nội dung phân đoạn và sử dụng nó để xác định bố cục của trang.

Nội dung phân đoạn có thể được gán nhãn bằng cách kết hợp thuộc tính aria-labelledby và id, với nhãn mô tả ngắn gọn mục đích của mục. Kỹ thuật này hữu ích cho các tình huống có nhiều hơn một phần tử phân đoạn trên cùng một trang.

Ví dụ về nội dung phân đoạn

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

Trong ví dụ này, công nghệ đọc màn hình sẽ thông báo rằng có hai mục <nav>, một mục được gọi là "Primary navigation" và một mục được gọi là "Footer navigation". Nếu không có nhãn, người dùng phần mềm đọc màn hình có thể phải điều tra nội dung của từng phần tử nav để xác định mục đích của chúng.

• Using the aria-labelledby attribute
• Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

Ví dụ

Tất cả các tiêu đề

Đoạn mã sau hiển thị tất cả các cấp độ tiêu đề đang được sử dụng.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Trang ví dụ

Đoạn mã sau hiển thị một vài tiêu đề với một số nội dung bên dưới chúng.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

Xem thêm

• <p>
• <div>
• <section>