Sebelum HTML5, hampir semua tata letak dibuat dengan <div>:

<div class="header">
  <div class="logo">Kopi Senja</div>
  <div class="menu">...</div>
</div>
<div class="konten">
  <div class="post">...</div>
</div>
<div class="footer">© 2026</div>

Kode ini jalan, tampilannya bisa dibuat cantik dengan CSS. Masalahnya, bagi browser, screen reader, dan mesin pencari, semua kotak itu sama saja: "sebuah div". Nama class seperti header hanya bermakna bagi manusia yang membacanya, bukan bagi mesin. Developer menyebut kondisi ini div soup, sup berisi div.

HTML5 menyelesaikannya dengan elemen yang namanya sudah membawa makna.

Ini halaman blog yang sama, ditulis ulang secara semantik:

<header>
  <h1>Kopi Senja</h1>
  <nav>
    <a href="/">Beranda</a>
    <a href="/menu">Menu</a>
    <a href="/kontak">Kontak</a>
  </nav>
</header>

<main>
  <article>
    <h2>Cara Seduh V60 untuk Pemula</h2>
    <p>Ditulis <time datetime="2026-03-14">14 Maret 2026</time></p>
    <figure>
      <img src="v60.jpg" alt="Tangan menuang air panas ke dripper V60">
      <figcaption>Tuang air memutar dari tengah ke luar.</figcaption>
    </figure>
    <section>
      <h3>Alat yang dibutuhkan</h3>
      <p>Dripper, kertas filter, timbangan, dan ketel leher angsa.</p>
    </section>
  </article>

  <aside>
    <h2>Artikel terkait</h2>
    <a href="/french-press">Seduh French Press</a>
  </aside>
</main>

<footer>
  <p>© 2026 Kopi Senja</p>
</footer>

Tanpa CSS apa pun, tampilannya masih mirip versi div: teks tersusun dari atas ke bawah. Elemen semantik tidak punya gaya khusus (paling hanya display: block). Bedanya ada di makna yang tercatat di DOM.

Beberapa detail yang sering bikin bingung:

• <header> dan <footer> tidak hanya untuk bagian atas dan bawah halaman. Sebuah <article> boleh punya <header> sendiri (judul dan tanggal) dan <footer> sendiri (nama penulis, tag).
• <main> tidak boleh berada di dalam <article>, <aside>, <header>, <footer>, atau <nav>. Ia berdiri sebagai bagian utama halaman.
• <time> menampilkan teks yang ramah manusia ("14 Maret 2026"), sementara datetime="2026-03-14" memberi format standar yang dimengerti mesin, misalnya kalender atau mesin pencari.
• <figure> tidak khusus gambar. Potongan kode, grafik, atau kutipan dengan keterangan juga cocok.

1. Aksesibilitas

Pengguna screen reader sering menjelajah halaman lewat landmark. Elemen <nav>, <main>, <aside>, serta <header> dan <footer> di level halaman otomatis dikenali sebagai landmark. Pengguna bisa langsung lompat "ke konten utama" atau "ke navigasi" tanpa mendengarkan seluruh halaman dari awal. Dengan div soup, fitur itu tidak ada.

2. SEO

Mesin pencari membaca struktur halaman untuk memahami mana konten utama dan mana pelengkap. Isi <article> dan heading yang tertata memberi sinyal yang jelas. Semantik bukan tombol ajaib peringkat satu, tapi membantu mesin pencari memahami halamanmu dengan benar.

3. Keterbacaan kode

Bandingkan </div></div></div> dengan </section></article></main>. Yang kedua langsung memberi tahu kamu sedang menutup apa. Teman setim (dan kamu sendiri tiga bulan lagi) akan berterima kasih.

Tidak. <div> tetap berguna sebagai pembungkus netral untuk keperluan tampilan, misalnya membungkus beberapa kartu agar bisa diatur dengan Flexbox atau Grid. Aturan praktisnya:

1. Tanya dulu: "Apakah bagian ini punya makna?" Kalau ya, cari elemen semantik yang cocok.
2. Kalau bagian itu hanya ada demi styling atau layout, pakai <div>.
3. Bingung antara <article> dan <section>? Tes ini: kalau potongan itu dipindah ke halaman lain dan tetap masuk akal sendirian, pakai <article>. Kalau ia hanya bagian dari sesuatu yang lebih besar, pakai <section>.

Untuk teks sebaris tanpa makna khusus, pasangan <div> adalah <span>.

Sebelum menulis HTML, coba sketsa halamanmu di kertas lalu beri label setiap kotak: "ini header", "ini navigasi", "ini artikel", "ini sidebar". Label itu hampir selalu langsung menunjuk elemen semantik yang tepat. Kotak yang tidak bisa kamu beri nama bermakna biasanya memang cukup jadi <div>.

Heading membentuk semacam daftar isi tak terlihat yang disebut outline. Screen reader bisa menampilkan daftar heading dan pengguna melompat ke bagian yang diinginkan. Supaya outline rapi:

• Pakai satu <h1> sebagai judul utama halaman.
• Turun satu tingkat setiap masuk ke sub-bagian: h1 lalu h2 lalu h3. Jangan lompat dari h2 ke h4.
• Bagian yang setingkat memakai heading yang setingkat.

Outline contoh di atas kira-kira seperti ini:

Kopi Senja (h1)
  Cara Seduh V60 untuk Pemula (h2)
    Alat yang dibutuhkan (h3)
  Artikel terkait (h2)

Dulu spesifikasi HTML5 sempat menjanjikan "outline algorithm": setiap <section> boleh pakai <h1> dan browser akan menghitung tingkatnya sendiri. Fitur ini tidak pernah diterapkan oleh browser dan screen reader, lalu dihapus dari standar. Jadi, tetap atur tingkat heading secara manual.

• Memakai <section> sebagai pengganti <div> di mana-mana. Section seharusnya punya tema dan biasanya heading. Kalau cuma pembungkus layout, pakai div.
• Lebih dari satu <main> yang tampil dalam satu halaman.
• Membungkus setiap kumpulan link dengan <nav>. Nav untuk navigasi utama atau penting, bukan setiap link di footer.
• Memilih heading karena ukuran hurufnya sehingga outline jadi loncat-loncat.
• Menulis <time> tanpa datetime untuk teks seperti "kemarin" atau "14 Maret". Mesin tidak bisa membacanya tanpa format standar.
• Mengira elemen semantik mengubah tampilan. Tampilan tetap urusan CSS.