Semantic HTML: Arti di Balik Tag

Masalahnya div

Pemula (dan banyak tutorial lama) menulis semuanya dengan <div>:

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

Bagi browser, ini empat kotak tanpa makna. Bagi screen reader dan mesin pencari, sama: tidak ada informasi tentang peran tiap bagian. Inilah yang diperbaiki semantic HTML: tag yang namanya menjelaskan perannya.

Tag Semantic Utama

<header>
  <h1>Blog Saya</h1>
  <nav>
    <a href="/">Beranda</a>
    <a href="/tentang">Tentang</a>
  </nav>
</header>

<main>
  <article>
    <h2>Judul Artikel</h2>
    <p>Isi artikel...</p>
  </article>

  <aside>
    <h3>Artikel Terkait</h3>
    <p>Konten sampingan...</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Blog Saya</p>
</footer>

Peran masing-masing:

• <header>: kepala halaman atau kepala sebuah section (logo, judul).
• <nav>: blok navigasi utama.
• <main>: konten utama halaman. Cukup satu per halaman.
• <article>: konten mandiri yang masuk akal kalau dipisah (artikel blog, kartu produk).
• <section>: pengelompokan konten bertema dalam halaman.
• <aside>: konten pelengkap (sidebar, info terkait).
• <footer>: kaki halaman atau kaki sebuah section.

article vs section

Ini yang paling sering bikin bingung. Tesnya sederhana: apakah konten ini masuk akal kalau dibaca sendirian, terpisah dari halaman?

• Artikel blog: ya, bisa dibagikan sebagai RSS. Pakai <article>.
• Bagian "fitur produk" di landing page: tidak, cuma masuk akal dalam konteks halaman. Pakai <section>.

Satu <article> boleh berisi beberapa <section> (misalnya bab-bab artikel), dan satu <section> boleh berisi beberapa <article> (misalnya daftar kartu berita).

Kenapa Repot-repot?

Tiga alasan konkret:

1. SEO: Google memahami struktur halamanmu lebih baik. Konten di dalam <article> diperlakukan sebagai konten utama.
2. Aksesibilitas: screen reader punya shortcut "lompat ke main", "daftar semua nav". Pengguna tunanetra navigasi jauh lebih cepat.
3. Keterbacaan kode: <nav> langsung jelas, tidak perlu menebak maksud div class="nav".

Catatan teknis: <div> tidak dilarang. Dia tetap berguna sebagai pembungkus generik untuk styling (misalnya grup yang cuma butuh di-CSS). Aturannya: pakai tag semantic kalau ada yang cocok maknanya, pakai <div> kalau tidak ada.

figure dan figcaption

Untuk gambar beserta keterangannya, ada pasangan khusus:

<figure>
  <img src="gunung.jpg" alt="Gunung saat matahari terbit">
  <figcaption>Gunung Papandayan saat matahari terbit, 2026.</figcaption>
</figure>

<figcaption> terhubung secara semantik dengan gambarnya, lebih baik daripada paragraf biasa di bawah gambar.

Pola Halaman Standar

Hafalkan kerangka ini, karena dipakai hampir semua website:

<body>
  <header>...logo dan nav...</header>
  <main>
    <section>...bagian 1...</section>
    <section>...bagian 2...</section>
  </main>
  <aside>...sidebar...</aside>
  <footer>...copyright...</footer>
</body>

Mulai sekarang, tantang dirimu: setiap mau menulis <div>, tanya dulu "apakah ada tag semantic yang lebih tepat?"