Semantik bold dan italic untuk Pelokalan Bahasa

Diperbarui 31 Juli 2010 oleh Dani Iswara

Silakan 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 untuk italic hanya berefek presentasional. Tercetak tebal untuk bold dan tercetak miring untuk italic. Tampak berbeda secara visual saja. Tanpa bermakna semantik tertentu. Pun tidak dapat dimengerti oleh pembaca layar komputer/screen reader.

Spesifikasi HTML5 mendefinisikan ulang bahwa elemen b dan i masih bisa dipakai dan dapat pula memiliki makna semantik. Yaitu dengan menyertakan nama yang bermakna untuk atribut class.

The b element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.

HTML5: b – offset text typically styled in bold (w3.org, 2010).

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).
…
Some examples of spans that might use the i element include a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

HTML5: i – offset text typically styled in italic (w3.org, 2010).

Contoh 1:
Penulis blog ini <i class="istilahasing" lang="en">stupid</i> sekali.

Sebenarnya, kalimat di atas cukup ditulis seperti di bawah (untuk tipe dokumen text/html).
Contoh 2:
Penulis blog ini <span lang="en">stupid</span> sekali.
atau
Penulis blog ini <em lang="en">stupid</em> sekali.

Pada contoh 1, visualnya, teks tercetak miring. Menjadi ambigu dengan teks ber-tag em yang sama-sama tercetak miring. Pembaca layar komputer akan lebih memahami tag em (emphasis) dan atribut lang (language), dibanding sekadar memakai tag i.

Efek visual teks bermasalah pada pelokalan bahasa Jepang

Pemakaian atribut class dengan nama yang bermakna akan memudahkan pemeliharaan dan pengembangan situs bagi para pengembang dan desainer Web atau pengguna yang membaca kode sumber. Bahwa atribut tersebut ditujukan untuk tiap istilah asing.

Menurut dokumentasi W3C berjudul Using b and i tags:

A general issue. Using b and i tags can be problematic because it keeps authors thinking in presentational terms, rather than helping them move to properly semantic markup. At the very least, it blurs the ideas. To an author in a hurry, it is tempting to just use one of these tags in the text to make it look different, rather than to stop and think about things like portability and future-proofing.

Richard Ishida, 2010.

Di dokumen di atas juga dijelaskan bahwa untuk pelokalan bahasa Jepang lebih mudah jika tanpa tergantung pada bentuk teks tercetak miring atau tebal. Karena bahasa Jepang punya cara visualisasi tersendiri. Lihat contoh tipografi Jepang di tulisan Richard Isida tersebut.

Lalu direkomendasikan:

Authors are encouraged to use the class attribute on the i element to identify why the element is being used, so that if the style of a particular use (e.g. dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author doesn’t have to go through the entire document (or series of related documents) annotating each use. Similarly, authors are encouraged to consider whether other elements might be more applicable than the i element, for instance the em element for marking up stress emphasis, or the dfn element to mark up the defining instance of a term.

Sehingga kini tag b dan i dinyatakan masih mungkin dipakai. Terutama tag i untuk istilah asing. Belum harus punah. Jika masih akan memakainya, disarankan menyertakan atribut class yang bermakna semantik. Jika tidak, gunakan elemen lain yang lebih semantik. Atau, pakai satu jenis bahasa saja.

Untuk kustomisasi atribut lang, silakan baca dokumen W3C berjudul Styling using language attributes. Misalnya saya mungkin akan memakai CSS:

em:lang(en){font-emphasize:dot before}

Baru pada tulisan ini saya gunakan.

Pertanyaan nakal saya:

1. Siapa yang mengenalkan tag b dan i dulu?
2. Siapa pula yang menyalahgunakan pemakaian tag b dan i untuk sekadar presentasional dan mengabaikan pembaca layar komputer?
3. Agar HTML5 terlihat tidak membuang percuma kedua tag itu?