Tag semantik adalah tag yang namanya menjelaskan isinya. <div> cuma kotak polos, sedangkan <header>, <nav>, <main>, <aside> dan <footer> langsung bilang "ini kepala halaman", "ini menu", "ini isi utama". Kayak kardus pindahan yang diberi label: orang tahu isinya tanpa harus membuka.
🧪 Tebakan cepat: kalau semua tag semantik di halaman diganti
<div>, tampilannya berubah gak? Tebak dulu, jawabannya ada di bagian "Kerangka halaman".
Kerangka halaman
<header>
<h1>Cerita Nusantara</h1>
</header>
<nav>
<a href="#beranda">Beranda</a>
<a href="#cerita">Cerita</a>
<a href="#tentang">Tentang</a>
</nav>
<main>
<h2>Legenda Danau Toba</h2>
<p>Konten utama halaman ada di sini.</p>
</main>
<aside>
<p>Cerita populer lainnya</p>
</aside>
<footer>
<p>© 2026 Cerita Nusantara</p>
</footer>
<header>adalah kepala halaman: judul situs atau logo.<nav>membungkus link menu.<main>membungkus isi utama halaman. Cuma boleh ada satu<main>per halaman.<aside>membungkus konten sampingan: sidebar, iklan, link terkait.<footer>adalah kaki halaman: hak cipta, kontak.
Tag semantik itu pembungkus. Judul dan paragrafnya tetap ditulis pakai <h1>, <h2>, <p> di dalamnya.
Jawaban tebakan: tampilannya sama persis, karena tag semantik gak punya gaya khusus. Bedanya ada di arti. Screen reader (program yang membacakan halaman buat pengguna tunanetra) mendaftar bagian-bagian ini, jadi penggunanya bisa langsung loncat ke menu atau ke isi utama. Mesin pencari juga jadi tahu mana isi utamanya.
<article> buat konten yang berdiri sendiri
<article> membungkus konten yang tetap masuk akal walau dipindah ke halaman lain: satu berita, satu postingan blog, satu komentar. Judul dan isinya ditulis di dalam <article>:
<article>
<h2>Pasar Malam Dibuka Lagi</h2>
<p>Mulai Jumat, pasar malam buka sampai jam 23.00.</p>
</article>
<aside>
<p>Iklan: Gratis ongkir minggu ini!</p>
</aside>
Iklannya bukan bagian berita, jadi masuk <aside>. Ada juga <section>, buat mengelompokkan satu bagian halaman yang punya judul sendiri, misalnya bagian "Harga" di halaman produk.
Pakai tag yang namanya pas
<div class="footer"> bisa dibikin mirip <footer>, tapi class cuma nama buat CSS, gak punya arti buat browser. Jadi kalau sebuah bagian sudah punya tag semantik, pakai tagnya. Nama tagnya juga harus yang benar-benar ada: <bottom> atau <sidebar> bukan tag HTML.
Soal jumlah: <main> cuma satu. <nav> boleh lebih dari satu, misalnya menu atas dan menu samping, asal tiap <nav> diberi label sendiri: <nav aria-label="Menu utama">.
⚠️ Jebakan yang sering ketemu
- Semua dibungkus
<header>,<main>dan<footer>. Berita masuk<article>, iklan masuk<aside>. Pilih tag dari isinya, bukan dari letaknya di kode. - Judul di luar
<article>. Judul yang ditulis sebelum<article>gak ikut jadi judul berita itu. <section>tanpa judul. Kalau cuma butuh pembungkus buat CSS,<div>sudah cukup.
TL;DR: Tag semantik menjelaskan isinya: <header> kepala, <nav> menu, <main> isi utama (cuma satu), <aside> sampingan, <footer> kaki. <article> buat konten yang berdiri sendiri, dengan judul dan isinya di dalamnya. Tampilannya sama dengan <div>, tapi screen reader dan mesin pencari paham artinya. <nav> boleh beberapa, asal diberi aria-label.
