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:
- tampilan teks dengan penanda
i
danem
mirip. Pun terjadi denganq
(kuotasi pendek),cite
(sitat/kutipan) danvar
(penulisan rumus matematika). Ada juga yang memakaiblockquote
tercetak miring. - tampilan teks dengan penanda
b
danstrong
mirip. Apalagi ternyata difungsikan serupa 'headings'h1
–h6
. - penjejalan kata kunci/'stuffing' melalui teks spesial di luar batas kewajaran. Teks yang banyak berteriak akan terdengar aneh, kan?
- belum semua editor teks mendukung fitur semantik.
- 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).
11 tanggapan untuk “Semantik emphasis, strong, italic, bold”
Saya koq jadi ingat jaman dulu ya, ketika dikritisi tentang makna emphasis, strong. Pun sekarang kognitif malah menjadi semakin parah. :(
Terima kasih mas Dani. :)
Harry,
parah kenapa Pakdhe.. :)
Setahu saya, setelan post-editor WordPress org menggunakan elemen
em
untuk italic danstrong
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.
Wah trimakasih infonya mas, jadi tau “em” tu apaan… tadinya ga pernah di waro, hehe
[…] teks atau paragraf. Bisa juga dibantu dengan penekanan atau 'emphasis' melalui pemakaian teks spesial yang bermakna semantik (Dani Iswara […]
[…] 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 […]
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/