Coba kasih kardus polos tanpa label ke tukang pindahan — dia harus buka satu-satu buat tau isinya apa. Kasih kardus yang ada label "DAPUR / PIRING / FRAGILE" — dia tau cara nanganin tanpa harus ngintip. Itu bedanya <div> (kardus polos) vs semantic HTML (kardus berlabel). <header>, <nav>, <main>, <article>, <aside>, <footer> — tag yang langsung ngasih makna tentang isinya. Bukan cuma tampilan — semantik nyata yang dibaca screen reader, search engine, dan developer lain yang ngelanjutin kode kamu.

💡 SEO + accessibility 2-in-1. Google ranking lebih tinggi halaman yang struktur semantik-nya jelas (mesin lebih ngerti konten). Screen reader pake landmark untuk navigasi cepat (user tunanetra bisa loncat langsung ke <main> skip nav). Dua keuntungan besar dari satu kebiasaan kecil — pakai tag semantik, bukan div soup.

Daftar Elemen Semantik

Tag-tag ini ganti <div> biasa supaya makna jelas:

• <header> — bagian atas halaman atau section (logo, navigasi)
• <nav> — kumpulan link navigasi
• <main> — konten utama halaman (hanya boleh 1 per halaman)
• <article> — konten mandiri (artikel blog, berita)
• <section> — pengelompokan konten yang terkait
• <aside> — konten sampingan (sidebar, info tambahan)
• <footer> — bagian bawah halaman atau section

Contoh struktur halaman semantik:

<header>
  <nav>
    <a href="/">Beranda</a>
    <a href="/tentang">Tentang</a>
  </nav>
</header>
<main>
  <article>
    <h1>Judul Artikel</h1>
    <p>Isi artikel...</p>
  </article>
  <aside>
    <p>Artikel terkait</p>
  </aside>
</main>
<footer>
  <p>&copy; 2024 Website Saya</p>
</footer>

🎭 Analogi sehari-hari

Semantic HTML = kardus pindahan dengan label ("DAPUR", "RUANG TAMU", "KAMAR"). Tukang bongkar (browser, screen reader, search engine) tahu isi cuma dari label. <div> = kardus polos tanpa label — harus tebak isi sendiri. <header>, <nav>, <main>, <footer> = kardus berlabel.

⚠️ Jebakan yang sering ditemui

• <section> butuh <h> — tanpa heading di dalamnya, <section> sama saja dengan <div>. Kalau cuma butuh container, pakai <div>.
• <main> cuma boleh satu — multi <main> per halaman = invalid HTML, screen reader bingung.
• <article> vs <section> — <article> adalah konten yang mandiri (bisa ditampilkan terpisah, mis. blog post di feed). <section> adalah pengelompokan tematik di dalam dokumen.
• <nav> untuk navigasi utama — jangan bungkus daftar link di footer dalam <nav> kalau itu cuma social/legal links. Boros landmark.
• <header> dan <footer> boleh lebih dari satu — di dalam <article> bisa ada <header> artikel, <footer> artikel. Konteksnya lokal, bukan halaman.

TL;DR: Semantic HTML = tag yang ngasih makna, bukan cuma tampilan. <header>/<nav>/<main>/<article>/<aside>/<footer> ganti <div> polos. Untungnya 2-in-1: SEO Google lebih ngerti konten + screen reader bisa loncat antar landmark. <main> cuma 1 per halaman. <article> = konten mandiri, <section> = pengelompokan tematik (butuh heading). Jangan div soup.