Semantik emphasis, strong, italic, bold

Diperbarui 1 Agustus 2010 oleh Dani Iswara

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' h1–h6.
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:

• When semantic markup goes bad tulisan Matthew Paul Thomas di mpt.net.nz (2004).
• Semantic Use of Bold and Semantic tulisan Mike Cherim di blognya, Green-Beast.com (2007).
• The i, b, em, strong elements tulisan Oli Studholme di HTML5Doctor.com (2010).