Pemakaian Semantik XHTML di Konten Web

January 9, 2010 – 13:37 by Dani Iswara. Words count: 696.
Last updated: Saturday, January 9, 2010 at 13:37.

Menurut Konsorsium WWW (‘World Wide Web Consortium’; W3C), beberapa elemen semantik dalam X/HTML memang belum didukung sepenuhnya oleh alat bantu teknologi terkait. Elemen tersebut antara lain: code, del, dfn, ins, kbd, s, sub, sup, tt, dan q. Pun belum semua ’screen reader’ mampu memahami makna em, strong, b, atau i.

Salah satu mesin ’screen reader’, JAWS, mampu mengenali elemen blockquote dan cite. Mesin lainnya, WindowEyes, sudah bisa membaca elemen q.

Peramban Web modern berbasis grafis, diantaranya, yang bermesin Gecko (misalnya Mozilla Firefox, Flock, SeaMonkey), Presto (Opera), dan WebKit (Safari, Google Chrome, Midori) mampu memahami elemen q. Tapi tidak untuk Internet Explorer (IE) 6 yang bermesin Trident versi lawas. Entah dengan IE terbaru.

Contoh: …Teks ini ditandai dengan <q>…

Struktur dokumen X/HTML yang berunsur semantik biasanya terlihat berupa teks spesial. Seperti pada judul, subjudul, anak subjudul, cetak tebal, miring, urutan, dan kuotasi. Tampilannya, baik ukuran, bentuk, dan warna huruf, nampak berbeda dari keseluruhan konten umumnya. Maksudnya tentu untuk memudahkan pengunjung, pembaca, dan pengguna, untuk memahami konten.

Interpretasi alat bantu teknologi

Peramban Web berbasis grafis mampu menampilkan teks spesial sesuai standardisasi masing-masing. Tapi tetap mengacu ke rekomendasi Konsorsium WWW. Tidak terbayangkan seandainya teks spesial tampil sangat berbeda di tiap peramban, kan? Misalnya pranala, ditandai dengan teks bergaris bawah. Itu standar di sisi peramban Web. Hanya kemudian para pengembang dan pengguna Web melakukan kustomisasi terhadap pranala. Sehingga pranala mungkin menjadi sulit dikenali. Silakan baca kembali Teks Pranala yang Aksesibel dan Usable (Dani Iswara .Net). :)

Yang lebih penting sebenarnya pada fungsi peramban Web berbasis suara. Teks spesial akan dibaca dengan penekanan suara tertentu oleh ‘auditory browser’ atau ‘voice browser’. Peramban Opera dan Safari terbaru versi Windows dinyatakan sudah mendukung fitur suara ini.

Teks spesial berkode <strong> akan terdengar memiliki penekanan yang lebih kuat dibanding <em>. Baca juga Mendengar Halaman Web (Dani Iswara .Net).

Entah pula jika algoritma mesin telusur Internet (‘Internet search engine’) memberi penekanan nilai berbeda pada unsur semantik X/HTML. Apakah teks spesial seperti cetak tebal, miring, bergaris bawah, diberi nilai atau bobot tertentu? Lalu kuotasi tidak akan dianggap sebagai duplikasi? Bagaimana dengan pemakaian teks spesial yang berlebihan demi ‘mengelabui’ algoritma?

Pemakaian unsur semantik yang sesuai akan diterjemahkan dengan tepat oleh alat bantu teknologi. Sehingga akan memudahkan manusia dan pengguna lainnya (siapa tahu hewan juga membutuhkannya) dalam memahami konten Web. :)

Beberapa pemakaian teks spesial yang kurang tepat?

Kuotasi

Di halaman Web, kita sering melihat pemakaian suatu blok teks atau paragraf yang menjorok ke tengah. Di blog, kadang dipakai pula oleh administrator Web sebagai pembeda tanggapan/komentar miliknya.

Blok kuotasi dengan format blockquote dianjurkan untuk menyajikan kutipan suatu paragraf atau beberapa baris teks. Jika berupa kutipan satu baris, gunakanlah elemen q.

Tulisan ini sekaligus menjawab pertanyaan Mbak Nunik (Isnuansa.com) tentang pemakaian elemen <blockquote>. Lihat diskusinya pada topik Same or New Tab.

Sebaiknya hindari pemakaian unsur semantik kuotasi sebagai jawaban komentar di sisi admin. Kecuali memang mengandung kuotasi komentar sebelumnya. :)

Cetak tebal dan cetak miring

Teks spesial ini nampaknya yang paling sering disalahgunakan atau digunakan berlebihan terkait pengoptimalan mesin telusur Internet.

Konon, entah saya baca di sumber yang mana, di salah satu proposal untuk XHTML 2.0, elemen strong yang tercetak tebal disusulkan untuk memaknai teks yang benar-benar butuh penekanan. Membantu membaca cepat atau ’scanning’. Membantu mempermudah memahami konten. Sedangkan yang tercetak miring lebih ditujukan untuk teks atau bahasa terkait konteks lokal, istilah lokal atau bahasa daerah, yang bukan bahasa utama.

Jadi bukan sekadar berisi kata kunci. :)

‘CSS inline’ untuk format teks spesial

Berikut ini kutipan komentar saya di blog IDTutorial, diskusi tentang Penggunaan CSS inline:

Masalah lain terkait CSS inline: unsur semantik. Idealnya, elemen class (pada pemakaian CSS eksternal) dapat bermakna semantik. Karena, konon, screen reader dan voice browser tercanggih akan disetel untuk mampu memahami elemen tersebut via fitur, antara lain aria.

Misalnya, suatu teks input form–terkait kotak email–yang wajib diisi. Apakah teks berwarna merah dengan CSS inline, bertuliskan “required/wajib diisi” dapat dipahami oleh pengguna tunanetra? Katanya, teks ‘warning’ sejenis itu dapat diberi kode, misalnya <span class="red warning required">

Simpulannya, unsur semantik teks spesial sering dikaburkan dengan sekadar presentasional. :)

Bacaan terkait rekomendasi aksesibilitas Web menurut konsorsium WWW, sesuai kondisi di atas:

Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.

Posted in category: Web Accessibility, Web Usability
Tags: , ,
20 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Pemakaian Semantik XHTML di Konten Web by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

20 Responses to post titled: Pemakaian Semantik XHTML di Konten Web

  1. Comment by Isnuansa on January 9, 2010 at 16:07:19
    using Opera Mini 9.80

    1. Saya baca ini via opera mini di hp saya yang dudul, memang tidak bisa dibaca pemakaian em. Tapi kok strong bisa ya? Apa memang tidak pake em sepanjang tulisan?

    2. Pemakaian semantik untuk mesin telusur yang saya pelajari, sekarang ini sudah berkembang pada: jangan berlebihan. Di blog pribadinya Matt Cutts pernah dibahas. Dan yang dijadikan contoh adalah halaman blog dari orang Indonesia. Doh malunya. :P
    Penerapan ilmu SEO yang kebablasan. Meski begitu, dari tulisan tersebut, saya masih yakin jika pemakaian semantik memang masih ada pengaruhnya.

    3. Pemakaian blogquotes yang akan dibaca sebagai duplicate content, saya pikir tidak. Hanya saja, ya, memang tidak sesuai dengan fungsinya sebagai kutipan.

    4. Pertanyaan saya belum terjawab, dok, sarannya?

    Memakai strong atau em, jawaban komentar saya sama sekali bukan penekanan. Memakai threaded comment, saya belum siap dengan lingkungan blogger kita yang suka OOT dan buang sampah sembarangan, sedang blog saya lumayan rame dan saya belum bisa memantau tiap saat. ;-)

  2. Comment by Isnuansa on January 9, 2010 at 16:11:37
    using Opera Mini 9.80

    Ralat, mentang mentang seringnya ngetik kata BLOG, jadi blogquotes, hahaha… Blockquotes maksudnya. Untung saya baca ulang.

  3. Comment by Dani Iswara on January 9, 2010 at 16:28:35
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    Isnuansa,
    #1. Ada beberapa kalimat yang memakai em, Mbak Nunik.

    #2. Kayaknya saya pernah baca yang itu. Yang indonesian hotel, office bla bla bla… itu kan ya. Itu sepertinya jelas ngga enak dibaca dan didengar oleh manusia.

    #3. Maksud saya, apakah dengan memakai elemen blockquote, algoritma makin mengerti bahwa itu hanya kutipan, bukan duplikasi? :)

    #4. Menurut saya, fitur standar ‘reply comment’ dari WordPress bisa dicoba. Walau saya awalnya kurang setuju (the lack of wordpress threaded comment). Jadi, kembali ke pilihan Mbak Ninuk saja. Ngga ada yang maksa kan.. :)

  4. Comment by Cahya on January 9, 2010 at 18:17:57
    using Mozilla Firefox 3.5.7 on Windows Vista

    Kalau belajar berhitung cukup tahu tambah kurang, kali dan bagi.

    Kalau belajar web cukuplah buat tulisan mirip, garis bawah, cetak tebal, dan kutipan cukuplah :D

  5. Comment by Dani Iswara on January 9, 2010 at 18:42:45
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    Cahya,
    kan seringnya ada udang di balik kode. :P

  6. Comment by Cahya on January 9, 2010 at 19:03:46
    using Mozilla Firefox 3.5.7 on Windows Vista

    Besok kayanya ada siaran Trik Membuat Blog di Metro e-Life. Kira-kira apa masuk juga tips coding :D

  7. Comment by Dani Iswara on January 9, 2010 at 19:11:47
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    Cahya,
    masih perlu nge-trik ya..bukannya sudah gampang sekarang.

  8. Comment by choen on January 10, 2010 at 09:06:27
    using Mozilla Firefox 3.5.7 on Windows XP

    iya gw sebelumnya menganggap elemen blockquote, strong dan lainnya sekedar variasi aja, ternyata ada fungsi lebih didalamnya. Satu lagi pemahaman baru gw dapet disini fungsi dari elemen class itu.

    sip makasih Dani.

  9. Comment by Dani Iswara on January 10, 2010 at 09:58:03
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    choen,
    soalnya susah kalo nanggepin dari sisi SEO. Mending kemanusiaannya aja. Kadang Google diperlakukan seperti Tuhan di Web. [no offense everybody..] :)

  10. Comment by afwan auliyar on January 11, 2010 at 11:01:11
    using Mozilla Firefox 3.5.7 on Windows XP

    konsep semantik dan presentasi menjadi dasar agar website lebih memiliki performansi tinggi

  11. Comment by afwan auliyar on January 11, 2010 at 11:03:08
    using Mozilla Firefox 3.5.7 on Windows XP

    mmm…. manarik sekali jika mengerti konsep ttg semantik dan presentasi yg baik untuk web

  12. Comment by Dani Iswara on January 11, 2010 at 15:06:22
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    afwan auliyar,
    ini ada jawaban seriusnya, biar ngga salah paham. :)

    Terkait performa, jika itu artinya hubungan antara semantik dan kecepatan ‘loading’ (ukuran berkas dokumen Web): semantik justru berpeluang menambah ukuran berkas. Sintaks kodenya kadang menjadi lebih panjang. Misal strong vs b, section vs div, <class="red warning required"> vs <class="red">. Jumlah bit kode yang diunduh menjadi bertambah. :)

  13. Comment by azzaam on January 12, 2010 at 20:55:09
    using Mozilla Firefox 3.0.1 on Windows XP

    Yang buat saya heran adalah, kenapa beberapa browser ada yang tidak bisa menampilkan dengan sempurna web, padahl khan formatnya sama dimata semua browser?

  14. Comment by Dani Iswara on January 13, 2010 at 01:51:29
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    azzaam,
    sependek yang saya tahu, jika tidak ada standardisasi W3C, mungkin Web akan menjadi monopoli format proprietari. :) Semua peramban Web menonjolkan formatnya masing-masing.

    Sekarang, kemampuan standardisasi X/HTML, CSS, JavaScript bisa dilihat dari hasil acidtest masing-masing. Tentu tidak akan sama persis per pikselnya. Karena ada kustomisasi tiap pengembang peramban Web. :)

  15. Comment by bolang on January 13, 2010 at 20:35:05
    using Mozilla Firefox 3.5.3 on Linux Mint 8

    hehe, bener bgt, setiap browser selalu menampilkan tampilan yang agak berbeda saat membuka website yang sama, ini mungkin akibat dari perbedaan kemampuan engine dari setiap browser, dan browser yg engine-nya payah seperti opera dan IE biasanya jadi yang terpencil (klo menurut saya), coz tampilan blog saya saat dibuka pake browser tsb ancur bgt, hehe :D

  16. Comment by ademalsasa on January 13, 2010 at 22:28:19
    using Mozilla Firefox 3.5.3 on Windows XP

    Wooow semantic web! Perjalanan menuju web 3.0 kian dekat ya Pak Dani? Kalau untuk saya rasanya masih jauuuh banget…pokoknya salut deh postingnya.

    Terima kasih kunjungannya kemarin ;)

  17. Comment by Dani Iswara on January 14, 2010 at 02:21:00
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    bolang,
    Opera yang bermesin Presto justru salah satu peramban Web paling standar Web. Cek acidtest-nya. :) Bersaing dengan Safari (WebKit). Firefox dan lainnya masih ketinggalan. Kalau IE, nanti-nanti dululah. :)

  18. Comment by Dani Iswara on January 14, 2010 at 02:26:09
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    ademalsasa,
    yang ini maksudnya lebih terkait ke aksesibilitas Web. Untuk fungsi semantic Web lain, seperti integrasi antar aplikasi, mesin telusur, dan mikroblog, topiknya agak berbeda. :)

  19. Comment by waroeng ubuntu on January 14, 2010 at 20:33:01
    using Mozilla Firefox 3.5.7 on Ubuntu Linux 9.10

    tambah ilmu berkunjung kemari.. saya baca presto (opera) kupikir ini varian dari browser opera ternyata.. presto adalah layout engine yang digunakan browser opera :)

  20. Comment by Dani Iswara on January 15, 2010 at 00:08:30
    using Mozilla Firefox 3.5.7 on Gentoo Linux

    waroeng ubuntu,
    ada peramban Web yang make mesin Presto selain Opera ngga ya..

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Arch dan Gentoo Linux menurut Pemula
‹‹ Newer entries: Mencoba Nibbler Silktide Score – Tes Kompilasi Web