Elemen Semantik & Layout Halaman
header, nav, main, section, article, aside, footer: memberi makna pada bagian halaman, sehingga lebih mudah dibaca mesin, pembaca layar, dan kamu sendiri.
Apa itu "semantik"?
Semantik artinya bermakna. Elemen semantik menjelaskan peran sebuah bagian, bukan hanya tampilannya. Bandingkan:
<!-- Tanpa makna: semua div -->
<div id="atas">...</div>
<div id="menu">...</div>
<!-- Dengan makna -->
<header>...</header>
<nav>...</nav>Hasilnya di layar bisa sama, tetapi elemen semantik membantu: mesin pencari memahami isi, pembaca layar bisa melompat antar bagian, dan kode lebih mudah dibaca orang lain.
Elemen semantik utama
| Elemen | Peran |
|---|---|
<header> | Kepala halaman atau bagian: logo, judul, pengantar |
<nav> | Kumpulan tautan navigasi utama |
<main> | Isi utama halaman (hanya satu per halaman) |
<section> | Satu bagian tematik, biasanya punya heading sendiri |
<article> | Konten mandiri yang bermakna sendiri: artikel blog, komentar, kartu produk |
<aside> | Konten sampingan: sidebar, kotak info, iklan |
<footer> | Kaki halaman atau bagian: hak cipta, kontak, tautan tambahan |
Contoh kerangka halaman
<body>
<header>
<h1>Blog Teknologi</h1>
<nav>
<ul>
<li><a href="/">Beranda</a></li>
<li><a href="/tentang">Tentang</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel...</p>
</article>
<aside>
<h2>Artikel Populer</h2>
</aside>
</main>
<footer>
<p>© 2026 Blog Teknologi</p>
</footer>
</body>section atau article atau div?
- article: bisa dipindahkan ke tempat lain dan tetap bermakna (artikel berita, kartu produk).
- section: pengelompokan tema di dalam halaman (misalnya "Fitur", "Harga").
- div: kotak netral tanpa makna, dipakai bila tidak ada elemen semantik yang cocok (biasanya untuk keperluan CSS).
Aturan praktis: pilih elemen semantik dulu. Pakai div hanya kalau tidak ada yang cocok.