HTML Semantik
Dulu, web developer sering membuat halaman web hanya menggunakan tag <div> di mana-mana. Hal ini membuat
struktur halaman sulit dipahami oleh mesin (seperti Google) dan perangkat pembaca layar (Screen Reader).
HTML Semantik hadir untuk memberikan makna pada setiap bagian halaman web.
Alih-alih hanya <div class="header">, kita
diperkenalkan dengan tag <header>. Mari pelajari elemen
semantik yang wajib kamu tahu!
🗺️ Anatomi Halaman Web Semantik
Bayangkan struktur halaman web sebagai sebuah majalah atau koran digital. Berikut adalah elemen semantik pembentuk layout utamanya:
🏷️ Penjelasan Masing-Masing Tag
<header>
Bagian pengantar atau kop dari sebuah halaman (atau dari sebuah section/artikel). Biasanya berisi logo website, judul halaman, dan formulir pencarian.
Bisa ada lebih dari satu <header> dalam satu halaman (misal: di dalam setiap <article>).
<nav>
Kumpulan link utama untuk navigasi website (menu utama). Tidak semua link harus dibungkus tag ini, cukup link penting pengarah antar-halaman.
<main>
Membungkus konten sentral/utama dari halaman, konten yang unik dari halaman tersebut. Tidak boleh mengandung elemen yang berulang seperti sidebar, menu navigasi utama, logo, atau footer luar.
⚠️ Hanya boleh ada satu <main> per halaman!
<section>
Pengelompokan tematik dari sebuah konten. Umumnya memiliki sebuah heading (<h2>/<h3>).
Contoh: Section "Fitur Kami", Section "Testimoni", Section "Paling Laris".
<article>
Konten yang berdiri sendiri (independen). Jika konten ini dicabut dan diletakkan di website lain, maknanya tetap utuh.
Contoh: Berita blog, postingan forum, kartu produk (karena harga dan deskripsinya utuh pada produk itu sendiri).
<aside>
Konten pendukung yang posisinya di luar alur utama (sidebar). Isinya terkait tapi tidak secara langsung. Contoh: Iklan, biografi penulis, daftar kategori, tag artikel.
<footer>
Bagian penutup/catatan kaki. Berisi hak cipta (copyright), link kebijakan privasi, kontak, dan link sitemap.
🆚 DIV Soup vs HTML Semantik
<div class="header">
<h1>Judul Web</h1>
</div>
<div class="navigasi">
<ul>...</ul>
</div>
<div class="konten-utama">
<div class="berita">
<h2>Berita Terkini</h2>
</div>
</div>
<div class="footer">
<p>Copyright 2026</p>
</div><header>
<h1>Judul Web</h1>
</header>
<nav>
<ul>...</ul>
</nav>
<main>
<article>
<h2>Berita Terkini</h2>
</article>
</main>
<footer>
<p>Copyright 2026</p>
</footer>🌟 Mengapa Kita Harus Perhatian pada HTML Semantik?
SEO (Mesin Pencari)
Google dan kawan-kawan sangat suka HTML Semantik. Mereka bisa membedakan mana konten utama dan mana cuma menu dengan mudah, sehingga peringkat website kamu bisa naik di Google.
Aksesibilitas (a11y)
Sangat membantu bagi penyandang disabilitas tunanetra. Screen Reader atau alat bantu dengar mengerti di mana harus membacakan isi website (mereka bisa skip navikasi, langsung ke `<main>`).
Untuk Programmer
Lebih bersih, terstruktur, mantap, dan gampang dibaca oleh Programmer lain yang bergabung dengan projek tim kamu daripada melihat jutaan tag `<div>` di layar monitor mereka.
📋 Ringkasan
<div>) agar kodemu punya "makna" dan bisa
dipakai oleh mesin penelusuran.
<header>
dan <footer> mengapit isi keseluruhan
website sebagai pengantar dan catatan kaki.
<main>
adalah isi spesifik tiap halaman web, cuma boleh 1 per halaman.
<article> (bisa berdiri independen) dan
<section> (grup terstruktur logis)
digunakan untuk membungkus konten di dalam `main`.
<aside>
adalah teman konten sebagai sidebar dan <nav> difokuskan ke menu.