Halo sobat BelajarAIdotid! Setelah mempelajari list, tabel, dan form, sekarang kita masuk ke tahap yang lebih profesional dalam dunia HTML: Semantic HTML dan struktur halaman modern. Ini adalah pondasi dari website yang user-friendly, mudah dibaca mesin pencari, dan siap untuk dikembangkan ke tahap lebih lanjut!
1. Apa Itu Semantic HTML?
Semantic HTML adalah penggunaan tag HTML yang memiliki makna (semantik) jelas, baik untuk browser maupun manusia. Misalnya, daripada menggunakan <div> tanpa arti, kita bisa menggunakan <header>, <nav>, atau <article> yang memberi konteks terhadap isi halaman.
Contoh Perbandingan
<div id="atas"> <div class="menu">...</div> </div> <header> <nav>...</nav> </header>
Tag semantik membantu mesin pencari (SEO), alat bantu disabilitas (accessibility), dan developer lainnya untuk memahami struktur konten dengan lebih baik.
2. Tag-Tag Semantic HTML yang Wajib Kamu Kenal
| Tag | Fungsi | Contoh Penggunaan |
|---|---|---|
<header> |
Bagian atas halaman atau artikel | <header>Judul & Logo</header> |
<nav> |
Menu navigasi | <nav><ul>...</ul></nav> |
<main> |
Isi utama halaman | <main>Konten utama</main> |
<article> |
Konten independen (blog, berita, dll) | <article>Satu artikel lengkap</article> |
<section> |
Bagian dari konten (bertema) | <section>Tentang Kami</section> |
<aside> |
Konten tambahan/sampingan | <aside>Iklan, artikel terkait</aside> |
<footer> |
Bagian bawah halaman | <footer>Hak cipta, kontak</footer> |
3. Struktur Halaman Web Modern
Dengan menggunakan semantic HTML, struktur halaman website akan terlihat seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BelajarAIdotid</title>
</head>
<body>
<header>
<h1>Selamat Datang di BelajarAIdotid</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#artikel">Artikel</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Belajar HTML Itu Mudah!</h2>
<p>Ini adalah konten utama halaman.</p>
</article>
<aside>
<h3>Artikel Terkait</h3>
<ul>
<li><a href="#">Part 1: Struktur HTML</a></li>
<li><a href="#">Part 2: Heading & Paragraf</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 BelajarAIdotid - Semua hak cipta dilindungi</p>
</footer>
</body>
</html>
4. Kenapa Semantic HTML Penting?
- SEO Friendly: Mesin pencari memahami kontenmu lebih baik.
- Aksesibilitas: Pengguna dengan keterbatasan (via screen reader) lebih mudah menavigasi.
- Kode Lebih Rapi: Developer lain bisa membaca dan memahami struktur kode dengan cepat.
- Standar Modern: Dukung praktik terbaik industri web development.
5. Mini Project: Layout Web Sederhana
Buat satu halaman sederhana dengan struktur berikut:
<header>berisi logo dan menu<main>berisi<article>dan<aside><footer>dengan informasi hak cipta
Kesimpulan Part 4
Kamu sudah selangkah lebih profesional dalam belajar HTML. Di Part 4 ini, kamu belajar:
- Apa itu Semantic HTML dan mengapa penting
- Tag semantik seperti
<header>,<main>,<section>,<article>, dll - Struktur halaman web modern dan praktik terbaik
Next up di Part 5, kita akan masuk ke dunia HTML Multimedia: gambar, video, dan audio di web! Jangan lewatkan ya bro! 👨💻🔥
----&-----
