Kategori
Web Accessibility

Menulis Konten Tanya Jawab yang Semantik

Diperbarui 26 Juni 2016 oleh Dani Iswara

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. :)

10 tanggapan untuk “Menulis Konten Tanya Jawab yang Semantik”

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

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

Oleh Penulis Artikel

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

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.

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

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. :)

Oleh Penulis Artikel

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.