1. Apa itu Tag Semantik?
Tag semantik adalah elemen HTML yang memiliki arti makna yang jelas baik bagi browser, mesin pencari (Google SEO), maupun pembaca layar tunanetra (Screen Reader). Jangan terjebak dalam kebiasaan buruk 'Div Soup' (semua elemen dibungkus `<div class="...">`).
Peta Elemen Semantik HTML5
- `<header>`: Bagian kepala halaman atau pengantar artikel.
- `<nav>`: Kumpulan tautan navigasi utama.
- `<main>`: Konten unik paling penting dalam dokumen (hanya boleh ada 1 per halaman).
- `<article>`: Bagian konten mandiri yang bisa disindikasi (misal: postingan blog, thread forum).
- `<section>`: Pengelompokan bagian materi yang bertopik sama.
- `<aside>`: Informasi pendukung/sidebar yang terpisah dari konten utama.
- `<footer>`: Catatan kaki, informasi hak cipta, atau kontak.
Struktur Dokumen Semantik Modern
html
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>KuloDev — Platform Edukasi</title> |
| 6 | </head> |
| 7 | <body> |
| 8 | <header> |
| 9 | <nav> |
| 10 | <a href="/">Beranda</a> |
| 11 | <a href="/learn">Kursus</a> |
| 12 | </nav> |
| 13 | </header> |
| 14 | |
| 15 | <main> |
| 16 | <article> |
| 17 | <h1>Belajar HTML Semantik</h1> |
| 18 | <p>Membuat website yang ramah aksesibilitas.</p> |
| 19 | </article> |
| 20 | </main> |
| 21 | |
| 22 | <footer> |
| 23 | <p>© 2026 KuloDev Indonesia</p> |
| 24 | </footer> |
| 25 | </body> |
| 26 | </html> |
Kuis Pemahaman
+10 XP
Mengapa kita disarankan menggunakan elemen `<button>` daripada `<div onClick={...}>` untuk membuat tombol yang bisa diklik?