HTML Semantik: Membangun Struktur Halaman Web Berdasarkan Makna
Pendahuluan
Pernahkah kamu melihat kode HTML yang isinya hanya tumpukan tag <div> di dalam <div> lainnya pada hampir seluruh isi dokumen? Secara visual setelah diberi CSS, hasilnya mungkin terlihat rapi. Namun, ada potensi permasalahan besar jika HTML tidak digunakan secara semantik.
HTML Semantik, atau semantic HTML, intinya adalah penggunaan tag HTML yang bermakna. Semantic berarti "berkaitan dengan makna". Menulis HTML semantik berarti menyusun konten berdasarkan makna setiap elemen, bukan berdasarkan tampilannya. Misalnya, gunakan <nav> untuk navigasi, atau <header> dan <footer> header dan footer halaman.
Jangan semuanya dibikin melulu pakai <div> thok.
Pembahasan
Melalui 4 poin di bawah ini, mari kita pelajari bagaimana menulis HTML semantik.
1. Tag div vs Tag Kontainer Semantik
Meskipun hasil tampilannya bisa saja sama, secara semantik keduanya sangat berbeda:
<div>(Division): Gunakan elemen ini hanya sebagai pembungkus untuk keperluan tata letak (layouting) atau estetika karena elemen ini tidak memiliki nilai semantik.- Tag Semantik (seperti
<header>,<nav>): Gunakan tag ini untuk memberikan arsitektur yang jelas bagi pengembang maupun mesin. Sebagai contoh,<header>di tingkat atas biasanya dianggap sebagai banner situs, sedangkan<nav>menunjukkan area navigasi.
Menggunakan elemen semantik membantu alat bantu (screen reader) menemukan "Landmarks" halaman dengan mudah.
2. Meningkatkan Accessability
Saat browser membaca HTML-mu, ia tidak hanya membuat DOM (Document Object Model), tapi juga membangun AOM (Accessibility Object Model).
- AOM adalah versi semantik dari DOM yang digunakan oleh perangkat bantu seperti screen reader[1] untuk menginterpretasikan konten.
- Tag semantik otomatis menciptakan landmarks yang memudahkan pengguna bernavigasi menggunakan keyboard.
- Jika kamu hanya menggunakan
<div>, peta navigasi ini akan kosong dan sulit dipahami oleh alat bantu.
Contoh HTML dan gambaran hasil DOM Tree dan Accessability Tree-nya.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Contoh AOM</title>
</head>
<body>
<header>
<h1>Website Saya</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
</ul>
</nav>
<main>
<section>
<h2>Artikel</h2>
<p>Ini paragraf.</p>
</section>
<div aria-hidden="true">
<p>Tidak perlu dibaca screen reader</p>
</div>
</main>
</body>
</html>
🌳 DOM Tree
Document
└── html
└── body
├── header
│ └── h1 ("Website Saya")
├── nav
│ └── ul
│ └── li
│ └── a ("Home")
└── main
├── section
│ ├── h2 ("Artikel")
│ └── p ("Ini paragraf.")
└── div (aria-hidden="true")
└── p ("Tidak perlu dibaca screen reader")
♿ Accessibility Tree
Document
├── Banner
│ └── Heading Level 1 ("Website Saya")
├── Navigation
│ └── Link ("Home")
└── Main
└── Region ("Artikel")
├── Heading Level 2 ("Artikel")
└── Paragraph ("Ini paragraf.")
3. Hirarki Judul: Lebih dari Sekadar Ukuran
Jangan memilih tag berdasarkan seberapa besar ukuran huruf atau bagaimana style bawaannya muncul di layar. Pilihlah berdasarkan fungsinya.
<h1>sampai<h6>: Tag ini memberikan outline atau kerangka halaman.<h1>biasanya mewakili nama situs atau judul utama.<p>(Paragraph): Memberi tahu browser bahwa teks tersebut adalah satu blok informasi naratif.
Tampilan adalah urusan CSS, sedangkan HTML adalah urusan struktur. Jika ingin paragraf terlihat besar, gunakan CSS, jangan paksa menggunakan <h1>.
4. Elemen Interaksi: Pilih Tag button untuk Aksi, Tag a untuk Navigasi
Mungkin pernah terpikir membuat tombol dari <div> atau menggunakan <a>. Namun, untuk memicu sebuah aksi (bukan pindah halaman), tag <button> adalah pilihan terbaik karena memiliki fitur bawaan yang tidak perlu kamu koding ulang:
- Keyboard Navigable: Otomatis masuk dalam urutan fokus keyboard (tab sequence).
- Full Activation: Bisa langsung diaktifkan dengan tombol Enter maupun Space.
- Implicit Roles: Memberi tahu screen reader bahwa ini adalah tombol, bukan sekadar tautan navigasi, sehingga pengguna tahu bahwa akan ada "aksi" yang terjadi.
| Fitur / Kemampuan | Tag <button> |
Tag <a> (Anchor) |
Tag <div> (+ CSS saja) |
|---|---|---|---|
| Tujuan Utama | Aksi / interaksi | Navigasi (pindah halaman / lokasi) | Layout / dekorasi |
| Implicit Role (AOM) | "button" | "link" (jika ada href) |
Tidak ada (generic) |
| Fokus Tab Keyboard | ✅ Otomatis | ✅ Otomatis (jika ada href) |
❌ Tidak (perlu tabindex) |
| Aktivasi Tombol 'Enter' | ✅ Ya | ✅ Ya (jika ada href) |
❌ Tidak (perlu JS) |
| Aktivasi Tombol 'Space' | ✅ Ya | ❌ Tidak | ❌ Tidak (perlu JS) |
Atribut disabled |
✅ Native | ❌ Tidak ada | ❌ Tidak ada |
Mengapa Harus Semantic?
Menulis HTML secara logis dan bermakna membantu dalam jangka panjang:
- Ramah SEO & Mesin: Mesin pencari menggunakan semantik untuk memahami arti dan struktur konten.
- Maintainability: Kode lebih mudah dipahami oleh pengembang lain (atau kamu di masa depan) karena strukturnya sudah "berbicara" sendiri.
- Aksesibilitas Default: HTML pada dasarnya sudah aksesibel; tugas kita adalah menjaga sifat tersebut agar web bisa dinikmati semua orang.
Penutup
Sebelum asyik bermain dengan logika animasi yang lebih kompleks, tanyakan: "Elemen HTML mana yang paling tepat mewakili bagian ini?". Jika kamu sudah mempertimbangkannya, kemungkinan besar kamu sudah memilih elemen yang benar.
Screen reader adalah perangkat lunak (software) yang membantu pengguna—terutama yang memiliki gangguan penglihatan—untuk mendengar atau merasakan isi layar melalui suara (text-to-speech) atau braille. ↩︎