Organisasi Konten Semantik

Kenapa ini penting

Coba bayangkan dua buku. Buku pertama punya daftar isi, bab, subbab, dan indeks. Buku kedua isinya sama, tetapi semua teks ditulis dengan ukuran huruf yang sama tanpa penanda bab. Keduanya bisa dibaca, tetapi hanya buku pertama yang bisa kamu navigasi dengan cepat.

HTML semantik adalah daftar isi dan penanda bab untuk halaman web. Elemen seperti <header>, <nav>, <main>, dan <article> tidak mengubah tampilan secara drastis, tetapi memberi makna. Makna inilah yang dipakai oleh tiga "pembaca" penting:

Screen reader (pembaca layar untuk pengguna tunanetra, misalnya NVDA, VoiceOver, TalkBack) yang memungkinkan pengguna melompat langsung ke navigasi atau ke konten utama.
Mesin pencari yang memakai struktur heading dan elemen semantik untuk memahami bagian mana yang inti dan mana yang tambahan.
Developer lain (termasuk kamu enam bulan lagi) yang membaca kode. <nav> jauh lebih jelas daripada <div class="x1">.

Aksesibilitas bukan fitur bonus. Itu bagian dari membuat website yang bisa dipakai semua orang, termasuk orang tua yang memperbesar huruf, pengguna yang hanya memakai keyboard, dan pengguna tunanetra.

Konsep inti

Elemen landmark

Landmark adalah area besar halaman yang dikenali teknologi bantu sebagai titik navigasi.

Elemen	Makna	Peran ARIA bawaan
`<header>`	Kepala halaman atau kepala sebuah bagian	`banner` (kalau tidak berada di dalam article/section)
`<nav>`	Kumpulan link navigasi utama	`navigation`
`<main>`	Konten utama, hanya satu yang tampil per halaman	`main`
`<section>`	Bagian tematik yang punya judul	`region` (kalau diberi nama)
`<article>`	Konten mandiri yang masuk akal dibaca terpisah (artikel blog, kartu produk, komentar)	`article`
`<aside>`	Konten pendamping (sidebar, kotak info terkait)	`complementary`
`<footer>`	Kaki halaman atau kaki sebuah bagian	`contentinfo` (kalau tidak berada di dalam article/section)

Cara gampang membedakan <section> dan <article>: tanyakan "kalau potongan ini disalin ke situs lain, apakah masih masuk akal sendirian?" Kalau ya, itu <article>. Kalau hanya masuk akal sebagai bagian dari halaman ini (misalnya bagian "Harga" di landing page), itu <section>. Kalau kamu cuma butuh pembungkus untuk styling, pakai <div>.

Elemen semantik lain yang berguna: <figure> dan <figcaption> untuk gambar beserta keterangannya, <time datetime="2026-10-23"> untuk tanggal yang bisa dibaca mesin, <address> untuk info kontak, dan <mark> untuk teks yang disorot.

Hierarki heading

Heading adalah kerangka outline halaman. Pengguna screen reader sering menavigasi dengan melompat dari heading ke heading, jadi urutannya harus logis:

Satu <h1> per halaman yang menjelaskan topik halaman.
<h2> untuk bagian utama, <h3> untuk subbagian di dalam <h2>, dan seterusnya.
Jangan melompat level, misalnya dari <h2> langsung ke <h4>.
Jangan memilih heading karena ukurannya. Kalau butuh teks besar yang bukan judul, atur dengan CSS.

Aksesibilitas dasar

alt untuk gambar: tulis apa yang penting dari gambar, bukan "gambar dari...". Contoh baik: alt="Grafik penjualan naik 40% dari Januari ke Juni".
label untuk input: selalu hubungkan dengan for/id. Placeholder bukan pengganti label karena hilang begitu pengguna mengetik.
Tombol vs link: <button> untuk aksi (buka menu, kirim form), <a href> untuk berpindah halaman. <div onclick> tidak bisa difokus dengan keyboard dan tidak diumumkan sebagai tombol.
ARIA (Accessible Rich Internet Applications) adalah atribut tambahan untuk memberi info ke teknologi bantu. Aturan pertama ARIA: kalau ada elemen HTML bawaan yang sudah punya makna itu, pakai elemen bawaan. ARIA yang sering dipakai pemula:
aria-label="..." memberi nama pada elemen yang tidak punya teks, misalnya tombol ikon.
aria-labelledby="id" memakai teks elemen lain sebagai nama.
aria-expanded="true/false" memberi tahu status menu buka atau tutup.
aria-current="page" menandai link halaman yang sedang aktif.
aria-hidden="true" menyembunyikan elemen dekoratif (misal ikon SVG) dari screen reader.
Skip link: link "Langsung ke konten" di paling atas supaya pengguna keyboard tidak perlu menekan Tab puluhan kali melewati menu.

Kenapa semantik penting untuk SEO

Jangan bayangkan ada "poin ranking" khusus hanya karena kamu memakai <article>. Manfaatnya lebih mendasar: struktur heading yang jelas membantu mesin pencari memahami topik dan subtopik, teks alt membantu gambar muncul di pencarian gambar, dan konten utama yang jelas berada di <main> memudahkan pemisahan antara isi dan bagian berulang seperti menu atau footer. Struktur yang rapi juga mempermudah mesin pencari menampilkan cuplikan yang relevan. Jadi anggap semantik sebagai cara berkomunikasi yang jelas dengan mesin, bukan trik ranking.

Contoh kode

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog Kopi Senja | 5 Cara Menyeduh Kopi di Rumah</title>
</head>
<body>
  <!-- Skip link: pengguna keyboard bisa langsung loncat ke konten -->
  <a href="#konten" class="skip-link">Langsung ke konten</a>

  <header>
    <a href="/" aria-label="Beranda Kopi Senja">
      <img src="logo.svg" alt="" width="40" height="40"> <!-- dekoratif, nama sudah di aria-label -->
    </a>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="/">Beranda</a></li>
        <li><a href="/blog" aria-current="page">Blog</a></li>
        <li><a href="/kontak">Kontak</a></li>
      </ul>
    </nav>
    <!-- Tombol ikon tanpa teks butuh aria-label -->
    <button type="button" aria-label="Buka menu" aria-expanded="false">
      <svg aria-hidden="true" width="24" height="24"><path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor"/></svg>
    </button>
  </header>

  <main id="konten">
    <article>
      <header>
        <h1>5 Cara Menyeduh Kopi di Rumah</h1>
        <p>Ditulis oleh Dimas, <time datetime="2026-10-20">20 Oktober 2026</time></p>
      </header>

      <section aria-labelledby="judul-alat">
        <h2 id="judul-alat">Alat yang kamu butuhkan</h2>
        <p>Cukup tiga alat sederhana untuk mulai.</p>
        <figure>
          <img src="alat.jpg" alt="Gelas ukur, saringan V60, dan teko leher angsa di atas meja kayu" width="800" height="500">
          <figcaption>Tiga alat dasar untuk metode pour over.</figcaption>
        </figure>
      </section>

      <section aria-labelledby="judul-metode">
        <h2 id="judul-metode">Metode penyeduhan</h2>
        <h3>1. Tubruk</h3>
        <p>Metode paling klasik di Indonesia.</p>
        <h3>2. Pour over V60</h3>
        <p>Rasa lebih bersih dan ringan.</p>
      </section>

      <footer>
        <p>Tag: <a href="/tag/kopi">kopi</a>, <a href="/tag/tutorial">tutorial</a></p>
      </footer>
    </article>

    <aside aria-label="Artikel terkait">
      <h2>Baca juga</h2>
      <ul>
        <li><a href="/blog/gula-aren">Kenapa gula aren cocok untuk kopi susu</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <address>Jl. Braga No. 10, Bandung · <a href="tel:+6281234567890">0812-3456-7890</a></address>
    <p>&copy; 2026 Kopi Senja</p>
  </footer>
</body>
</html>
<!-- → Di VoiceOver/NVDA, daftar landmark menampilkan: banner, navigation "Navigasi utama",
     main, complementary "Artikel terkait", contentinfo. -->

Untuk mengecek struktur, buka DevTools Chrome, tab Elements, lalu panel Accessibility yang menampilkan pohon aksesibilitas. Kamu juga bisa menjalankan Lighthouse (kategori Accessibility) untuk menemukan gambar tanpa alt, input tanpa label, atau kontras warna yang kurang.

Kesalahan umum

"Div soup": semua bagian ditulis sebagai <div>. Cara benar: pakai landmark untuk area besar, <div> hanya untuk pembungkus styling.
Lebih dari satu <main> yang tampil, atau <main> diletakkan di dalam <article>. Cara benar: satu <main> per halaman, sebagai area konten utama.
Melompat level heading atau memilih heading demi ukuran. Cara benar: urutkan h1, h2, h3 sesuai struktur, atur ukuran lewat CSS.
Menambah ARIA yang berlawanan dengan elemen, misalnya <button role="link">, atau redundan seperti <nav role="navigation">. Cara benar: gunakan elemen yang tepat, ARIA hanya untuk mengisi kekurangan.
Membuat tombol dari <div>. Tidak bisa difokus dengan Tab dan tidak bisa dipicu dengan Enter atau Spasi. Cara benar: pakai <button type="button">.

Latihan

Mudah, Ubah kerangka berikut menjadi semantik: <div class="atas">, <div class="menu">, <div class="isi">, <div class="samping">, <div class="bawah">.
Sedang, Buat halaman produk berisi tiga kartu produk. Tiap kartu harus berupa <article> dengan judul <h3>, gambar ber-alt, harga, dan tombol "Tambah ke keranjang". Bungkus ketiganya dalam <section> berjudul <h2>.
Menantang, Buat header dengan tombol menu hamburger yang aksesibel: tombol berikon SVG, aria-label, aria-expanded, dan aria-controls yang menunjuk ke id menu. Tulis juga JavaScript kecil yang mengubah aria-expanded saat diklik.

Lihat solusi

<!-- Soal 1 -->
<header>...</header>
<nav aria-label="Navigasi utama">...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- Soal 2 -->
<section aria-labelledby="judul-produk">
  <h2 id="judul-produk">Produk unggulan</h2>
  <article>
    <h3>Kopi Arabika Garut 250 g</h3>
    <img src="arabika.jpg" alt="Kemasan kopi arabika Garut warna cokelat" width="300" height="300">
    <p>Rp85.000</p>
    <button type="button">Tambah ke keranjang</button>
  </article>
  <article>
    <h3>Kopi Robusta Lampung 250 g</h3>
    <img src="robusta.jpg" alt="Kemasan kopi robusta Lampung warna hijau" width="300" height="300">
    <p>Rp60.000</p>
    <button type="button">Tambah ke keranjang</button>
  </article>
  <article>
    <h3>Gula Aren Cair 500 ml</h3>
    <img src="aren.jpg" alt="Botol gula aren cair dengan label kuning" width="300" height="300">
    <p>Rp40.000</p>
    <button type="button">Tambah ke keranjang</button>
  </article>
</section>

<!-- Soal 3 -->
<header>
  <button id="tombol-menu" type="button" aria-label="Buka menu"
          aria-expanded="false" aria-controls="menu-utama">
    <svg aria-hidden="true" width="24" height="24"><path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor"/></svg>
  </button>
  <nav aria-label="Navigasi utama">
    <ul id="menu-utama" hidden>
      <li><a href="/">Beranda</a></li>
      <li><a href="/blog">Blog</a></li>
    </ul>
  </nav>
</header>
<script>
  const tombol = document.getElementById('tombol-menu');
  const menu = document.getElementById('menu-utama');
  tombol.addEventListener('click', () => {
    const terbuka = tombol.getAttribute('aria-expanded') === 'true';
    tombol.setAttribute('aria-expanded', String(!terbuka));
    tombol.setAttribute('aria-label', terbuka ? 'Buka menu' : 'Tutup menu');
    menu.hidden = terbuka; // → menu muncul saat terbuka, hilang saat ditutup
  });
</script>

Ringkasan

Landmark (header, nav, main, aside, footer) adalah titik navigasi bagi screen reader.
<article> untuk konten mandiri, <section> untuk bagian tematik berjudul, <div> untuk pembungkus tanpa makna.
Satu <h1> per halaman, heading berurutan tanpa lompat level.
Pakai elemen bawaan dulu (<button>, <label>, <nav>), ARIA hanya untuk melengkapi.
Semantik membantu SEO karena mesin pencari lebih mudah memahami struktur dan isi utama halaman.