Konsep Semantic HTML

Sepanjang section sebelumnya, kita menulis elemen yang perannya jelas: p untuk paragraf, ul untuk daftar, dan table untuk data tabuler. Namun begitu menyusun kerangka halaman, kebiasaan lama sering kembali: seluruh bagian dibungkus div. Chapter ini membahas semantic HTML: kebiasaan memilih elemen berdasarkan makna kontennya, bukan bentuk tampilan yang kita bayangkan. Kita akan melihat mengapa pilihan itu berpengaruh, memetakan elemen struktur HTML5, lalu membandingkan dua halaman yang tampak sama tetapi berbeda makna.

Makna Kata Semantik #

Kata semantik berarti makna. Sebuah elemen disebut semantik bila namanya menjelaskan isi bagian yang dibungkusnya: elemen p menyatakan paragraf, elemen img menyatakan gambar, dan elemen ol menyatakan urutan. Browser menentukan tampilan bawaan dari nama tersebut, screen reader menjelaskan strukturnya, dan mesin pencari menimbang bobot konten. Sebaliknya, div dan span tidak menyatakan apa pun; keduanya hanya wadah tanpa label.

Prinsip ini berlaku pada tingkat halaman. Ketika kita menandai satu bagian sebagai konten inti, bagian lain sebagai menu, dan lainnya sebagai penutup, perangkat pembaca dokumen ikut memahami pembagian perannya. Semantic HTML memperluas kebiasaan memberi label dari elemen teks dan list.

Masalah Div-Soup Era Sebelum HTML5 #

Sebelum HTML5 populer, tidak ada elemen khusus untuk struktur halaman. Developer membungkus identitas situs, menu, dan penutup dengan div yang seragam, lalu membedakannya lewat nama class seperti class="header". Browser memperlakukan semua div tersebut secara identik; makna hanya tersimpan pada nama class yang bersifat informal. Istilah div-soup menggambarkan markup penuh div seperti ini, yang strukturnya hanya terbaca oleh penulisnya.

HTML5 menjawabnya dengan menyediakan elemen struktur: header, nav, main, section, article, aside, figure, figcaption, dan footer. Makna struktur pun menjadi bagian resmi bahasa yang ditafsirkan sama di seluruh web.

Dua Halaman yang Tampak Sama #

Berkas berikut adalah versi div-soup halaman promo Toko Budi:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Budi (Versi div)</title>
</head>
<body>
  <div class="header">
    <p>Toko Budi</p>
    <div class="menu">
      <a href="index.html">Beranda</a>
      <a href="produk.html">Produk</a>
      <a href="kontak.html">Kontak</a>
    </div>
  </div>
  <div class="main">
    <div class="artikel">
      <h1>Promo Kopi Gula Aren</h1>
      <p>Selama pekan ini setiap gelas kopi gula aren diskon 20 persen.</p>
    </div>
  </div>
  <div class="footer">
    <p>&copy; 2025 Toko Budi</p>
  </div>
</body>
</html>

Bandingkan dengan versi semantik berikut:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Budi (Versi Semantik)</title>
</head>
<body>
  <header>
    <p>Toko Budi</p>
    <nav>
      <a href="index.html">Beranda</a>
      <a href="produk.html">Produk</a>
      <a href="kontak.html">Kontak</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Promo Kopi Gula Aren</h1>
      <p>Selama pekan ini setiap gelas kopi gula aren diskon 20 persen.</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2025 Toko Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan dua halaman yang nyaris identik:
  - Nama toko "Toko Budi" di atas, diikuti tiga tautan menu
  - Judul "Promo Kopi Gula Aren" dan satu paragraf promo di tengah
  - Tulisan "(c) 2025 Toko Budi" di bagian bawah halaman

Mari kita bandingkan pasangan baris yang berperan sama:

1. Baris 9 (div class="header" versus header): keduanya menampung nama toko dan menu, tetapi hanya header yang menyatakan perannya.
2. Baris 11-15 (div class="menu" versus nav): deretan tautan diberi makna blok navigasi pada versi semantik.
3. Baris 17-22 (div class="main" dan div class="artikel" versus main dan article): versi semantik menandai konten inti sekaligus tulisannya.
4. Baris 23-25 (div class="footer" versus footer): penutup halaman memperoleh elemen dengan makna penutup.
5. Keseluruhan dokumen: tampilan sama, makna berbeda — versi semantik menceritakan strukturnya kepada mesin dan alat bantu.

Tiga Manfaat Pilihan Semantik #

Manfaat pertama, aksesibilitas: screen reader menandai elemen semantik tertentu sebagai landmark, yaitu wilayah halaman yang dilompati, misalnya menuju konten utama tanpa mendengarkan seluruh menu. Detail perilaku landmark kita bahas pada section Accessibility; pemilihan elemen menjadi fondasinya.

Manfaat kedua menyangkut SEO: mesin pencari membandingkan isi main dengan bagian berulang seperti menu dan footer untuk menilai wakil halaman. Manfaat ketiga untuk tim: kerangka halaman terbaca dari nama elemen, tanpa menebak arti class.

Peta Elemen Struktur #

Elemen struktur yang dipakai sepanjang section ini adalah:

• header: pembuka kontainer — identitas situs atau judul bagian.
• nav: blok navigasi utama — menu situs, breadcrumb, pagination.
• main: konten inti halaman — satu per dokumen.
• section: pengelompokan tematik yang biasanya memiliki heading.
• article: komposisi mandiri, layak didistribusikan sendiri.
• aside: konten tangensial — berhubungan dengan inti, bukan bagian alurnya.
• footer: penutup kontainer — info penulis, hak cipta, tautan terkait.

Diagram berikut memetakan posisi elemen tersebut:

Sebagai teks: body menampung tiga wilayah — header di atas, main di tengah, dan footer di bawah. Di dalam header terdapat nav; main menampung article dan aside; di dalam article dapat muncul section.

Chapter berikutnya memulai tur elemen struktur dari ujung atas dan bawah halaman: header dan footer.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Learn: Structuring documents
• WHATWG — HTML Living Standard: Sections
• web.dev — Learn HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Budi (Versi div)</title>
</head>
<body>
  <div class="header">
    <p>Toko Budi</p>
    <div class="menu">
      <a href="index.html">Beranda</a>
      <a href="produk.html">Produk</a>
      <a href="kontak.html">Kontak</a>
    </div>
  </div>
  <div class="main">
    <div class="artikel">
      <h1>Promo Kopi Gula Aren</h1>
      <p>Selama pekan ini setiap gelas kopi gula aren diskon 20 persen.</p>
    </div>
  </div>
  <div class="footer">
    <p>&copy; 2025 Toko Budi</p>
  </div>
</body>
</html>

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Budi (Versi Semantik)</title>
</head>
<body>
  <header>
    <p>Toko Budi</p>
    <nav>
      <a href="index.html">Beranda</a>
      <a href="produk.html">Produk</a>
      <a href="kontak.html">Kontak</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Promo Kopi Gula Aren</h1>
      <p>Selama pekan ini setiap gelas kopi gula aren diskon 20 persen.</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2025 Toko Budi</p>
  </footer>
</body>
</html>