Menulis Konten Tanya Jawab yang Semantik
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
olatauul.- Poin a. Penjelasan poin a di sini.
- 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. Untuk pemakaian kuotasi dan elemen semantik yang rancu, silakan baca kembali tulisan lama saya berjudul Pemakaian Semantik (X)HTML di Konten Web (Dani Iswara .Net).
Ada beberapa alasan untuk tidak menggunakan elemen blockquote di konten tanya jawab.
- Jawaban belum tentu lebih dari 1 kalimat. Jika hanya 1 kalimat, pemakaian elemen
<q>('quotation') lebih tepat. - Elemen
blockquotebukan hiasan. Untuk menghias tampilan/presentasi konten, manfaatkan CSS. - Elemen
dl,dt, danddlebih semantik.
Untuk topik senada ini, saya menyukai tulisan:
- Using HTML List Properly dari Mike Cherim (green-beast.com), 2007.
- Elemen HTML 'Lists' pada Konten dari Pakde Handoko Harry, 2010.
Dengan penulisan konten yang berbasis standar Web dan semantik, relatif mudah menjadikannya lebih mendukung aksesibilitas Web. :)

Gus Ikhwan on June 29, 2010 at 09:00:21 using Firefox 3.6.3 on Windows XP:
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
qdimaksudkan 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
dani on June 29, 2010 at 10:49:06 using Firefox 3.6.6 on Arch Linux:
Gus Ikhwan,
sebenarnya sih tidak mengoreksi. Tapi memberi sudut pandang lain dari sisi aksesibilitas dan semantik Web. Bukan visual/kenyamanan mata saja. :)
Jamalq on June 29, 2010 at 13:44:59 using Google Chrome 4.0.249.78 on Windows XP:
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
iskandaria on June 29, 2010 at 14:49:20 using Firefox 3.6.3 on Ubuntu 10.04:
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 elemenpvia 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 menggunakanblockquote. Padahal cuma satu kalimat yang saya kutip. Tapi di bawahnya ada satu kalimat berupa sumber tulisan dan pranalanya.Gus Ikhwan on June 29, 2010 at 15:16:05 using Firefox 3.5 on Windows XP:
Jamalq,
maksutnya Anda bagaimana dengan statmen di atas?
soal blockquote emang ada sisi negatif dan positifnya, dan semuanya sudah dibahas tuntas oleh Bli Dani
dani on June 29, 2010 at 15:43:17 using Firefox 3.6.6 on Arch Linux:
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 memakaiq. 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
blockquotesekalian. Ada saran lain? :)Elemen kuotasi di dokumen W3C:
Baca selengkapnya di sumber tersebut. :)
Menyajikan Percakapan ala HTML5 - Unessential Weblog on July 25, 2010 at 09:44:20 via WordPress abc:
[…] HTML4 dan XHTML, lihat kembali Menulis Konten Tanya Jawab yang Semantik (Dani Iswara […]
Mas Jamal on March 22, 2012 at 23:11:27 using Google Chrome 17.0.963.79 on Windows 7:
Lalu tujuan utama dari blockquote itu apa mas?
dani on March 24, 2012 at 16:46:14 using Firefox 11.0 on GNU/Linux:
Mas Jamal,
Fungsi ‘blockquote’ sudah dibahas di diskusi di atas. Silakan dibaca kembali. :)