Header HTML: Tag header, Contoh dan Sticky Header

Cara membuat header di HTML

Bungkus bagian atas halamanmu (logo, nama situs, menu utama) dengan elemen <header>. Header adalah kotak blok tanpa tampilan default, jadi beberapa baris CSS sudah cukup untuk mengubahnya menjadi sebuah bar:

<!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 di logo mendorong menu dan tombol ke ujung bar. Hapus elemen <style> dan kamu tetap punya header: yang membuatnya header adalah tag-nya, bukan background gelapnya.

header vs head vs h1

Tiga nama yang terdengar mirip tapi tugasnya berbeda:

<head> di bawah ini mengatur judul halaman yang ditampilkan browser di tab-nya. Semua yang bisa kamu lihat di pratinjau berasal dari <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 sering berisi heading, tapi tidak harus, dan heading tidak perlu dibungkus header.

Header di dalam artikel

<header> memperkenalkan artikel atau bagian terdekatnya, bukan hanya halaman. Daftar postingan blog yang setiap postingannya punya header sendiri itu valid dan umum:

<!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>

Bagi screen reader, hanya header tingkat halaman (yang tidak berada di dalam article, aside, main, nav atau section) yang menjadi landmark banner. Header artikel adalah grup biasa, jadi kamu tidak akan punya beberapa banner.

Sticky header

position: sticky menjaga header tetap di atas sementara konten di bawahnya bergulir. Gulir di dalam kotak di bawah ini:

<!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>

Tiga detail yang membuatnya berhasil: top: 0 (sticky tidak berpengaruh tanpa offset), warna background (kalau tidak, baris-barisnya akan terlihat menembus), dan z-index supaya konten yang diposisikan tidak tergambar di atasnya. Di halaman sungguhan, kotak yang bergulir adalah halamannya sendiri, jadi header berada langsung di <body>.

Header dengan position: fixed juga tetap di tempatnya, tapi keluar dari alur halaman, jadi konten bergeser ke bawahnya dan butuh padding di bagian atas. Sticky tetap memakan ruangnya di layout.

Apa saja yang boleh ada di header

Header bisa berisi hampir semua konten: heading, gambar logo, <nav>, form pencarian, tombol. Header tidak boleh berisi <header> lain atau <footer>, dan tidak boleh berada di dalam <footer>, <address>, atau <header> lain.

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

Saat logo menjadi link ke halaman utama, teks alt-nya harus menyebut ke mana link itu mengarah ("Acme home"), karena itulah yang diumumkan screen reader.

Kesalahan umum

• Tertukar antara <header> dan <head>. Metadata ditaruh di <head>; konten yang terlihat tidak pernah ditaruh di sana.
• Memakai <header> untuk setiap heading. Heading saja tidak perlu dibungkus header. Pakai <header> saat ada sekelompok konten pembuka.
• Sticky header tanpa background. Teks halaman terlihat bergulir menembusnya. Atur background.
• Sticky yang tidak menempel. Elemen leluhur dengan overflow: hidden atau overflow: auto menjadi kotak gulir untuk sticky, jadi header menempel di dalam kotak itu (atau tidak menempel sama sekali). Periksa elemen-elemen leluhurnya.
• Menaruh menu situs di <div> di dalam header. Pakai <nav> supaya pengguna screen reader bisa melompat ke sana.