Semantik emphasis, strong, italic, bold

Noted: Wednesday, April 21, 2010 at 13:53:42. Words count: 664.
Last updated: Sunday, August 1, 2010 at 21:11:54.

Membedakan kode/markah, fungsi dan sekadar tampilan visual, direkomendasikan dari sisi standar Web. Catatan tidak penting ini akan meninjau pemakaian elemen yang membuat teks terlihat tercetak tebal dan miring. Dalam HTML, istilah elemen mengandung pengertian yang lebih luas dibanding tag.

Menurut Konsorsium WWW (W3C), elemen-elemen 'italic', 'bold', 'emphasis', dan 'strong' memiliki fungsi berikut.

Teks dengan tag <i> ('italic')

Akan terlihat tercetak miring. Dari sisi tata bahasa, lingustik, elemen teks miring dipakai untuk menandai istilah dan bahasa asing. Dari sisi tipografi, dipakai sekadar sebagai teks pembeda–teks yang visualisasinya tampak berbeda dari lainnya.

Teks dengan tag <b> ('bold')

Akan terlihat tercetak lebih tebal. Dari sisi tata bahasa, dulu sering digunakan sebagai penanda kata kunci. Dari sisi tipografi, dipakai sebagai sekadar penanda teks yang terlihat lebih tebal dibanding teks lain.

Teks dengan tag <em> ('emphasis')

Bermakna semantik. Mesin yang memahami elemen 'stress emphasis' akan menyuarakan teks dengan penanda ini melalui peningkatan penekanan suara ('pitch') teks yang dibaca.

Teks tercetak miring dengan penekanan suara umumnya bisa dipakai pada bahasa percakapan, pernyataan ekspresi, dan kombinasi dengan gaya bahasa atau slang tertentu. Tampilannya serupa dengan elemen 'italic', tapi memiliki fungsi yang lebih.

Teks dengan tag <strong> ('strong emphasis')

Juga bermakna semantik. Teks ini tercetak lebih tebal. Memiliki penekanan yang lebih dibanding em. Bisa digunakan pula untuk menandakan emosi atau kepentingan tertentu. Tampilannya bisa dikustomisasi via CSS.

Fungsi kebergunaan/'usability'

Teks yang visualnya tampak berbeda akan membantu pengguna mempermudah memakai dan memahami konten. Teks spesial dapat dimanfaatkan untuk membaca cepat/'fast reading', menemukan bagian-bagian penting–seperti teknik 'screening' dan 'skimming', merangsang pengguna untuk 'action' tertentu (misal mengeklik tombol pendaftaran), dan mengurangi kesan monoton. Asal tidak berlebihan.

Fungsi aksesibilitas Web

Pemakaian elemen-elemen di atas sesuai fungsinya akan membantu aksesibilitas Web. Mengingat pengguna Web bukan hanya mereka yang lengkap kondisi dan fungsi panca indera, alat gerak, dan kemampuan kognitif/pengetahuannya. Akses Web dengan suara akan sangat terbantu oleh penggunaan tag yang semantik. Apalagi dukungan mesin dan alat bantu teknologi makin membaik.

Mesin apa saja? Misalnya pembaca layar komputer atau 'screen reader', peramban tipe aural atau 'voice browser', dan alat bantu wicara lainnya yang sejenis. Salah satu seri iPod, beberapa peramban Web modern di Windows dan Mac, serta pembaca teks format portabel (PDF) sepertinya sudah memiliki fitur 'text-to-speech' dengan fasilitas 'emphasis' dan 'strong'. Siapa tahu mendengarkan halaman Web akan menjadi lebih populer dibanding mendengarkan radio.

Terkait semantik, teorinya, algoritma mesin telusur/pencari Internet dan mesin pengolah unsur semantik Web pun seharusnya memberi makna yang berbeda pada elemen semantik.

'Italic' dan 'bold' juga bisa bermakna semantik

Jika dulu dianggap hanya dipakai sebagai pembeda visual, kedua elemen tersebut sebenarnya bisa diperbarui agar bermakna semantik. Caranya, dengan menambahkan elemen CSS class sesuai kebutuhan. Misalnya

<b class="marah merah teriak angry red">Kamu pembohong!</b>

Nantinya 'bold' itu tidak selalu harus tebal. Elemen 'class' bisa dikustomisasi di sisi CSS. Misalnya dengan ukuran teks, warna, dan jenis huruf yang berbeda.

Masalah yang ada

Makna semantik ini mungkin tidak akan tampak nyata di sisi visual. Atau malah menjadi kurang bermanfaat bagi banyak pengguna. Beberapa alasannya:

  1. tampilan teks dengan penanda i dan em mirip. Pun terjadi dengan q (kuotasi pendek), cite (sitat/kutipan) dan var (penulisan rumus matematika). Ada juga yang memakai blockquote tercetak miring.
  2. tampilan teks dengan penanda b dan strong mirip. Apalagi ternyata difungsikan serupa 'headings' h1h6.
  3. penjejalan kata kunci/'stuffing' melalui teks spesial di luar batas kewajaran. Teks yang banyak berteriak akan terdengar aneh, kan?
  4. belum semua editor teks mendukung fitur semantik.
  5. pembacaan tiap elemen semantik di peramban Web mungkin berbeda. Walau ada standardisasi peramban Web.

Ringkasan

Jika tidak yakin dengan makna yang ingin disampaikan, silakan tetap memakai elemen b dan i seperti biasa. Bukan berarti harus mengganti frontal tiap tag i dengan 'em' dan b dengan 'strong'. Sesuaikan dengan konteks yang ada. Halaman Web seharusnya bisa menjadi lebih manusiawi. Karena pengelola dan penggunanya adalah manusia itu sendiri. :)

Bacaan:

Dani Iswara, [myfirstnamelastname]@gmail.com.

10 comments to "Semantik emphasis, strong, italic, bold"

  1. Harry

    Saya koq jadi ingat jaman dulu ya, ketika dikritisi tentang makna emphasis, strong. Pun sekarang kognitif malah menjadi semakin parah. :(
    Terima kasih mas Dani. :)

  2. dani

    Harry,
    parah kenapa Pakdhe.. :)

  3. iskandaria

    Setahu saya, setelan post-editor WordPress org menggunakan elemen em untuk italic dan strong untuk bolding. Jadi tidak perlu repot-repot untuk mengubah i atau b :)

    Tapi kalau di blogspot kayaknya masih menggunakan default i dan b.

  4. Aldy

    Yang Mas Is maksudkan mungkin pada saat edit atau membuat artikel dengan mode tampilan visual.
    Kalau dalam mode HTML, jika penulisan tag html-nya manual bisa saja user yang salah.
    Terkecuali jika diblog dulu, baru klik tombol bold atau i. CMIIW

  5. dani

    Mas Iskandaria, Pak Aldy,
    tapi bukan berarti semua bold dan italic lalu otomatis menjadi strong dan em–seperti yang terjadi saat ini. Termasuk achecker.ca pun menerapkannya dan menganggap em dan strong yang paling sesuai. Apakah elemen bold dan italic memang sudah dianggap deprecated/usang dan harus punah?

    Toh HTML5 masih akan menganggap itu ada.

  6. aldy

    Elemen bold dan italic tidak harus punah bli, seperti diketahui penggunaan dan penekanan fungsinya berbeda. Cuma agak mengherankan, dari satu sisi seperti achecker.ca tidak membenarkan penggunaan bold dan italic, tetapi HTML5 masih. (?)

  7. dani

    Pak Aldy,
    tapi di sisi standar Web ke depannya, semua elemen yang hanya bersifat presentasional, direkomendasikan untuk sepenuhnya ditangani CSS. Hanya saja, standar Web saat ini dikondisikan sebisanya backward-compatible. Sambil pelan-pelan benar-benar memisahkan elemen yang sekadar presentasional dengan konten yang murni (X)HTML. Tujuan akhirnya memang masih aksesibilitas atau kesetaraan hak akses konten Web.

  8. Donny

    Wah trimakasih infonya mas, jadi tau “em” tu apaan… tadinya ga pernah di waro, hehe

  9. Aksesibilitas Web Paragraf Pertama - Unessential Weblog

    […] teks atau paragraf. Bisa juga dibantu dengan penekanan atau 'emphasis' melalui pemakaian teks spesial yang bermakna semantik (Dani Iswara […]

  10. Semantik bold dan italic untuk Pelokalan Bahasa - Unessential Weblog

    […] baca dulu tulisan awal Semantik emphasis, strong, italic, bold di Dani Iswara .com. Di tulisan tidak penting tersebut, dinyatakan bahwa tag b untuk bold dan i […]