Semantik bold dan italic untuk Pelokalan Bahasa

Noted: Tuesday, July 20, 2010 at 12:02:58. Words count: 691.
Last updated: Saturday, July 31, 2010 at 09:30:53.

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?
Dani Iswara, [myfirstnamelastname]@gmail.com.

unEssential.

7 comments to "Semantik bold dan italic untuk Pelokalan Bahasa"

  1. Menyunting kses.php - Unessential Weblog

    […] yang ingin saya pensiunkan dini. Terutama dari kolom isian komentar. Masih berhubungan dengan semantik bold dan italic (Dani Iswara .com). Terkait juga dengan tulisan Mas Ardian tentang pemakaian tanda baca yang baik […]

  2. aldy

    Xixixi, tumben malam ini menjadi sedikit nakal ?

    Kasian juga tuh tag b, i harus pensiun diri.
    Pada beberapa diskusi yang pernah saya baca Bli Dani selalu menekankan perbedaan penggunakaan b, strong karena b lebih ditujukan pada tampilan visual, sementara <strong> lebih ditekankan pembacaannya pada pembaca layar komputer.

    Untuk menebalkan huruf harus menggunakan <strong> semua ?

    Saya kira sama kasusnya dengan i dan <em>.

    Atau dengan cara lain ? walah saya malah bingung sendiri :(

  3. dani

    Pak Aldy,
    untuk teks spesial yang tercetak tebal dan semantik secara alami, sepertinya hanya ada strong dan headings. Teks spesial tercetak miring dan semantik ada beberapa: em, cite, dfn, samp, var.

    Ya, Pak. Serupa dengan i dan em. Entah tag bold yang dulunya sering dipakai sebagai pembeda kata kunci di abstrak, apakah masih punya tempat jika tag i nantinya lebih banyak dipilih untuk kata asing.

  4. Zippy

    Hedew…puyeng juga yah.
    Padahal yang dibahas hanya 2 huruf aja, i dan b :D

  5. Zippy

    Owh..pantes, di Blog ini kalo komen gak bisa menggunakan kode HTML :D
    Tadi nulis i dan b dipakein kode HTML, tapi malah jadi huruf biasa.
    Gak baca kalo ada NOTE: Use semantic markups :D

  6. dani

    Zippy,
    supaya visual dan aural ada makna semantiknya. Namanya juga belajar, masih coba-coba.

  7. pelintas batas

    sumpah pak, aku belum mudeng untuk urusan yang beginian

Leave comment


All XHTML markups will be held for moderation. Keep on topic, please.