Sebuah halaman bisa terlihat rapi tetapi tetap sulit dipakai. Misalnya, semua bagian dibuat dengan div, judul hanya dibesarkan melalui CSS, dan tombol dibuat dari span yang diberi event klik. Secara visual mungkin mirip, tetapi struktur dan perilakunya tidak jelas.
HTML semantik memberi nama sesuai peran elemen. Ini membantu browser, teknologi bantu, dan developer lain memahami halaman tanpa harus menebak dari tampilannya.
Mulai dari kerangka halaman
Gunakan elemen yang memang menggambarkan bagian halaman:
<header>
<a href="/">ScriptCrumbs</a>
<nav aria-label="Navigasi utama">
<a href="/courses/">Kursus</a>
<a href="/blog/">Blog</a>
</nav>
</header>
<main>
<article>
<h1>Memahami HTML semantik</h1>
<p>Isi artikel dimulai di sini.</p>
</article>
</main>
<footer>© ScriptCrumbs</footer>header dan footer menandai bagian pembuka dan penutup, nav menandai navigasi, dan main berisi konten utama. Satu halaman sebaiknya memiliki satu main yang tidak bersarang di dalam header atau footer.
article cocok untuk konten yang berdiri sendiri, seperti tulisan blog. Untuk kelompok konten dengan topik tersendiri, gunakan section dan beri judul yang jelas. div tetap berguna ketika tidak ada elemen semantik yang sesuai, misalnya pembungkus khusus tata letak.
Judul membentuk peta isi
Mulai dengan h1 untuk judul halaman, lalu h2 untuk bagian utama dan h3 untuk subbagian. Jangan memilih tingkat judul karena ukuran visualnya; ukuran bisa diatur dengan CSS. Urutan yang masuk akal membantu pembaca layar berpindah antarbagian dan membantu pembaca biasa memindai artikel.
Tautan dan tombol punya tugas berbeda
Gunakan a ketika aksi memindahkan pengguna ke URL lain. Gunakan button ketika aksi mengubah sesuatu di halaman, seperti membuka menu.
<a href="/courses/html/">Buka kursus HTML</a>
<button type="button" aria-expanded="false">Buka menu</button>Elemen asli sudah memiliki perilaku keyboard dan fokus yang diharapkan. Jika memakai div sebagai tombol, kamu harus membangun semua perilaku itu sendiri.
Periksa hasilnya
Setelah menulis struktur, coba navigasi hanya dengan tombol Tab. Pastikan urutan fokus masuk akal, semua aksi dapat dijangkau, dan gambar informatif memiliki teks alternatif. Di DevTools, periksa accessibility tree untuk melihat peran dan nama yang dibaca teknologi bantu.
Mulailah dari struktur yang benar; CSS dapat menyusul. Untuk latihan bertahap, buka kursus HTML dan ubah halaman latihan menjadi kerangka semantik.
