header dan nav
<div> tidak menyatakan apa pun — ia hanya kotak tanpa makna. Elemen semantic memberi tahu browser, mesin pencari, dan screen reader apa peran sebuah bagian: <header> untuk kepala halaman, <nav> khusus untuk kumpulan link navigasi. Manfaatnya nyata bagi pengguna screen reader, yang bisa melompat langsung antar penanda ini tanpa mendengarkan seluruh isi halaman. Tidak semua kumpulan link perlu <nav> — pakai untuk navigasi utama, bukan untuk setiap deretan link di dalam artikel.
👀 Contoh dulu
<header>
<nav>
<a href="/produk">Produk</a>
<a href="/harga">Harga</a>
</nav>
</header>Hasilnya: Dua link berjejer di bagian atas halaman — secara tampilan mirip div biasa, tapi maknanya berbeda bagi mesin pencari dan screen reader.
💡 Perhatikan indentasi: nav berada DI DALAM header, ditandai posisinya di antara <header> dan </header>.
📝 Sekarang giliranmu
Buat <header> yang di dalamnya ada <nav>. Di dalam nav, buat satu link ke / bertuliskan Beranda.