Header trong HTML: thẻ header, ví dụ và sticky header

Cách làm header trong HTML

Bọc phần đầu trang (logo, tên trang web, menu chính) trong phần tử <header>. Đây là một khối block không có giao diện mặc định, nên vài dòng CSS sẽ biến nó thành một thanh ngang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

margin-inline-end: auto trên logo đẩy menu và nút bấm về đầu bên kia của thanh. Bỏ phần tử <style> đi bạn vẫn có một header: chính thẻ đó tạo nên header, không phải nền tối.

header, head và h1

Ba cái tên nghe giống nhau nhưng làm những việc khác nhau:

<head> bên dưới đặt tiêu đề trang mà trình duyệt hiện trên tab. Mọi thứ bạn thấy trong bản xem trước đều đến từ <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

Header thường chứa một thẻ tiêu đề, nhưng không bắt buộc, và một thẻ tiêu đề cũng không cần header bọc quanh.

Header bên trong bài viết

<header> mở đầu cho article hoặc section gần nhất chứa nó, không chỉ cho cả trang. Một danh sách bài blog mà mỗi bài có header riêng là hợp lệ và rất phổ biến:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

Với trình đọc màn hình, chỉ header cấp trang (không nằm trong article, aside, main, nav hay section) mới trở thành landmark banner. Các header trong bài viết chỉ là nhóm bình thường, nên trang không bị có nhiều banner.

Sticky header

position: sticky giữ header ở trên cùng trong khi nội dung bên dưới cuộn. Cuộn bên trong khung dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

Có ba chi tiết giúp nó hoạt động: top: 0 (sticky không làm gì nếu thiếu khoảng lệch), một màu nền (nếu không các hàng sẽ hiện xuyên qua), và z-index để nội dung được định vị không vẽ đè lên nó. Trên trang thật, khung cuộn chính là trang, nên header nằm ngay trong <body>.

Header có position: fixed cũng đứng yên, nhưng nó rời khỏi luồng của trang, nên nội dung trượt xuống bên dưới và cần thêm padding ở trên. Sticky vẫn giữ chỗ của nó trong bố cục.

Header có thể chứa gì

Header có thể chứa gần như mọi nội dung: thẻ tiêu đề, ảnh logo, <nav>, form tìm kiếm, nút bấm. Nó không được chứa một <header> khác hay <footer>, và không được nằm bên trong <footer>, <address> hay một <header> khác.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

Khi logo là liên kết về trang chủ, văn bản alt của nó nên nói liên kết dẫn tới đâu ("Acme home"), vì đó là những gì trình đọc màn hình đọc ra.

Lỗi thường gặp

• Nhầm <header> với <head>. Metadata nằm trong <head>; nội dung hiển thị thì không bao giờ.
• Dùng <header> cho mọi thẻ tiêu đề. Một thẻ tiêu đề đứng riêng không cần header bọc ngoài. Dùng <header> khi có một nhóm nội dung mở đầu.
• Sticky header không có nền. Chữ trên trang cuộn lộ rõ xuyên qua nó. Hãy đặt background.
• Sticky mà không dính. Một phần tử tổ tiên có overflow: hidden hoặc overflow: auto trở thành khung cuộn của sticky, nên header chỉ dính trong khung đó (hoặc không dính chút nào). Hãy kiểm tra các phần tử tổ tiên.
• Đặt menu của trang web trong một <div> bên trong header. Hãy dùng <nav> để người dùng trình đọc màn hình có thể nhảy tới đó.