Secara sederhana, pengertian semantik markup pada dokumen (X)HTML adalah makna yang terdapat pada sebuah tag (kode). Seperti yang kita tahu, setiap tag HTML memiliki makna dan fungsinya masing-masing. Contohnya adalah <p> untuk membuat blok paragraf, <ol>, <ul>, dan <dl> untuk membuat listing dan sebagainya. Untuk lebih lengkap tentang makna dan fungsi kode tersebut dapat melihat referensinya di w3schools.
Perhatikan contoh berikut:
<p>1. Contoh pertama</p> <p>2. Contoh kedua</p> <p>3. Contoh ketiga</p>
<ol> <li>Contoh pertama</li> <li>Contoh kedua</li> <li>Contoh ketiga</li> </ol>
Maksud penulisan kode di atas sama, yaitu membuat listing. Akan tetapi struktur kodenya berbeda. Pada contoh pertama menggunakan blok paragraf sedangkan pada contoh kedua menggunakan ordered list. Contoh kedua lebih baik karena semantik, ordered list ditulis menggunakan markup ordered list <ol> dan bukan menggunakan tag lainnya — seperti <p>, <div>, atau <span>
Selain struktur dokumen menjadi lebih baik, penggunaan markup yang semantik tentu memiliki manfaat lain. Baik orang yang normal maupun penyandang disabilitas yang menggunakan pembaca layar pasti lebih mudah membedakan antara listing & paragraf, heading & konten, kuotasi & preformatted text, kode dan sebagainya.
Yeah, jika anda belum menggunakan markup yang semantik, mungkin sekarang adalah saat yang tepat untuk memulainya. Validasi dokumen bisa jadi tidak berarti tanpa disertai dengan penulisan kode yang semantik. ☺
Daftar Bacaan
- Semantic HTML, Wikipedia
- Semantics and Sensibility, CSSWizardry.com
- Semantik XHTML, Aksesibilitas, SEO, DaniIswara.net
- Why You Should Use SEO Semantic Coding and Semantic Markup, BarryWise.com