Apa itu Semantic HTML?

Pada chapter div dan span kita bertemu dua wadah yang sama sekali tidak membawa makna, dan kita sepakat memakainya hanya saat tidak ada pilihan yang lebih tepat. Kebalikannya bernama markup semantik: memilih elemen karena elemen itu menyatakan makna isinya. p menyatakan paragraf, nav menyatakan navigasi, article menyatakan konten mandiri. Kata “semantic” memang berarti perihal makna.

Semantik yang kita latih di Section Text dan Semantics bekerja pada skala kata dan kalimat. Semantic HTML — dalam pemakaian sehari-hari developer — mengangkat prinsip yang sama ke skala halaman: wilayah besar seperti kepala halaman, navigasi, dan isi utama juga punya elemen penyampai makna sendiri. Chapter ini membahas aturannya, manfaatnya, lalu membandingkan dua markup dengan isi yang sama persis.

Aturan dan Mekanisme #

Aturannya satu kalimat: pilih elemen yang menyatakan makna bagian, bukan elemen yang kebetulan tersedia. Mekanismenya bekerja karena browser, pembaca layar, dan mesin pencari memetakan elemen-elemen ini menjadi struktur halaman. Pembaca layar menyebut wilayah semantik sebagai landmark — titik yang bisa dikunjungi langsung tanpa membaca halaman dari atas. Tiga pilar manfaatnya:

Dua Halaman, Satu Isi #

Perhatikan dua markup dengan isi sama. Versi pertama memakai div ber-class — pola yang sering dijuluki div soup:

<div class="kepala">
  <div class="logo">Kedai Kopi Siti</div>
  <div class="menu">
    <a href="index.html">Beranda</a>
    <a href="menu.html">Menu</a>
  </div>
</div>
<div class="isi-utama">
  <div class="judul">Kopi Tubruk ala Siti</div>
  <div class="teks">Kopi tubruk adalah kopi paling sederhana.</div>
</div>

Versi kedua memakai elemen semantik:

<header>
  <p>Kedai Kopi Siti</p>
  <nav>
    <ul>
      <li><a href="index.html">Beranda</a></li>
      <li><a href="menu.html">Menu</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Kopi Tubruk ala Siti</h1>
  <p>Kopi tubruk adalah kopi paling sederhana.</p>
</main>

Hasil Render: tanpa CSS, kedua versi tampil hampir sama — semua elemen blok tersusun menurun dari atas ke bawah. Mari kita telaah versi semantik:

1. Baris 1 (<header>): menyatakan “inilah pengantar halaman” — pembaca layar mengumumkannya sebagai landmark bersama isinya.
2. Baris 2 (<p>): nama kedai tetap paragraf bermakna, bukan div ber-class logo.
3. Baris 3-8 (<nav> + ul): dua link dinyatakan sebagai navigasi dan diberi struktur daftar — bisa dilompati sekaligus oleh pembaca layar.
4. Baris 10 (<main>): menyatakan “isi utama halaman dimulai di sini” — landmark yang paling sering dituju pengunjung.
5. Baris 11-12 (<h1> + p): judul masuk outline dokumen; isi tetap paragraf.

Versi div soup tidak memberi satu pun janji itu: class kepala dan isi-utama hanya dibaca manusia yang kebetulan membuka berkas sumbernya. Perhatikan juga bahwa jumlah baris keduanya hampir sama — markup semantik bukan kerja ekstra; ia pilihan penamaan yang lebih jujur.

Ringkasan #

• Markup semantik berarti elemen menyatakan makna isinya; div dan span adalah wadah tanpa makna.
• Tiga pilar manfaat: aksesibilitas (landmark pembaca layar), SEO (struktur terbaca mesin), pemeliharaan (struktur terbaca developer).
• div soup dan markup semantik bisa berisi sama persis — bedanya janji yang diberikan kepada mesin.
• Tampilan visual tidak berubah; penataan tetap pekerjaan CSS.

Chapter berikutnya memulai tur tujuh elemen wilayah dari header — pengantar halaman sekaligus pengantar bagian.