Mengapa Semantik Penting

Semantik dalam HTML adalah kesesuaian antara elemen yang dipilih dan makna konten yang dibungkusnya. Topik ini menjelaskan mengapa markup bermakna memberikan dividen nyata bagi halaman web, yaitu struktur yang lebih mudah dipahami mesin pencari, dapat dilompati pembaca layar, dan lebih mudah dirawat dalam jangka panjang. Pembahasan dikontraskan dengan kebiasaan menumpuk div tanpa makna, kemudian selisih kedua gaya markup tersebut diukur dengan skrip sederhana.

Makna sebagai kontrak#

Halaman web dibaca oleh dua jenis pihak dengan cara yang berbeda. Browser menampilkan hasil rendernya kepada manusia, sedangkan program seperti crawler mesin pencari, pembaca layar, dan ekstensi browser membaca pohon DOM tanpa melihat tampilan sama sekali. Elemen semantik menjadi kontrak makna bagi pihak kedua tersebut. Ketika kelompok tautan berada di dalam elemen nav, program apa pun dapat menyimpulkan bahwa kelompok itu adalah navigasi, tanpa perlu menebak dari atribut class.

Kebalikannya adalah tumpukan div tanpa makna, yang dalam percakapan pengembang web sering disebut div soup. Pada gaya markup ini, setiap daerah halaman dibungkus elemen div dengan nama class sebagai satu-satunya penunjuk makna, misalnya class="menu" atau class="kaki". Nama class tidak membawa makna baku, sehingga program eksternal tidak memiliki cara standar untuk menafsirkannya. Tabel berikut membandingkan kedua gaya tersebut untuk kebutuhan struktur yang sama.

Dividen untuk mesin pencari#

Crawler mesin pencari mengurai HTML menjadi pohon DOM, lalu menafsirkan struktur halaman dari elemen-elemen yang menentunya. Hierarki judul dari h1 sampai h6 menggambarkan pembagian topik, elemen article menandai konten yang berdiri sendiri, sedangkan elemen nav memisahkan tautan navigasi dari isi utama. Struktur yang jelas memudahkan mesin pencari memahami hal yang dibahas sebuah halaman dan bagian mana yang menjadi intinya.

Markup semantik juga membantu mesin pencari membedakan konten inti dari kerangka halaman yang berulang, seperti header dan footer, yang biasanya tidak diikutkan pada penilaian isi. Keuntungan ini tidak serta-merta mengangkat peringkat karena peringkat ditentukan banyak faktor di luar struktur. Mesin pencari tetap dapat menampilkan halaman tanpa semantik, tetapi halaman semantik menghilangkan tebakan yang tidak perlu.

Dividen untuk pembaca layar#

Pembaca layar (screen reader) adalah perangkat lunak yang membacakan isi layar atau menampilkannya dalam bentuk braille bagi pengguna dengan gangguan penglihatan. Untuk halaman yang panjang, pembaca layar menyediakan pintasan untuk melompat antar-daerah halaman, dan daerah tersebut berasal dari landmark, yaitu daerah halaman yang diberi label peran bawaan. Halaman dengan header, nav, main, dan footer menyediakan empat titik lompat yang dapat didaftarkan. Halaman div soup tidak menyediakan satu pun, sehingga pengguna harus membaca berurutan dari awal.

Keuntungan ini diperoleh tanpa biaya tambahan karena elemen semantik sudah membawa peran ARIA secara implisit. ARIA (Accessible Rich Internet Applications) adalah kumpulan atribut untuk mendeklarasikan peran dan status antarmuka bagi alat bantu. Elemen nav misalnya sudah diumumkan sebagai peran navigation, sehingga atribut role="navigation" yang ditulis manual hanya mengulang hal yang sudah ada.

Selisih yang terukur#

Ketiga dividen di atas sulit diukur secara langsung, tetapi selisih strukturnya dapat dihitung dengan skrip. Kode berikut membandingkan kerangka halaman yang sama dalam dua versi, yaitu versi div dan versi semantik, lalu menghitung jumlah tag, jumlah div, dan jumlah landmark pada masing-masing versi. Skrip ini JavaScript murni sehingga dapat dijalankan dengan Node.js.

// membandingkan kerangka halaman versi div dan versi semantik
const versiDiv = `
<div class="atas">
  <div class="menu">
    <a href="#beranda">Beranda</a>
    <a href="#arsip">Arsip</a>
  </div>
</div>
<div class="isi">
  <div class="pos">
    <div class="judul">Jadwal piket kelas</div>
    <p>...</p>
  </div>
  <div class="samping"><p>...</p></div>
</div>
<div class="kaki"><p>...</p></div>`;

const versiSemantik = `
<header>
  <nav>
    <a href="#beranda">Beranda</a>
    <a href="#arsip">Arsip</a>
  </nav>
</header>
<main>
  <article>
    <h1>Jadwal piket kelas</h1>
    <p>...</p>
  </article>
  <aside><p>...</p></aside>
</main>
<footer><p>...</p></footer>`;

function ukur(nama, markup) {
  const tag = (markup.match(/<\/?[a-z][a-z0-9]*\b/g) || []).length;
  const div = (markup.match(/<div\b/g) || []).length;
  const landmark = (markup.match(/<(header|nav|main|footer|aside|article|section)\b/g) || []).length;
  console.log(`${nama}: ${tag} tag, ${div} div, ${landmark} landmark`);
}

ukur("versi div     ", versiDiv);
ukur("versi semantik", versiSemantik);

versi div     : 24 tag, 7 div, 0 landmark
versi semantik: 24 tag, 0 div, 6 landmark

Jumlah tag kedua versi ternyata sama, yaitu dua puluh empat. Perbedaannya bukan pada panjang markup, melainkan pada makna yang dibawanya. Versi div menghabiskan tujuh elemen untuk wadah tanpa makna dan tidak menyediakan landmark, sedangkan versi semantik menghabiskan nol div dan menyediakan enam landmark. Konversi dari versi div ke versi semantik hampir selalu berupa penggantian nama tag, bukan penambahan kode.

Kesalahan umum#

Tiga kesalahan berikut paling sering muncul saat markup semantik mulai diterapkan.

• Memilih elemen karena tampilan bawaannya. Elemen blockquote dipakai untuk membuat teks menjorok, atau h3 dipakai karena ukuran fontnya pas. Tampilan adalah urusan CSS, sehingga elemen tetap dipilih menurut maknanya dan gaya bawaannya diubah dengan CSS.
• Meniru semantik dengan nama class. Penulisan class="footer" pada sebuah div memberi tanda kepada manusia, tetapi tidak kepada program. Elemen footer menggantikan pola ini sekaligus memperpendek markup.
• Melompati tingkat judul demi tampilan. Halaman dengan h1 yang langsung disusul h4 memecah hierarki yang dipakai robot dan pembaca layar untuk memahami urutan topik. Struktur judul dirapikan terlebih dahulu, lalu ukuran fontnya disesuaikan dengan CSS.

Ringkasan#

• Semantik adalah kesesuaian antara elemen dan makna konten, dan menjadi kontrak makna bagi program yang membaca DOM tanpa melihat tampilan.
• Markup bermakna memudahkan mesin pencari memahami struktur halaman dan memisahkan konten inti dari kerangka yang berulang.
• Landmark dari elemen semantik memberi pembaca layar titik lompat, tanpa atribut ARIA tambahan.
• Berdasarkan pengukuran pada kerangka yang sama, versi semantik memakai jumlah tag yang sama dengan versi div, tetapi menyediakan enam landmark dan nol div.

Referensi#

• Semantics — MDN — Definisi semantik dalam pemrograman dan penerapannya pada HTML.
• Learn HTML: Semantic HTML — web.dev — Pelajaran resmi web.dev tentang makna elemen dan alasan memilih elemen yang tepat.
• Accessibility overview — MDN — Ringkasan hambatan akses dan alat bantu, termasuk pembaca layar.