Belajar Frontend - HTML Semantik & Aksesibilitas
Belajar menyusun struktur dokumen dengan HTML semantik — header, nav, main, article, aside, footer — plus dasar aksesibilitas (WCAG): lang, alt text, label form, dan hierarki heading yang benar, dipraktikkan langsung pada halaman TokoKita
#Pendahuluan
Setelah di episode 2 kita memahami cara kerja browser, pada episode ini kita mulai menulis kode nyata: HTML semantik — menyusun struktur dokumen yang bermakna. Mengapa "semantik" penting? Karena HTML bukan hanya untuk mata: ia dibaca oleh browser, search engine, screen reader, dan browser lain — oleh mesin. Struktur yang baik membuat semua "pembaca" itu memahami halaman dengan benar.
Pitfall terbesar pemula adalah "div soup" — halaman yang seluruhnya <div> dan <span> tanpa makna. Halaman seperti itu bisa terlihat sama di mata, tetapi tidak bisa dinavigasi dengan benar oleh pengguna screen reader dan tidak terindeks dengan baik oleh search engine. Episode ini juga membuka pintu aksesibilitas (a11y) yang akan kita dalami di episode 15.
#Semantik: Memberi Makna pada Struktur
Setiap elemen HTML punya makna. Pilih elemen sesuai maknanya, bukan sesuai tampilannya:
| Elemen | Makna | Jangan Dipakai Untuk |
|---|---|---|
<header> | Pembuka halaman/section | Menampung apa pun yang atas |
<nav> | Navigasi utama | Dropdown biasa |
<main> | Konten utama (1 per halaman) | Sidebar |
<article> | Konten mandiri (berita, produk) | Semua kotak |
<section> | Kelompok konten bertema | Dekorasi |
<aside> | Konten terkait (sidebar) | Header |
<footer> | Penutup halaman/section | Konten utama |
<ul>/<ol>/<li> | Daftar berurutan/tidak | Navbar item pakai <div> |
<button> | Aksi yang memicu sesuatu | Link yang di-gaya sebagai tombol |
#Aturan Emas
- Satu
<main>per halaman, denganid="main"danaria-labelyang konsisten. - Satu
<h1>per halaman, lalu hierarkih2→h3berurutan (jangan lompat). <button>untuk aksi,<a>untuk navigasi — jangan membalik, karena keyboard & screen reader memperlakukannya berbeda.
#Praktik: Struktur Halaman TokoKita
Mari susun kerangka halaman katalog TokoKita:
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Katalog | TokoKita</title>
</head>
<body>
<a class="skip-link" href="#main">Langsung ke konten</a>
<header>
<nav aria-label="Navigasi utama">
<a href="/">Beranda</a>
<a href="/katalog">Katalog</a>
<a href="/keranjang">Keranjang</a>
</nav>
</header>
<main id="main">
<h1>Katalog Produk</h1>
<section aria-label="Daftar produk">
<article>
<h2>Kopi Arabika 250g</h2>
<p>Rp85.000</p>
</article>
<article>
<h2>Teh Melati 1kg</h2>
<p>Rp45.000</p>
</article>
</section>
</main>
<footer>
<p>© 2026 TokoKita</p>
</footer>
</body>
</html>Perhatikan pola yang selalu berulang di aplikasi web: skip link (Langsung ke konten) untuk pengguna keyboard, lang="id" untuk pengucapan & terjemahan yang benar, dan hierarki heading yang logis.
Note
Link "langsung ke konten" (skip link) adalah pola aksesibilitas kecil dengan dampak besar: pengguna keyboard tidak harus menekan Tab belasan kali untuk melewati navigasi. Episode 15 membahas pola-pola keyboard ini lebih lengkap.
#Dasar Aksesibilitas (WCAG)
WCAG (Web Content Accessibility Guidelines) disusun dalam empat prinsip — POUR:
- Perceivable — informasi bisa dilihat/didengar. Contoh:
altpada gambar, kontras teks yang cukup. - Operable — semuanya bisa dioperasikan keyboard. Contoh: navigasi dengan Tab, tidak ada interaksi yang hanya bisa diklik mouse.
- Understandable — bahasa dan perilaku bisa dimengerti. Contoh:
lang="id", label form yang jelas. - Robust — kompatibel dengan teknologi bantu. Contoh: markup valid, atribut ARIA yang tepat.
#Alt Text dan Label
<img src="kopi.jpg" alt="Kemasan kopi arabika 250 gram" />
<label for="qty">Jumlah pesanan</label>
<input id="qty" name="qty" type="number" min="1" value="1" />
<button aria-label="Tutup dialog">×</button>Aturan sederhana untuk alt: jika gambar bermakna, tulis deskripsinya; jika murni dekoratif, gunakan alt="" (bukan menghapus atribut, supaya screen reader mengabaikannya). Untuk tombol ikon yang tidak punya teks, aria-label menjelaskan aksinya.
#Common Pitfalls
| Kesalahan | Dampak | Perbaikan |
|---|---|---|
<div> bertumpuk tanpa makna | Screen reader kehilangan struktur | Gunakan elemen semantik |
Heading melompat (h1 → h4) | Hierarki tidak terbaca | Urutkan heading |
<img> tanpa alt | Gambar tidak terbaca | Tambah alt atau alt="" |
<a href="#"> untuk tombol | Tidak accessible keyboard | Pakai <button> |
| Kontras teks terlalu tipis | Sulit dibaca | Kontras minimal 4.5:1 |
#Penutup
Inti yang harus dibawa pulang:
- HTML semantik memberi makna pada struktur; pilih elemen sesuai maknanya, bukan tampilannya.
- Patuhi aturan emas: satu
<main>, satu<h1>, hierarki heading berurutan,<button>untuk aksi. - Aksesibilitas dasar = prinsip POUR: Perceivable, Operable, Understandable, Robust.
alt,label,aria-label, danlangadalah praktik kecil berbiaya rendah dengan dampak besar.
Di episode 4 selanjutnya kita akan membahas CSS modern (layout & responsif) — Flexbox dan Grid untuk menyusun layout, custom properties untuk desain yang konsisten, dan pendekatan mobile-first agar TokoKita tampil bagus di semua ukuran layar. Pastikan kerangka HTML TokoKita dari episode ini siap, karena akan kita "cantikkan" di sana. Sampai jumpa di episode 4!