Halo teman-teman semuanya, di artikel kali ini, kita akan mengenal Semantic HTML, sebuah konsep penting dalam dunia pengembangan web modern. Mungkin kita pernah dengar istilah ini, tapi sebenarnya apa sih maksudnya?
Apa Itu Semantic HTML?
Semantic HTML adalah penggunaan elemen HTML yang memiliki makna atau arti spesifik. Jadi bukan cuma untuk membungkus konten, tapi juga menjelaskan fungsi dari konten tersebut. Contohnya, dibanding pakai <div> untuk segalanya, kita bisa pakai tag seperti:
<header> - bagian atas halaman<nav> - menu navigasi<main> - konten utama<article> - artikel atau konten mandiri<section> - bagian dari halaman<aside> - sidebar atau info tambahan<footer> - bagian bawah halaman
Kenapa Harus Pakai Semantic HTML?
Beberapa alasan kenapa kita sebaiknya menggunakan elemen semantik:
- Lebih mudah dibaca oleh manusia (developer lain atau kita sendiri nanti)
- Meningkatkan SEO karena mesin pencari bisa memahami struktur halaman kita
- Aksesibilitas lebih baik untuk pembaca layar (screen reader)
- Struktur halaman jadi lebih jelas dan terorganisir
Contoh Perbandingan
-
Tanpa semantic:
<div id="header">Judul Website</div>
<div id="nav">Menu Navigasi</div>
<div id="content">Isi Halaman</div>
<div id="footer">Copyright</div>
-
Dengan semantic HTML:
<header>Judul Website</header>
<nav>Menu Navigasi</nav>
<main>Isi Halaman</main>
<footer>Copyright</footer>
Lebih jelas, kan? Bahkan tanpa melihat isi, kita sudah tahu bagian mana yang berfungsi sebagai header, navigasi, dan lain-lain.
Daftar Elemen Semantic HTML Umum
| Tag |
Fungsi |
<header> |
Bagian atas dari halaman atau bagian konten |
<nav> |
Menampung link navigasi |
<main> |
Konten utama dari halaman |
<section> |
Bagian tertentu dari konten, bisa berisi heading dan paragraf |
<article> |
Konten mandiri seperti post blog, berita, dsb |
<aside> |
Konten sampingan, seperti sidebar atau catatan tambahan |
<footer> |
Informasi penutup seperti copyright, link tambahan, dll |
<figure> |
Kontainer untuk gambar, grafik, dsb |
<figcaption> |
Keterangan untuk <figure> |
Kesimpulan
Dengan menggunakan Semantic HTML, kita membuat struktur halaman yang lebih jelas, terorganisir, dan mudah dipahami oleh manusia maupun mesin.
Pada artikel selanjutnya, kita semua akan belajar bagaimana cara mengintegrasikan CSS di dalam HTML, biar tampilannya lebih menarik.
Terima Kasih