semanticheaderfooterMahir3 mnt baca

Semantic: header dan footer

header boleh banyak dalam satu halaman, footer bukan cuma copyright: contoh layout blog yang benar.

Bukan Sekadar "Atas" dan "Bawah"

Banyak yang mengira header berarti "bagian atas halaman" dan footer berarti "bagian bawah halaman". Itu pemahaman visual yang menyesatkan. Makna sebenarnya: header adalah pengantar sebuah bagian, footer adalah penutup sebuah bagian. Karena halaman punya banyak bagian, header dan footer pun boleh banyak.

Kenapa ini penting? Screen reader memetakan header halaman sebagai landmark "banner" dan footer halaman sebagai "contentinfo". Pengguna tunanetra bisa melompat langsung ke sana. Dengan div class="header", landmark itu tidak ada.

header: Boleh (dan Sering) Banyak

Aturannya sederhana: setiap article atau section boleh punya header-nya sendiri, berisi judul dan informasi pengantar bagian itu.

html
<!-- header untuk SELURUH halaman: logo + navigasi -->
<header>
  <h1>Blog Kopi Nusantara</h1>
  <nav>
    <a href="#">Beranda</a>
    <a href="#">Tentang</a>
  </nav>
</header>

<main>
  <!-- header untuk SATU artikel: judul + meta -->
  <article>
    <header>
      <h2>Cara Menyeduh V60</h2>
      <p>Ditulis oleh Andi, 8 Oktober 2026</p>
    </header>
    <p>Isi artikel...</p>
  </article>
</main>

Dua header, dua peran berbeda, keduanya valid. Yang satu memperkenalkan situs, yang satu memperkenalkan artikel.

footer menutup sebuah bagian: info penulis, tanggal, tag, link terkait, atau copyright. Sama seperti header, footer bisa menempel pada halaman maupun pada article/section individual.

html
<main>
  <article>
    <header>
      <h2>Cara Menyeduh V60</h2>
      <p>Ditulis oleh Andi</p>
    </header>
    <p>Isi artikel tentang teknik seduh...</p>
    <footer>
      <p>Tag: <a href="#">seduh manual</a>, <a href="#">V60</a></p>
      <p>Bagikan: <a href="#">WhatsApp</a> <a href="#">X</a></p>
    </footer>
  </article>
</main>

<!-- footer untuk SELURUH halaman -->
<footer>
  <p>&copy; 2026 Blog Kopi Nusantara</p>
  <p>Kontak: [email protected]</p>
</footer>

Footer di dalam article menutup artikel itu (tag dan tombol bagikan milik artikel tersebut). Footer di luar menutup halaman (copyright situs). Struktur ini membuat mesin pencari dan screen reader paham mana informasi milik artikel, mana milik situs.

Contoh Lengkap: Layout Blog

html
<body>
  <header>
    <h1>Blog Kopi Nusantara</h1>
    <nav><a href="#">Beranda</a> <a href="#">Arsip</a></nav>
  </header>
  <main>
    <article>
      <header>
        <h2>Resep Kopi Tubruk</h2>
        <p>Oleh Siti, 7 Oktober 2026, 5 menit baca</p>
      </header>
      <p>Langkah pertama...</p>
      <footer>
        <p>Tag: <a href="#">tubruk</a></p>
      </footer>
    </article>
    <article>
      <header>
        <h2>Review Grinder Murah</h2>
        <p>Oleh Budi, 5 Oktober 2026, 8 menit baca</p>
      </header>
      <p>Hasil pengujian...</p>
      <footer>
        <p>Tag: <a href="#">grinder</a></p>
      </footer>
    </article>
  </main>
  <footer>
    <p>&copy; 2026 Blog Kopi Nusantara. Hak cipta dilindungi.</p>
  </footer>
</body>

Salah vs Benar

html
<!-- SALAH: header di dalam header tidak bermakna -->
<header>
  <header>
    <h1>Judul Situs</h1>
  </header>
</header>

<!-- BENAR: satu header per bagian -->
<header>
  <h1>Judul Situs</h1>
</header>
html
<!-- SALAH: footer dipakai sebagai pembungkus styling acak -->
<footer>
  <div class="banner-promo">Diskon 50%!</div>
</footer>

<!-- BENAR: footer berisi penutup yang relevan -->
<article>
  <h2>Judul</h2>
  <p>Isi...</p>
  <footer>
    <p>Ditulis oleh Andi. Terakhir diperbarui 8 Oktober 2026.</p>
  </footer>
</article>

Catatan teknis: header dan footer tidak boleh berisi main, dan tidak boleh bersarang sesama jenis tanpa perantara article/section. Satu trik praktis: kalau kamu bingung menaruh sesuatu di header atau footer, tanyakan "apakah ini memperkenalkan atau menutup bagian ini?" Kalau jawabannya tidak, kemungkinan itu bukan header/footer.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Blog Dua Artikel Berstruktur

Susun halaman blog: header halaman (judul situs + nav dua link), main berisi dua article (tiap article punya header berisi h2 + info penulis/tanggal, dan footer berisi tag), lalu footer halaman berisi copyright. Struktur berlapis seperti ini yang membuat screen reader dan Google paham hierarki kontenmu.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Blogku</title>
</head>
<body>
  <!-- susun di sini -->
</body>
</html>
Open on CodeSandboxOpen Sandbox