Penggunaan Header dan Footer

header dan footer paling sering membingungkan bukan karena aturannya sulit, melainkan karena keduanya bekerja di dua tingkat sekaligus: tingkat situs dan tingkat bagian. Kesalahan umum lahir di tempat ini — markup yang benar, tetapi dipasang di tingkat yang salah.

Aturan berjenjangnya begini: header situs dan footer situs masing-masing satu per halaman, membungkus pengantar dan penutup seluruh halaman. header dan footer bagian boleh banyak — setiap article atau section yang punya pengantar atau penutup sendiri berhak memakainya. Mekanismenya: pembaca layar menentukan peran sebuah header dari pembungkus terdekatnya, bukan dari penamaan kita.

Kapan Bagian Butuh header Sendiri #

Dua syarat sederhana: bagian itu punya judul, dan judul itu datang bersama informasi pendamping — nama penulis, waktu, atau keterangan status. article blog yang berjudul plus bertanggal layak membuka dirinya dengan header berisi keduanya. Kelompok yang hanya bertuliskan judul polos cukup ber-heading tanpa header.

Kesalahan: Semua Dibungkus header #

header sering disalahpahami sebagai “bagian atas halaman”, sehingga seluruh isi halaman digulung ke dalamnya. header adalah tempat pengantar — bukan wadah isi. Isi halaman milik main; logo dan menu boleh ikut di header karena keduanya memang pengantar.

Contoh: Halaman Blog Berlapis #

<header>
  <p><strong>Catatan Budi</strong> — catatan kopi seorang pemula</p>
  <nav aria-label="Menu utama">
    <ul>
      <li><a href="index.html">Beranda</a></li>
      <li><a href="arsip.html">Arsip</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>Kopi Tubruk ala Siti</h1>
      <p>Oleh Budi — <time datetime="2026-11-02">2 November 2026</time></p>
    </header>
    <p>Kopi tubruk adalah kopi paling sederhana: bubuk dan air mendidih.</p>
    <p>Siti menakar dua sendok bubuk, menuang air baru mendidih, lalu menunggu tiga menit.</p>
    <footer>
      <p>Seri seduh manual: <a href="v60.html">Racik V60 di Rumah</a></p>
    </footer>
  </article>
</main>

<footer>
  <p>© 2026 Catatan Budi — <a href="mailto:[email protected]">[email protected]</a></p>
</footer>

Hasil Render: nama blog, dua menu, judul artikel dengan penulis dan tanggal, dua paragraf, satu baris tautan seri, lalu copyright dengan kontak — semuanya tersusun menurun karena belum ada CSS. Mari kita bedah tiap lapis:

1. Lapis situs — header (baris 1-9): pengantar seluruh halaman: nama blog dan navigasi utama; blok ini muncul sama di semua halaman.
2. Lapis artikel — header (baris 13-16): pengantar khusus artikel: judul plus penulis dan tanggal; bagian dari main, bukan bagian dari header situs.
3. Lapis isi (baris 17-18): paragraf artikel — tidak menyentuh header mana pun; pengantar boleh menempel isi, tetapi tidak menelan isinya.
4. Lapis artikel — footer (baris 19-21): penutup khusus artikel: tautan lanjutan milik tulisan ini.
5. Lapis situs — footer (baris 25-27): penutup seluruh halaman: copyright dan kontak.

Perhatikan penamaan yang sama untuk dua peran berbeda — “header situs” dan “header artikel”. Browser dan pembaca layar membedakannya dari pembungkus terdekat: header yang tinggal di body adalah header situs, yang tinggal di article adalah header artikel.

Tabel Ringkasan Pola #

Ringkasan #

• header/footer situs: satu per halaman; header/footer bagian: boleh banyak.
• Bagian butuh header sendiri bila punya judul plus metadata pendamping.
• Kesalahan umum: menggulung isi halaman ke dalam header — isi milik main.
• Pembungkus terdekat yang menentukan peran, bukan nama elemennya.

Chapter berikutnya menjawab pertanyaan yang lebih tajam: section atau article?