Apa itu HTML Semantik?
Secara bahasa, Semantik berarti "ilmu tentang makna".
Dalam HTML, Semantic Elements adalah elemen yang menjelaskan isinya kepada browser dan pengembang.
Non-Semantik vs Semantik
Perhatikan perbandingan dua kode di bawah ini yang secara visual (tampilan) mungkin terlihat sama persis di layar, tetapi berbeda maknanya bagi mesin.
1. Non-Semantik (Cara Lama/Buruk)
Struktur HTML non-semantik (menggunakan <div>)
Menggunakan tag generik <div> untuk segalanya. Browser tidak tahu mana yang judul, mana yang konten, mana yang menu.
<div id="header"> Judul Website </div>
<div id="menu"> Link 1 | Link 2 </div>
<div id="content"> Isi artikel... </div>
<div id="footer"> Copyright 2024 </div>
2. Semantik (Standar HTML5)
Struktur HTML semantik (HTML5)
Menggunakan tag khusus yang memiliki arti.
<header> Judul Website </header>
<nav> Link 1 | Link 2 </nav>
<main> Isi artikel... </main>
<footer> Copyright 2024 </footer>
Mengapa Harus Semantik?
- SEO (Search Engine Optimization): Google memberi nilai lebih pada konten di dalam
<main>atau<article>daripada sekadar di dalam<div>. - Aksesibilitas: Pembaca layar (screen reader) untuk tunanetra bisa langsung melompat ke bagian "Navigasi" atau "Konten Utama" tanpa harus membaca seluruh kode.
- Keterbacaan Kode: Programmer lain lebih mudah memahami struktur kode Anda.