Heading hierarchy (h1-h6) tại sao quan trọng?

Heading không phải để chỉnh cỡ chữ — nó là mục lục của trang.

Người dùng screen reader duyệt trang chủ yếu bằng cách nhảy giữa các heading (phím H trong NVDA/JAWS, rotor trong VoiceOver). Cấp heading sai làm mục lục đó sai.

<!-- ĐÚNG: liên tục, không nhảy cấp -->
<h1>Hướng dẫn tối ưu hiệu năng React</h1>
  <h2>Đo trước khi tối ưu</h2>
    <h3>React Profiler</h3>
  <h2>Giảm re-render</h2>

<!-- SAI: nhảy từ h1 xuống h3 vì "h3 nhìn vừa mắt hơn" -->
<h1>Tiêu đề</h1>
  <h3>Mục con</h3>

Quy tắc:
- Một <h1> cho mỗi trang, là chủ đề chính.
- Chỉ xuống một cấp mỗi lần; lên thì nhảy mấy cấp cũng được.
- Cần chữ nhỏ hơn thì dùng CSS, đừng đổi cấp heading.

h2.section-title { font-size: 1rem; }   /* đúng cấp, đúng cỡ */

Lưu ý: lỗi hay gặp là dùng <div class="title"> cho tiêu đề vì không muốn style mặc định — với screen reader, trang đó không có mục lục nào cả.

Chốt: <h1> không bắt buộc là dòng đầu tiên nhìn thấy, nhưng phải là nội dung quan trọng nhất của trang.