Setiap halaman yang kita kunjungi hampir selalu diawali blok identitas berisi nama situs dan menu, lalu ditutup blok penutup berisi hak cipta atau tautan terkait. HTML menyediakan dua elemen khusus untuk dua peran tersebut: header dan footer. Chapter ini membahas makna keduanya, perbedaan header dan footer level halaman versus yang bersarang di dalam artikel, serta perilaku landmark yang menyertainya.

header sebagai Pembuka Kontainer #

Elemen header menampung konten pengantar untuk kontainer terdekatnya: logo, nama situs, menu navigasi, judul bagian, atau data penulis. Bila kontainernya adalah halaman, isi header berupa identitas situs; bila kontainernya sebuah article, isi header berupa judul artikel dan meta penulisnya. Menurut spesifikasi WHATWG, header bukan sectioning content, artinya elemen ini tidak memulai bagian baru dalam outline dokumen, melainkan melengkapi bagian yang telah ada.

header Level Halaman vs header Lokal #

header tidak terbatas pada satu posisi di atas halaman. Elemen yang sama boleh muncul di dalam article atau section sebagai header lokal, misalnya pembuka berisi judul dan tanggal terbit. Perbedaan posisi berdampak pada lapisan aksesibilitas: header yang berdiri sebagai anak langsung body memperoleh peran implisit banner, yaitu landmark identitas situs, sedangkan header yang bersarang di dalam article, section, aside, nav, atau main diperlakukan sebagai pembuka lokal tanpa peran khusus. Dengan demikian satu halaman boleh memuat banyak header, tetapi hanya yang paling atas yang menjadi banner.

Elemen footer memuat informasi penutup untuk kontainer terdekatnya: nama penulis, hak cipta, tautan ke dokumen terkait, atau alamat kontak. Sama seperti header, elemen ini boleh muncul berkali-kali — satu sebagai penutup halaman, dan beberapa lagi sebagai penutup artikel. Peran implisit contentinfo, yaitu landmark berisi informasi tentang halaman, hanya melekat pada footer level teratas; footer yang bersarang di dalam artikel tetap bermakna sebagai penutup artikel tersebut.

Contoh Halaman Lengkap #

Berkas berikut menyatukan semua konsep di atas: header dan footer level halaman, ditambah satu article yang memiliki header dan footer lokalnya sendiri:

html header-footer.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog Toko Budi</title>
</head>
<body>
  <header>
    <p>Toko Budi</p>
    <nav>
      <a href="index.html">Beranda</a>
      <a href="produk.html">Produk</a>
      <a href="blog.html">Blog</a>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <h1>Menyimpan Biji Kopi agar Tetap Wangi</h1>
        <p>Penulis: Budi &middot; 12 Maret 2025</p>
      </header>
      <p>Biji kopi kehilangan aromanya perlahan bila dibiarkan terbuka. Udara lembap dan cahaya matahari mempercepat perubahan rasa pada biji.</p>
      <p>Simpan biji dalam wadah kedap udara di tempat sejuk, lalu giling biji sesaat sebelum diseduh agar aromanya bertahan.</p>
      <footer>
        <p>Ditulis oleh Budi &mdash; [email protected]</p>
      </footer>
    </article>
  </main>
  <footer>
    <p>&copy; 2025 Toko Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Nama "Toko Budi" dan tiga tautan menu di bagian atas
  - Artikel dengan judul, baris penulis dan tanggal, dua paragraf isi,
    lalu baris kontak penulis di akhir artikel
  - Tulisan "(c) 2025 Toko Budi" di bagian paling bawah

Mari kita telaah peran setiap blok:

  1. Baris 9-16 (header level halaman): nama situs dan nav berdiri sebagai anak langsung body, sehingga blok ini menjadi banner situs.
  2. Baris 19-22 (header dalam article): judul artikel dan meta penulis berperan sebagai pembuka artikel; blok ini bukan banner karena berada di dalam article.
  3. Baris 25-27 (footer dalam article): baris kontak menutup artikel, bukan menutup situs; perannya tetap berguna sebagai penanda akhir tulisan.
  4. Baris 30-32 (footer level halaman): hak cipta berdiri di level teratas sehingga menjadi contentinfo.
  5. Baris 17 dan 29 (main): artikel inti dibungkus main; elemen ini kita bedah penuh pada chapter berikutnya.

Perhatikan bahwa tidak ada satu pun styling pada contoh: browser menampilkan seluruhnya sebagai teks biasa. Makna header dan footer tidak terletak pada posisi visual yang dihasilkan CSS, melainkan pada struktur yang kita deklarasikan. Chapter berikutnya mengisi ruang di antara keduanya dengan elemen yang menampung konten inti: main.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

header-footer.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog Toko Budi</title>
</head>
<body>
  <header>
    <p>Toko Budi</p>
    <nav>
      <a href="index.html">Beranda</a>
      <a href="produk.html">Produk</a>
      <a href="blog.html">Blog</a>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <h1>Menyimpan Biji Kopi agar Tetap Wangi</h1>
        <p>Penulis: Budi &middot; 12 Maret 2025</p>
      </header>
      <p>Biji kopi kehilangan aromanya perlahan bila dibiarkan terbuka. Udara lembap dan cahaya matahari mempercepat perubahan rasa pada biji.</p>
      <p>Simpan biji dalam wadah kedap udara di tempat sejuk, lalu giling biji sesaat sebelum diseduh agar aromanya bertahan.</p>
      <footer>
        <p>Ditulis oleh Budi &mdash; [email protected]</p>
      </footer>
    </article>
  </main>
  <footer>
    <p>&copy; 2025 Toko Budi</p>
  </footer>
</body>
</html>