NgodingSantaiMemahami Semantic HTML dan Kapan Harus Menggunakannya
Membangun halaman artikel yang tetap mudah dipahami ketika CSS dan JavaScript dimatikan, sekaligus nyaman dinavigasi dengan keyboard dan teknologi bantu.
Semantic HTML berarti memilih elemen berdasarkan makna dan tugasnya, bukan berdasarkan bentuk visual yang diinginkan. Sebuah elemen <button> boleh dibuat terlihat seperti ikon, sedangkan <article> boleh tampil tanpa kotak. Tampilan adalah urusan CSS; HTML menjelaskan struktur, hubungan, dan perilaku dasar konten.
- Halaman artikel dengan landmark yang jelas.
- Urutan heading yang tetap masuk akal tanpa CSS.
- Kontrol interaktif yang bekerja dengan keyboard.
- Checklist pemeriksaan melalui browser dan pembaca layar.
Mulai dari isi, bukan daftar tag
Bayangkan kita mendapat desain berisi header situs, navigasi, artikel utama, daftar isi, rekomendasi artikel, dan footer. Kesalahan umum adalah membungkus semuanya dengan <div>, kemudian memberi class seperti .header atau .button. Secara visual hasilnya bisa sama, tetapi browser hanya melihat kumpulan wadah tanpa hubungan yang kuat.
Sebelum menulis markup, tuliskan fungsi setiap bagian. Apakah bagian tersebut navigasi utama, konten mandiri, informasi pelengkap, atau sekadar pembungkus layout? Pertanyaan ini biasanya langsung mengarahkan kita ke elemen yang tepat.
Peta landmark untuk halaman artikel
Landmark membantu pengguna teknologi bantu berpindah ke bagian penting tanpa membaca halaman dari awal. Satu pola yang aman untuk blog adalah header untuk identitas situs, nav untuk kelompok tautan navigasi, main untuk konten unik halaman, dan footer untuk informasi penutup.
<body>
<a href="#konten" class="skip-link">Lewati ke konten</a>
<header>
<a href="/">NgodingSantai</a>
<nav aria-label="Navigasi utama">...</nav>
</header>
<main id="konten">
<article>
<header>
<h1>Mengenal Semantic HTML</h1>
<p>Ringkasan artikel.</p>
</header>
<section aria-labelledby="landmark">...</section>
</article>
</main>
<footer>...</footer>
</body>Elemen <header> boleh muncul lebih dari sekali karena header situs dan header artikel mempunyai konteks berbeda. Sebaliknya, gunakan satu <main> yang terlihat untuk konten utama dokumen. Beri label pada beberapa navigasi agar tujuan masing-masing dapat dibedakan.
Article, section, aside, atau div?
<article> cocok untuk konten yang dapat berdiri sendiri, misalnya tulisan blog, ulasan, atau kartu berita lengkap. <section> mengelompokkan pembahasan bertema dan biasanya mempunyai heading. <aside> berisi informasi yang berhubungan tetapi bukan alur utama, seperti daftar isi atau glosarium. <div> tetap benar ketika kita hanya membutuhkan pembungkus untuk grid tanpa makna tambahan.
| Kebutuhan | Elemen awal | Alasan |
|---|---|---|
| Tulisan mandiri | article | Dapat dipahami di luar halaman asal |
| Bab bertema | section | Mengelompokkan isi di bawah heading |
| Daftar isi | nav | Kelompok tautan navigasi |
| Catatan pelengkap | aside | Bukan alur utama artikel |
| Pembungkus layout | div | Tidak membawa makna khusus |
Heading membentuk kerangka bacaan
Gunakan heading untuk menunjukkan hierarki, bukan untuk mengejar ukuran font. Judul utama halaman menggunakan h1; pembahasan utama memakai h2; rincian di dalam pembahasan memakai h3. Ukuran visual seluruhnya bisa diatur melalui CSS.
Cara cepat memeriksanya adalah membuka DevTools, melihat accessibility tree, atau menjalankan snippet yang mengumpulkan semua heading. Jika daftar heading saja sudah menceritakan alur artikel, strukturnya biasanya cukup baik.
const outline = [...document.querySelectorAll("h1, h2, h3")]
.map((heading) => ({
level: heading.tagName,
text: heading.textContent.trim()
}));
console.table(outline);Pakai elemen interaktif yang memang interaktif
Tautan digunakan untuk berpindah ke URL; tombol digunakan untuk menjalankan aksi pada halaman. Jangan mengganti tombol dengan div yang diberi event klik. Tombol native sudah dapat menerima fokus, diaktifkan dengan Enter atau Space, dan mempunyai peran yang dikenali teknologi bantu.
<!-- Berpindah halaman -->
<a href="/artikel.html">Baca artikel</a>
<!-- Mengubah keadaan halaman -->
<button type="button" aria-expanded="false"
aria-controls="menu-kategori">
Buka kategori
</button>Atribut ARIA membantu ketika HTML native belum cukup menjelaskan keadaan, tetapi ARIA tidak menggantikan perilaku. Jika menambahkan aria-expanded, JavaScript juga harus memperbarui nilainya ketika panel dibuka atau ditutup.
Studi kasus: memperbaiki kartu artikel
Kartu sering dibuat sebagai satu tautan raksasa yang di dalamnya masih terdapat tombol lain. Tautan interaktif tidak boleh berisi kontrol interaktif lain. Solusi yang lebih stabil adalah menjadikan judul sebagai tautan utama, lalu menjaga metadata sebagai teks biasa.
<article class="card">
<img src="grid.webp" width="640" height="360"
alt="Tampilan garis bantu CSS Grid di DevTools">
<p><a href="/kategori/css">CSS</a></p>
<h2>
<a href="/artikel/css-grid.html">Panduan CSS Grid</a>
</h2>
<p>Membuat daftar kartu yang fleksibel.</p>
<p><time datetime="2026-07-12">12 Juli 2026</time></p>
</article>Alt gambar menjelaskan informasi yang dibawa gambar, bukan mengulang judul secara otomatis. Jika gambar hanya dekorasi dan tidak menambah informasi, gunakan alt="" agar dilewati pembaca layar.
Cara menguji tanpa alat berbayar
- Matikan CSS sementara. Isi harus tetap memiliki urutan yang masuk akal.
- Gunakan Tab dan Shift+Tab. Semua kontrol harus dapat dicapai dan indikator fokus terlihat.
- Periksa tab Accessibility di DevTools. Pastikan nama dan peran tombol atau tautan sesuai.
- Jalankan validator HTML untuk menemukan nesting yang tidak valid dan ID ganda.
- Uji zoom 200%. Konten tidak boleh hilang atau saling menimpa.
Checklist sebelum publikasi
- Ada satu konten utama yang mudah ditemukan.
- Setiap section penting memiliki heading yang menjelaskan isinya.
- Tautan memiliki tujuan URL; tombol memiliki aksi.
- Label navigasi dibedakan ketika jumlahnya lebih dari satu.
- Urutan DOM tetap logis meskipun CSS mengubah posisi visual.
- ARIA hanya digunakan untuk melengkapi semantik dan selalu disinkronkan dengan keadaan UI.