Thẻ heading trong HTML: h1 đến h6, kích thước và thứ tự

Sáu thẻ tiêu đề trong HTML

HTML có sáu cấp tiêu đề (heading), từ <h1> đến <h6>. <h1> là cấp cao nhất (tiêu đề của trang) và <h6> là cấp thấp nhất. Trình duyệt hiển thị mỗi cấp nhỏ hơn cấp trước, tất cả in đậm, mỗi tiêu đề nằm trên một dòng riêng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Mặc định <h5> và <h6> nhỏ hơn chữ thường, điều khiến nhiều người bất ngờ. Kích thước chỉ là giá trị mặc định, và các phần tiếp theo cho thấy vì sao không bao giờ nên chọn cấp tiêu đề theo kích thước.

Tiêu đề là dàn ý của trang

Tiêu đề không phải để trang trí. Gộp lại, chúng tạo thành dàn ý của trang, giống mục lục của một cuốn sách. Người dùng trình đọc màn hình nhảy từ tiêu đề này sang tiêu đề khác để tìm thứ họ cần, còn công cụ tìm kiếm đọc chúng để hiểu các chủ đề trên trang.

Quy tắc rất đơn giản: một <h1> cho tiêu đề trang, <h2> cho mỗi phần chính, <h3> cho các phần con bên trong một <h2>, cứ thế tiếp tục, không bỏ cấp nào. Ví dụ này dựng mục lục từ các tiêu đề, đúng như cách các công cụ hỗ trợ tiếp cận nhìn thấy chúng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Đổi <h3> thứ hai thành <h5> là dàn ý lộ ra một khoảng trống: người đọc dựa vào tiêu đề sẽ thắc mắc h4 đi đâu mất.

Đổi kích thước tiêu đề

Chọn cấp theo vị trí trong dàn ý, rồi đặt giao diện bằng CSS. Tiêu đề ở thanh bên có thể cần là <h2> nhưng trông nhỏ; tiêu đề lớn ở đầu trang có thể là một <h1> rất to:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

Điều ngược lại cũng đúng: đừng dùng thẻ tiêu đề chỉ để làm chữ to hoặc đậm. Để in đậm từ trong câu, dùng <strong>, còn với chữ to không phải tiêu đề thì dùng <p> kèm một class. Xem trang chữ đậm về các thẻ định dạng văn bản.

Tiêu đề phụ và khẩu hiệu

Một tiêu đề phụ nằm ngay dưới tiêu đề thường không phải là tiêu đề: nó không mở ra một phần mới. Hãy dùng một đoạn văn, và nhóm cặp đó bằng <hgroup> nếu muốn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

Dàn ý vẫn gọn gàng (một h1, rồi các phần h2), và khẩu hiệu vẫn nằm cạnh tiêu đề về mặt hiển thị.

Liên kết tới một tiêu đề

Đặt id cho tiêu đề, và mọi liên kết có #id trong href sẽ nhảy thẳng tới đó. Mục lục và các nút "sao chép liên kết tới phần này" hoạt động theo cách này:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Lỗi thường gặp

• Chọn cấp theo kích thước. Chọn theo vị trí trong dàn ý, rồi định dạng bằng CSS.
• Bỏ cấp. Đi thẳng từ <h2> sang <h4> làm hỏng việc điều hướng của người dùng trình đọc màn hình.
• Dùng tiêu đề để nhấn mạnh. Một dòng in đậm trong đoạn văn là <strong>, không phải <h4>.
• Không có <h1>, hoặc logo là <h1> duy nhất. <h1> nên đặt tên cho nội dung trang, như tiêu đề bài viết hay tên sản phẩm.
• Tiêu đề rỗng. Một tiêu đề chỉ có biểu tượng hoặc không có gì bên trong sẽ được đọc là trống. Hãy đặt chữ thật vào đó.