Menulis Konten Tanya Jawab yang Semantik

Noted: Monday, June 28, 2010 at 22:49:41. Words count: 414.
Last updated: Sunday, June 26, 2016 at 20:51:19.

Gus Ikhwan menuliskan tanya jawab via surel (surat elektronik) dengan saya di blognya, mxwan.web.id. Cara penyajian konten wawancaranya dengan saya akan menjadi topik kali ini.

Di blog tersebut, Gus Ikhwan memakai format:

1. Pertanyaan di baris ini…

Jawaban di bagian ini sebagai blok teks. Dalam hal ini memakai kuotasi.

Penulisan markah (X)HTML-nya seperti ini:

<p><strong>1. Pertanyaan di baris ini...</strong></p>
<blockquote>Jawaban di bagian ini sebagai blok teks. Dalam hal ini memakai kuotasi.</blockquote>

Menurut saya, pemakaian kuotasi di atas tidaklah salah sepenuhnya. Karena memang dikuotasi dari jawaban saya via surel. Hanya saja, akan lebih bermakna dari sisi tatacara penulisan semantik jika memakai format tanya jawab yang umum saat ini. Seperti di konten semacam 'Frequently Asked Questions' atau FAQ. Jadi, dianjurkan memakai penulisan markah (X)HTML berikut: dl ('definition list'), dt ('definition term'), dan dd ('definition description'). Tampilannya bisa disetel via CSS.

1. Pertanyaan di baris ini…
Jawaban di bagian ini. Bisa disertai elemen ol atau ul.

  1. Poin a. Penjelasan poin a di sini.
  2. Poin b. Penjelasan poin b di sini.
2. Pertanyaan berikutnya di baris ini…
Jawaban pendek satu kalimat di sini.

Kode sumber lengkapnya bisa dilihat di peramban Web favorit masing-masing. Silakan Ctrl+U di Firefox. Intinya hanya memakai format dasar di bawah ini.

<dl>
<dt>Pertanyaan pertama.</dt>
<dd>Jawaban pertama.</dd>
<dt>Pertanyaan berikutnya.</dt>
<dd>Jawaban berikutnya.</dd>
</dl>

Demi memudahkan merujuk tiap item di kolom komentar/diskusi, dianjurkan memakai penomoran manual untuk elemen dt.

Tetapi, jika menyajikan banyak item/penomoran yang rutin diperbarui, menurut saya, format tanya jawab bisa disajikan dengan elemen ol dan li. Daripada menyunting penomoran manual.

Jika menyertakan nama orang lebih dari 2 pihak, nama ditulis manual di elemen dt dan dd.

Alasan tidak memakai blockquote

Mengapa banyak yang memakai model kuotasi untuk situasi tanya jawab seperti di atas? Alasan paling umum biasanya karena tampilannya akan lebih menarik dengan kuotasi. Suatu blok teks akan lebih menjorok ke dalam dengan variasi warna latar, garis tepi, dan hiasan lain. Tapi dari sisi semantik dan aksesibilitas Web, bukan itu fungsi blockquote.

Ada beberapa alasan untuk tidak menggunakan elemen blockquote di konten tanya jawab.

  1. Jawaban belum tentu lebih dari 1 kalimat. Jika hanya 1 kalimat, pemakaian elemen <q> ('quotation') lebih tepat.
  2. Elemen blockquote bukan hiasan. Untuk menghias tampilan/presentasi konten, manfaatkan CSS.
  3. Elemen dl, dt, dan dd lebih semantik.

Untuk topik senada ini, saya menyukai tulisan:

Dengan penulisan konten yang berbasis standar Web dan semantik, relatif mudah menjadikannya lebih mendukung aksesibilitas Web. :)

Dani Iswara, [myfirstnamelastname]@gmail.com.

10 comments to "Menulis Konten Tanya Jawab yang Semantik"

  1. Gus Ikhwan

    sebelumnya terimakasih sudah memberikan link ke blog saya. Alasan saya menggunakan blockquote sudah tertebak oleh bli dani di atas, hehehehe
    Sebenarnya, secara harfiah Blockquote ini berfungsi untuk memberi kesan penegasan terhadap kutipan, jika kita mengutip dari postingan lain atau hak cipta orang lain dalam tulisan kita. Namun Blockquote juga bisa memperindah tampilan postingan kita di blog. Nah saya menggunakan blockquote karena saya ingin membedakan mana pertanyaan dan mana jawaban, karena kalau saya memberikan beda warna pada tanya dan jawab, takut akan warna menjadi silau/kontras.
    bukannya elemen dd ini dimaksudkan untuk berada didalam elemen definition list.
    mungkin keseluruhan dapat kita simpulkan bahwa elemen q dimaksudkan untuk meng-quote sesuatu yang pendek atau sebuah kalimat saja sedangkan blockquote dibuat untuk meng-quote sesuatu yang lebih pasif sifatnya.
    makasih atas koreksinya bli,saya akan berbenah diri

  2. dani

    Gus Ikhwan,
    sebenarnya sih tidak mengoreksi. Tapi memberi sudut pandang lain dari sisi aksesibilitas dan semantik Web. Bukan visual/kenyamanan mata saja. :)

  3. Jamalq

    Wah…kalau menurut saya memang lebih enak memakai Blockquote, karena tidak perlu repot-repot lagi mencarinya kalau di wordpress, dan kelihatan enak untuk dipandang mata

  4. iskandaria

    Saya yang termasuk sempat keliru ketika menggunakan blockquote. Anggapan saya waktu itu, fungsi blockquote sebatas memperindah tampilan paragraf dan memberi variasi agar tidak monoton. Jadi kalau ditegaskan, fungsi utama blockquote dari sisi semantik yaitu untuk kepentingan pengutipan lebih dari satu kalimat, terutama jika berasal dari sumber lain. Nah, bagaimana jika kutipan itu dari blog sendiri? Tepatkah jika masih kita gunakan blockquote? Atau cukup settingan khusus pada elemen p via CSS?

    Untuk fungsi elemen q, saya masih perlu penegasan. Bagaimana jika kita ingin mengutip satu kalimat yang ketika tampil ternyata lebih dari satu baris? Seperti kalimat yang saya kutip di artikel terbaru saya tentang mitos theme latar putih. Di situ saya menggunakan blockquote. Padahal cuma satu kalimat yang saya kutip. Tapi di bawahnya ada satu kalimat berupa sumber tulisan dan pranalanya.

  5. Gus Ikhwan

    Jamalq,

    kalau menurut saya memang lebih enak memakai Blockquote, karena tidak perlu repot-repot lagi mencarinya kalau di wordpress

    maksutnya Anda bagaimana dengan statmen di atas?
    soal blockquote emang ada sisi negatif dan positifnya, dan semuanya sudah dibahas tuntas oleh Bli Dani

  6. dani

    Jamalq, Gus Ikhwan,
    mungkin maksudnya tombol kuotasi lebih mudah digunakan di editor teks visual WordPress. Saya tidak mencobanya di moda non-HTML. :)

    iskandaria,
    pertanyaannya menarik. :)

    Intinya kan kutipan panjang memakai blockquote. Kutipan pendek memakai q. Dari mana pun sumbernya.

    Tentang tag q, belum semua peramban Web memahaminya. Terutama Internet Explorer lawas, jika masih diperhitungkan.

    Mengenai seberapa yang dimaksud panjang atau pendek, saya pribadi menginterpretasikan sebagai satu kalimat itu pendek. Kalimat di sini lebih mengacu ke kalimat pendek. Ada yang menganggap satu baris itu pendek. Belum lagi panjang-pendek ini akan dipengaruhi oleh ukuran set huruf di tiap peramban Web dan ukuran layar komputer. Jadi, hemat saya, jika hanya satu kalimat tapi perlu beberapa baris, lebih baik pakai blockquote sekalian. Ada saran lain? :)

    Elemen kuotasi di dokumen W3C:

    These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don’t require paragraph breaks.

    Baca selengkapnya di sumber tersebut. :)

  7. Menyajikan Percakapan ala HTML5 - Unessential Weblog

    […] HTML4 dan XHTML, lihat kembali Menulis Konten Tanya Jawab yang Semantik (Dani Iswara […]

  8. Mas Jamal

    Lalu tujuan utama dari blockquote itu apa mas?

  9. dani

    Mas Jamal,
    Fungsi ‘blockquote’ sudah dibahas di diskusi di atas. Silakan dibaca kembali. :)

  10. Tag <HTML> yang Jarang Digunakan pada Halaman Web

    […] untuk penggunaan konten berupa tanya jawab. Seperti yang pernah ditulis oleh Dani Iswara dalam Menulis Konten Tanya Jawab yang Semantik (Dani Iswara […]