Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Memahami apa itu semantic HTML dan mengapa penting
- Menggunakan tag
<header>,<nav>,<main>,<section>,<article>,<aside>, dan<footer> - Membedakan kapan pakai
<div>vs tag semantik
Materi Singkat
Bayangkan kamu menerima sebuah paket tanpa label. Kamu tidak tahu isinya — apakah ini makanan, elektronik, atau dokumen penting? Paket yang berlabel "FRAGILE" atau "BUKU" lebih mudah ditangani.
HTML semantik adalah tentang memberi label yang bermakna pada bagian-bagian halamanmu.
<div> vs Tag Semantik
Selama ini kita bisa membungkus apapun dengan <div> (division = pembagian). <div> tidak punya makna khusus — hanya sebuah kotak.
<!-- Cara lama — tidak semantik -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>HTML5 memberikan tag dengan makna spesifik:
<!-- Cara semantik — HTML5 -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Keuntungan Semantic HTML
- Aksesibilitas — screen reader tahu "ini navigasi", "ini artikel utama"
- SEO — Google lebih mudah memahami struktur kontenmu
- Keterbacaan kode — programmer lain (dan dirimu di masa depan) lebih mudah membaca kode
Tag-tag Semantik Utama
| Tag | Kegunaan |
|-----|----------|
| <header> | Kepala halaman atau kepala artikel (logo, judul, navigasi) |
| <nav> | Navigasi utama (menu, breadcrumb) |
| <main> | Konten utama halaman — gunakan sekali per halaman |
| <section> | Pengelompokan konten bertema, biasanya punya heading |
| <article> | Konten mandiri yang bisa berdiri sendiri (post blog, berita) |
| <aside> | Konten sampingan (sidebar, iklan, info terkait) |
| <footer> | Kaki halaman (copyright, link tambahan) |
Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog Sederhana</title>
</head>
<body>
<header>
<h1>Blog Belajar Coding</h1>
<nav>
<a href="#">Beranda</a> |
<a href="#">Artikel</a> |
<a href="#">Tentang</a>
</nav>
</header>
<main>
<section>
<h2>Artikel Terbaru</h2>
<article>
<h3>Belajar HTML itu Mudah!</h3>
<p>Dipublikasikan: 29 April 2026</p>
<p>HTML adalah bahasa markup yang digunakan untuk membuat
struktur halaman web. Dengan HTML, kamu bisa membuat konten
yang terorganisir dengan baik...</p>
<a href="#">Baca selengkapnya</a>
</article>
<article>
<h3>CSS: Membuat Web Jadi Indah</h3>
<p>Dipublikasikan: 30 April 2026</p>
<p>Setelah memahami HTML, langkah berikutnya adalah mempelajari
CSS untuk memberikan tampilan visual yang menarik...</p>
<a href="#">Baca selengkapnya</a>
</article>
</section>
<aside>
<h2>Tentang Blog Ini</h2>
<p>Blog ini berisi catatan perjalanan belajar coding dari nol.
Cocok untuk pemula yang ingin memulai dari dasar.</p>
</aside>
</main>
<footer>
<p>© 2026 Blog Belajar Coding. Dibuat dengan semangat belajar.</p>
</footer>
</body>
</html>Tugas Kecil
Buat ulang profil.html dari pelajaran sebelumnya dengan struktur semantik:
- Gunakan
<header>untuk bagian paling atas (nama dan navigasi) - Gunakan
<nav>untuk link navigasi - Gunakan
<main>sebagai pembungkus konten utama - Gunakan
<section>untuk setiap bagian (Tentang Saya, Keahlian, Hobi, Kontak) - Gunakan
<footer>untuk bagian paling bawah berisi teks copyright sederhana - Simpan sebagai
profil-v2.html