Elemen header

Tiga kata yang mirip sering membingungkan pemula: header, head, dan heading. Ketiganya berhubungan dengan “kepala” dokumen, tetapi menunjuk tiga hal yang berbeda. Chapter ini membahas salah satunya — elemen header — sekaligus meluruskan dua istilah lainnya agar tidak tertukar.

Aturan dasarnya: header adalah pengantar untuk halaman ATAU untuk satu bagian halaman. Karena itu satu halaman boleh memuat banyak header — satu untuk situs, satu lagi untuk setiap section atau article yang butuh pengantar. Mekanismenya: pembaca layar mengumumkan header sebagai bagian dari landmark wilayah yang membungkusnya.

header, head, dan heading #

Singkatnya: head untuk mesin, header untuk pengunjung, heading untuk judul. Isi khas header situs adalah logo atau nama situs, tagline, dan navigasi utama.

header dalam Bagian #

header tidak hanya milik halaman. Setiap section dan article yang punya judul plus informasi pendamping boleh membuka dirinya dengan header sendiri. Contoh berikut memuat header situs dan header bagian dalam satu halaman:

<header>
  <p><strong>Kedai Kopi Siti</strong> — kopi asli Batu</p>
  <nav>
    <ul>
      <li><a href="index.html">Beranda</a></li>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="kontak.html">Kontak</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <header>
      <h2>Menu Seduh</h2>
      <p>Diperbarui setiap Senin.</p>
    </header>
    <ul>
      <li>Tubruk — Rp8.000</li>
      <li>V60 — Rp18.000</li>
    </ul>
  </section>
</main>

Hasil Render: nama kedai, tiga link, judul “Menu Seduh”, keterangan pembaruan, dan dua item menu tersusun menurun — header sendiri tidak menambahkan tampilan apa pun. Mari kita telaah:

1. Baris 1-10 (<header> situs): pengantar seluruh halaman — nama kedai dan navigasi utama berdiri di sini; blok ini muncul sama di setiap halaman.
2. Baris 12-23 (<main> + <section>): isi halaman; section mengelompokkan satu tema, yaitu daftar menu seduh.
3. Baris 14-17 (<header> bagian): pengantar khusus section — judul plus keterangan pembaruan; sah karena header boleh tinggal di dalam section maupun article.
4. Baris 18-21 (<ul>): isi sebenarnya dari section — daftar menu berada di luar header, karena header tempat pengantar, bukan tempat isi.

Batas nesting-nya tegas: header tidak boleh menjadi turunan header lain, footer, maupun address.

Ringkasan #

• header adalah pengantar untuk halaman atau bagian; satu halaman boleh memuat banyak header.
• Bedakan dari head (metadata, tidak tampil) dan heading (h1-h6).
• Isi khas: nama situs, tagline, judul bagian, navigasi.
• header sah di dalam section dan article; tidak boleh berada di dalam header, footer, atau address.

Chapter berikutnya membahas nav — elemen navigasi yang hampir selalu tinggal di dalam header situs.