Digital Transformation
Semantic HTML (HTML Semantik)
Semantic HTML adalah praktik memakai tag HTML yang menjelaskan arti kontennya, seperti article, nav, header, agar terbaca rapi oleh mesin pencari dan screen reader.
TL;DR: Semantic HTML memakai tag yang punya makna, contohnya article, section, nav, header, footer. Tujuannya: mesin pencari, screen reader, dan LLM lebih mudah memahami struktur halaman.
Apa itu Semantic HTML?
Semantic HTML adalah penggunaan elemen HTML sesuai arti, bukan sekadar div kosong. Alih-alih menulis semuanya dalam div, Anda memakai nav untuk navigasi, article untuk konten mandiri, aside untuk sidebar, dan footer untuk catatan kaki halaman. Pendekatan ini membuat kode lebih mudah dirawat dan memberi sinyal struktural yang jelas ke crawler.
Contoh Perbandingan
| Tidak Semantik | Semantik |
|---|---|
<div class="nav"> | <nav> |
<div class="post"> | <article> |
<div class="sidebar"> | <aside> |
<div class="top"> | <header> |
Kenapa Penting untuk SEO?
Google dan mesin pencari lain memakai struktur HTML sebagai salah satu sinyal ranking factor. Kombinasi Semantic HTML + structured data meningkatkan kemungkinan halaman mendapat rich result. Bagi pengguna disabilitas, Semantic HTML wajib agar screen reader berfungsi benar. Saat membangun portofolio di Next.js, saya selalu memakai tag semantik karena Lighthouse SEO score biasanya naik 5-10 poin tanpa usaha tambahan.
Pertanyaan Umum
Apakah div masih boleh dipakai?
Boleh, untuk pembungkus layout yang tidak punya arti semantik. Hindari div untuk elemen yang sudah ada tag khususnya.
Apakah Semantic HTML berpengaruh ke performa?
Tidak langsung, tapi HTML yang rapi biasanya lebih ringkas dan mudah di-render.
Istilah Terkait