Apa Itu Semantic HTML
Semantic HTML adalah menulis halaman dengan elemen yang menyatakan makna bagiannya — <nav> untuk navigasi, <article> untuk isi utama, <footer> untuk kaki halaman — bukan dengan <div> untuk semuanya.
Perbedaannya tidak terlihat di layar. Halaman yang seluruhnya dibangun dari <div> bisa tampil persis sama dengan halaman yang memakai elemen semantik. Yang berbeda adalah apa yang bisa dipahami mesin dari strukturnya tanpa menebak.
<div class="header"> <header>
<div class="nav"> → <nav>
<div class="content"> <main>
<div class="post"> <article>Kedua kolom itu tampil sama. Yang kanan menyatakan apa yang ada di dalamnya; yang kiri hanya menyatakan nama kelas yang artinya cuma diketahui pembuatnya.
Makna struktur ini juga menjadi dasar aksesibilitas website, karena pembaca layar dan mesin pencari sama-sama membutuhkan penanda yang jelas untuk menafsirkan halaman.
Elemen yang Perlu Dipakai
<header>— bagian atas halaman atau bagian atas sebuah artikel.<nav>— kumpulan tautan navigasi utama.<main>— isi utama halaman. Hanya satu per halaman, dan tidak mencakup menu atau kaki.<article>— bagian yang berdiri sendiri dan masih masuk akal kalau dicabut dari halamannya.<section>— bagian bertema di dalam dokumen, umumnya diawali heading.<aside>— isi sampingan yang tidak jadi bagian utama.<footer>— kaki halaman atau kaki artikel.<figure>dan<figcaption>— gambar beserta keterangannya.<time>— tanggal dalam format yang bisa dibaca mesin.<button>dan<a>— dipakai sesuai fungsinya: tombol untuk tindakan, tautan untuk berpindah halaman.
Dua elemen terakhir yang paling sering dilanggar. <div> yang diberi penangan klik terlihat seperti tombol, tapi tidak bisa difokuskan lewat papan ketik dan tidak dikenali pembaca layar sebagai tombol.
Kenapa Ini Berpengaruh
Bagi mesin pencari
Elemen semantik membantu membedakan isi utama dari elemen pelengkap. Ini yang menentukan bagian mana yang dianggap mewakili halaman — dan bagian mana yang hanya menu, iklan, atau kaki yang berulang di semua halaman.
Yang perlu jujur dinyatakan: semantic HTML bukan faktor peringkat tersendiri. Pengaruhnya berjalan lewat pemahaman struktur, dan itu tetap nyata meski tidak berbentuk skor.
Bagi aksesibilitas
Ini manfaat yang paling langsung dan paling terukur. Pembaca layar memakai elemen semantik untuk menyediakan navigasi — melompat ke isi utama, berpindah antar bagian, atau menelusuri daftar tautan. Halaman yang seluruhnya <div> menghilangkan seluruh cara navigasi itu.
Bagi pemeliharaan
Kode yang menyatakan maksudnya lebih mudah dibaca orang berikutnya, dan lebih tahan terhadap perubahan desain.
Kesalahan yang Sering Terjadi
<div>dipakai untuk semuanya, dengan nama kelas sebagai satu-satunya penanda maksud.<section>dipakai sebagai pengganti<div>untuk membungkus apa pun.<section>menyatakan bagian bertema, dan sebaiknya punya heading.- Beberapa
<main>dalam satu halaman. Hanya boleh satu. <article>dipakai untuk potongan yang tidak berdiri sendiri, seperti satu kartu produk di dalam daftar penyaringan.<div>yang diberi penangan klik menggantikan<button>.- Heading dipilih berdasarkan ukuran hurufnya, bukan berdasarkan tingkat strukturnya.
- Elemen semantik dipakai tapi urutannya kacau, misalnya
<footer>di tengah isi utama.
Cara Memeriksanya
- Buka tab Accessibility di alat pengembang peramban dan lihat pohon strukturnya. Kalau isinya penuh “generic”, halaman itu belum semantik.
- Telusuri lewat papan ketik saja dengan tombol tab. Elemen yang tidak bisa dicapai berarti bukan elemen interaktif yang benar.
- Jalankan pemeriksa aksesibilitas otomatis untuk menangkap pelanggaran yang berpola.
- Periksa jumlah
<main>— harus tepat satu. - Baca kerangka headingnya saja dan pastikan ia terbaca sebagai ringkasan halaman.
Pertanyaan Umum Seputar Semantic HTML
Apakah mengganti div jadi elemen semantik menaikkan peringkat?
Tidak dengan sendirinya. Yang berubah adalah kejelasan struktur bagi mesin dan bagi pembaca layar. Perbaikannya nyata, tapi bukan lewat skor tersendiri.
Apakah <section> dan <div> sama saja?
Tidak. <section> menyatakan bagian bertema dan sebaiknya punya heading; <div> adalah pembungkus tanpa makna, dan itu penggunaannya yang benar.
Apakah kerangka kerja modern menghasilkan HTML semantik?
Tergantung cara Anda menulisnya. Kerangka kerja tidak memilih elemen untuk Anda — ia menghasilkan apa pun yang Anda tulis di komponennya.