Kategori
Web Accessibility

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' 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:

11 tanggapan untuk “Semantik emphasis, strong, italic, bold”

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.

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

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.

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. (?)

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.

sebelumnya saya mencari Artikel tentang “format text pda HTML”. Tentu Saya sedikit Heran mengapa bold dan strong serta italic dan em memiliki kegunaan yang saya kira sama. Terbawalah saya ke Sini dan Terjawablah Pertanyaan Saya, rupanya terdapat sedikit perbedaan mengenai ini Serta prosedur yang tepat mengenai penggunaan nya. Terima kasih Admin atas Artikelnya, sungguh bermanfaat buat Saya yang sedang belajar Pemrograman Web Saya harap Admin disini masih update memberikan Informasi dan Artikel Dengan Konteks Yang Serupa(HTML).
Perkenalkan Nama Saya Andika Aprianus
Kunjungi Website Kampus Saya di Link ini https://www.atmaluhur.ac.id/

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.