HTML semantic adalah tag HTML yang memiliki sebuah arti atau makna. Contoh tag semantic yang umum Anda gunakan namun kadang tidak anda sadari antara lain: tag heading mulai dari <h1> sampai <h6>, paragraph <p>, <form> dan tag <button>.
Tag-tag seperti <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <address>, <time>, <figure>, <figcaption>, <table>, <thead>, <tfooter>, <th>, <td> juga termasuk dalam tag semantic. Tag <div>, <span> dan <font> tidak termasuk dalam tag HTML semantic.
Demo HTML Semantic
Tulisan ini akan mendemonstrasikan penggunaan tag semantic dan dampaknya jika digunakan dengan bantuan Voice Over (sreen reader MacOS) pada browser Chrome, Safari dan Firefox. Browser Chrome yang saya gunakan adalah versi 72.0.3626.121, Safari versi 12.0.3 dan Firefox versi 65.0.1. Untuk demo (live) silahkan buka di sini.
Tag Header
Chrome
Tag header dibaca sebagai “banner”
Safari
Tag header dibaca sebagai “banner”
Firefox
Tag header dibaca sebagai “banner”
Tag Navigation
Chrome
Tag nav dibaca sebagai “navigation”
Safari
Tag nav dibaca sebagai “navigation”
Firefox
Tag nav dibaca sebagai “navigation”
Tag Aside
Chrome
Tag aside dibaca sebagai “complementary”
Safari
Tag aside dibaca sebagai “complementary”
Firefox
Tag aside dibaca sebagai “complementary”
Tag Details dan Summary
Chrome
Tag summary dibaca sebagai “Copyright 1999-2018., collapsed, disclosure triangle” dalam posisi tertutup dan akan dibaca “Copyright 1999-2018., expanded, disclosure triangle” dalam posisi terbuka. Sementara untuk tag details diabaikan.
Safari
Tag summary dibaca sebagai “Copyright 1999-2018., collapsed, summary” dalam posisi tertutup dan akan dibaca “Copyright 1999 2018., expanded, summary” dalam posisi terbuka. Sementara tag details diabaikan.
Firefox
Tag summary dibaca sebagai “Copyright 1999-2018., group” dan tidak bisa dibuka untuk melihat isi detilnya.
Tag Figure dan Figcaption
Chrome
Tag figure yang membungkus figcaption tidak dibaca oleh Chrome.
Safari
Tag figure yang membungkus figcaption dibaca sebagai “Fig.1 - Trulli, Puglia, Italy, figure”
Firefox
Tag figure yang membungkus figcaption tidak dibaca oleh Firefox.
Tag footer
Chrome
Tag footer dibaca sebagai “footer”
Safari
Tag footer tidak dibaca oleh Safari.
Firefox
Tag footer dibaca sebagai “content”
Tag Time
Chrome
Tag time dibaca sebagai “group, editable”
Safari
Tag time dibaca sebagai “January 3rd, 3 January 2017”
Firefox
Tag time dibaca sebagai “January 3rd”
Tag Address
Chrome
Tag address dibaca sebagai “content info”
Safari
Tag address dibaca sebagai “content information”
Firefox
Tag address dibaca sebagai “content”
Hasil Pengamatan
Tag
address,time,details-summary,figure-figcaptionmendapat perlakuan yang berbeda oleh Chrome, Safari dan Firefox. Saya masih belum bisa memastikan apakah ini penyebab dari browser kah atau dari voice over itu sendiri. Jika saya mendapatkan info terkait hal ini maka saya akan menuliskannya di catatan berikutnya.Tidak semua tag semantic HTML akan dibaca oleh browser seperti tag
article,sectionpada Chrome, Safari dan Firefox. Namun, bukan berarti kita harus mengabaikan menggunakan tag tersebut. Tag-tag tersebut ada dengan tujuan ketika kita koding HTML kita tahu bahwa tag ini ditujukan untuk article maupun section.