Pada Part 6, kamu sudah memahami atribut HTML yang mengatur perilaku dan data elemen. Sekarang di Part 7, kita masuk ke materi yang sangat berpengaruh pada struktur konten dan SEO modern, yaitu Semantic HTML.
Semantic HTML adalah pembeda antara:
- Website yang sekadar tampil
- Website yang dipahami Google
Apa Itu Semantic HTML?
Semantic HTML adalah penggunaan elemen HTML yang memiliki makna jelas tentang konten di dalamnya.
Contoh:
- header → bagian kepala halaman
- nav → navigasi
- main → konten utama
- article → artikel mandiri
- section → bagian topik
Dengan semantic HTML:
- Google lebih mudah memahami struktur
- SEO on-page lebih kuat
- Aksesibilitas meningkat
Perbandingan: Non-Semantic vs Semantic
Contoh Non-Semantic
<div id="header">
<div id="menu"></div>
</div>
<div id="content"></div>Contoh Semantic
<header>
<nav></nav>
</header>
<main></main>Secara tampilan bisa sama, tapi secara makna sangat berbeda.
Elemen Semantic HTML yang Wajib Dipahami
header
Digunakan untuk:
- Judul halaman
- Logo
- Navigasi utama
<header>
<h1>Judul Website</h1>
</header>nav
Digunakan untuk navigasi.
<nav>
<a href="/">Home</a>
<a href="/example">Example</a>
</nav>main
Menandai konten utama halaman. Hanya boleh satu main per halaman.
<main>
<article>…</article>
</main>article
Digunakan untuk konten mandiri seperti:
- Artikel blog
- Berita
- Postingan forum
<article>
<h2>Judul Artikel</h2>
<p>Isi artikel</p>
</article>section
Digunakan untuk membagi topik dalam artikel.
<section>
<h2>Sub Topik</h2>
<p>Pembahasan</p>
</section>aside
Digunakan untuk konten pendukung:
- Sidebar
- Related post
- Catatan tambahan
<aside>
<p>Artikel Terkait</p>
</aside>footer
Digunakan untuk bagian bawah halaman.
<footer>
<p>Copyright 2026</p>
</footer>Semantic HTML dan SEO
Search engine menggunakan semantic HTML untuk memahami:
- Konten utama
- Navigasi
- Konten tambahan
Manfaat langsung untuk SEO:
- Struktur konten jelas
- Snippet lebih akurat
- Accessibility score naik
Contoh Struktur Halaman SEO-Friendly
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Artikel</title>
</head>
<body>
<header>
<nav>Menu</nav>
</header>
<main>
<article>
<h1>Judul Artikel</h1>
<section>
<h2>Sub Judul</h2>
<p>Isi konten</p>
</section>
</article>
</main>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>Kesalahan Umum Pemula
- Terlalu banyak div
- main lebih dari satu
- article di luar konteks
- Tidak pakai heading di section
Ringkasan Part 7
- Semantic HTML meningkatkan SEO
- Gunakan elemen sesuai fungsinya
- Struktur jelas = Google paham
Lanjutan Materi
Di Part 8, kita akan membahas:
- HTML untuk SEO
- Meta tag
- Best practice SEO on-page HTML
Sebelumnya: Part 6 Atribut HTML