Quotation

Tulisan yang kaya biasanya mengutip ucapan orang lain, baik berupa kutipan panjang yang berdiri sendiri maupun kutipan pendek yang menyatu dalam paragraf. HTML menyediakan tiga alat dengan tugas yang berbeda: elemen blockquote untuk kutipan blok, elemen q untuk kutipan inline, dan elemen cite untuk judul karya. Ketiganya membawa makna kutipan kepada browser dan pembaca layar, bukan sekadar gaya tampilan. Pada Chapter ini kita membedah perbedaan ketiganya lalu menyusun satu halaman tulisan yang memakai semuanya dengan tepat.

blockquote: Kutipan Blok #

Elemen blockquote membungkus kutipan panjang yang ditarik dari sumber lain. Karena termasuk elemen blok, kutipan ini berdiri sendiri di antara paragraf; browser menampilkan teksnya menjorok ke dalam secara bawaan. Kontennya boleh berupa satu atau beberapa paragraf.

Atribut cite pada blockquote menyimpan URL sumber kutipan. Atribut ini bersifat metadata: browser tidak menampilkannya kepada pengunjung, tetapi nilainya tetap terbaca oleh alat bantu seperti mesin pencari. Kalimat sumber yang memang ingin dilihat pengunjung kita tulis terpisah, misalnya melalui elemen cite.

<blockquote cite="www.example.com/artikel/kopi-nusantara">
  <p>Kopi terbaik berasal dari petani yang memahami tanahnya.</p>
</blockquote>

q: Kutipan Inline #

Elemen q menandai kutipan pendek yang menyatu di dalam paragraf. Browser modern otomatis menambahkan tanda kutip di sekeliling isinya, sehingga kita tidak menulis tanda kutip manual di dalam elemen ini. Elemen q termasuk phrasing content, sehingga sah berada di dalam p.

Elemen q juga menerima atribut cite dengan kegunaan yang sama seperti pada blockquote. Karena tanda kutip datang dari browser, kita cukup menuliskan isi kutipannya saja. Perbandingan ketiga elemen dapat kita rangkum sebagai berikut:

cite dan Atribusi Kutipan #

Elemen cite menandai judul karya: buku, artikel, lagu, atau film. Isinya judul, bukan nama orang. Untuk atribusi nama pembicara, kebiasaan yang baik adalah menaruhnya di dalam elemen footer di bagian bawah blockquote; elemen footer dan address sendiri akan kita bedah tuntas pada section Semantic HTML, sementara di sini keduanya cukup dipakai sebagai wadah atribusi.

<blockquote>
  <p>Kopi terbaik berasal dari petani yang memahami tanahnya.</p>
  <footer>— Budi, <cite>Panduan Kopi Nusantara</cite></footer>
</blockquote>

Contoh Tulisan Lengkap #

File berikut memakai ketiga elemen pada satu tulisan. Simpan sebagai contoh-quotation.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kopi Nusantara: Catatan Siti</title>
</head>
<body>
  <h1>Kopi Nusantara: Catatan Siti</h1>

  <p>Siti membuka tulisannya dengan kutipan panjang dari pembina koperasi:</p>

  <blockquote cite="www.example.com/artikel/kopi-nusantara">
    <p>Kopi terbaik berasal dari petani yang memahami tanahnya, bukan dari mesin yang paling baru.</p>
    <footer>— Budi, <cite>Panduan Kopi Nusantara</cite></footer>
  </blockquote>

  <p>Bagian penutup menyebut koperasi tersebut <q>menyeduh kopi pada suhu yang tepat</q> setiap pagi.</p>

  <p>Rujukan utama tulisan ini adalah buku <cite>Panduan Kopi Nusantara</cite>.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kutipan panjang menjorok ke dalam dengan atribusi "— Budi" di bawahnya
  - Judul "Panduan Kopi Nusantara" tampil miring dua kali
  - Kalimat penutup memuat "menyeduh kopi pada suhu yang tepat" di dalam tanda kutip

Mari kita telaah peran setiap bagian:

1. Baris 13-16 (blockquote): kutipan panjang berdiri sendiri; atribut cite menyimpan URL sumber tanpa tampil di layar.
2. Baris 15 (footer dan cite): atribusi nama pembicara berada pada footer, sedangkan judul buku berada pada cite.
3. Baris 18 (q): kutipan pendek menyatu dalam paragraf; tanda kutipnya ditambahkan otomatis oleh browser.
4. Baris 20 (cite): judul buku miring karena berperan sebagai rujukan karya.

Kutipan kini dapat kita susun lengkap dengan sumbernya. Prosa yang baik masih menyimpan banyak elemen kecil lain, mulai dari kode program hingga tanggal, dan semuanya kita jelajahi pada Chapter Inline Text Semantics.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen blockquote
• MDN Web Docs — Elemen q
• MDN Web Docs — Elemen cite
• WHATWG — HTML Living Standard: Grouping content

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kopi Nusantara: Catatan Siti</title>
</head>
<body>
  <h1>Kopi Nusantara: Catatan Siti</h1>

  <p>Siti membuka tulisannya dengan kutipan panjang dari pembina koperasi:</p>

  <blockquote cite="www.example.com/artikel/kopi-nusantara">
    <p>Kopi terbaik berasal dari petani yang memahami tanahnya, bukan dari mesin yang paling baru.</p>
    <footer>— Budi, <cite>Panduan Kopi Nusantara</cite></footer>
  </blockquote>

  <p>Bagian penutup menyebut koperasi tersebut <q>menyeduh kopi pada suhu yang tepat</q> setiap pagi.</p>

  <p>Rujukan utama tulisan ini adalah buku <cite>Panduan Kopi Nusantara</cite>.</p>
</body>
</html>