Semantic HTML Dasar

Masalahnya: div-itis

Lihat pola yang sangat umum di kode pemula:

<div id="header">
  <div id="nav">...</div>
</div>
<div id="content">...</div>
<div id="footer">...</div>

Bagi mata manusia, id seperti "header" dan "nav" memang memberi petunjuk. Tetapi bagi browser dan screen reader, semuanya sama: sekadar div tanpa arti. Akibatnya fitur aksesibilitas seperti "lompat ke konten utama" tidak bisa bekerja, karena browser tidak tahu bagian mana yang merupakan konten utama. Mesin pencari pun kesulitan memahami struktur halaman. Penyakit menumpuk div tanpa makna ini dijuluki div-itis.

Solusinya: Tag yang Menjelaskan Perannya

Semantic HTML memakai tag yang namanya menjelaskan peran bagian tersebut:

<header>
  <h1>Warkop Kita</h1>
  <nav>
    <a href="#">Beranda</a>
    <a href="#">Menu</a>
    <a href="#">Kontak</a>
  </nav>
</header>
<main>
  <h2>Selamat Datang</h2>
  <p>Kopi terbaik di kota sejak 2020.</p>
</main>
<footer>
  <p>&copy; 2026 Warkop Kita. Semua hak dilindungi.</p>
</footer>

Empat pilar ini punya peran yang jelas:

• <header>: kepala halaman atau bagian, biasanya berisi logo dan judul.
• <nav>: navigasi utama. Bukan semua link, hanya navigasi penting. Link di dalam paragraf artikel bukan nav.
• <main>: konten utama halaman. Hanya satu per halaman, dan tidak boleh bersarang di dalam header, footer, atau nav.
• <footer>: kaki halaman, berisi copyright, kontak, atau link tambahan.

Dengan struktur ini, pengguna screen reader bisa menekan shortcut untuk melompat langsung ke main atau melihat daftar semua nav di halaman. Struktur yang tadinya buta kini bisa "dibaca" oleh mesin.

Contoh Realistis: Halaman Lengkap

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Blog Raka</title>
</head>
<body>
  <header>
    <h1>Blog Raka</h1>
    <nav aria-label="Navigasi utama">
      <a href="#">Beranda</a>
      <a href="#">Tentang</a>
      <a href="#">Arsip</a>
    </nav>
  </header>
  <main>
    <h2>Postingan Terbaru</h2>
    <p>Daftar artikel akan tampil di sini.</p>
  </main>
  <footer>
    <p>&copy; 2026 Raka. Dibuat dengan HTML semantik.</p>
    <nav aria-label="Tautan footer">
      <a href="#">Privasi</a>
      <a href="#">Kontak</a>
    </nav>
  </footer>
</body>
</html>

Perhatikan ada dua nav di sini dan itu sah-sah saja selama perannya berbeda. Atribut aria-label membedakan keduanya agar screen reader bisa mengumumkan "Navigasi utama" dan "Tautan footer" secara terpisah. Detail seperti ini yang membuat halaman terasa profesional.

Kesalahan Umum

Kesalahan pertama: memakai nav untuk setiap kumpulan link, termasuk link "baca juga" di tengah artikel. nav dicadangkan untuk blok navigasi utama. Terlalu banyak nav sama buruknya dengan tidak ada, karena daftar navigasi di screen reader menjadi penuh sampah.

Kesalahan kedua: menaruh lebih dari satu main, atau menaruh main di dalam header. Aturannya sederhana dan tanpa kecuali: satu halaman, satu main, dan ia harus menjadi anak langsung body (atau pembungkus netral seperti div polos).

<!-- Salah: dua main membingungkan screen reader -->
<main><p>Konten 1</p></main>
<main><p>Konten 2</p></main>

<!-- Benar: satu main untuk seluruh konten utama -->
<main>
  <p>Konten 1</p>
  <p>Konten 2</p>
</main>

Catatan teknis: Mengganti div menjadi tag semantik tidak mengubah tampilan sama sekali, semuanya tetap block-level seperti div. Jadi tidak ada alasan untuk menunda: struktur yang benar tidak merusak desainmu, ia hanya membuatnya bermakna bagi mesin dan alat bantu.