Kutipan dan Rujukan

Kutipan memindahkan kata orang lain atau karya lain ke dalam halaman, dan HTML menyediakan tiga elemen untuk itu, yaitu blockquote untuk kutipan blok, q untuk kutipan sebaris, dan cite untuk judul karya. Topik ini membahas ketiganya beserta atribut cite dan pola atribusi sumber yang terlihat oleh pembaca. Setelah membacanya, setiap kutipan dapat disertai sumber yang jelas bagi pembaca maupun alat bantu.

blockquote untuk kutipan panjang#

Elemen blockquote adalah kutipan tingkat blok yang isinya dapat berupa satu atau beberapa paragraf. Elemen ini menerima atribut cite berisi URL sumber kutipan, tetapi browser tidak menampilkan atribut tersebut, sehingga atribut itu bekerja sebagai metadata bagi alat bantu dan pembaca yang menelusuri dokumen. Atribut ini tidak menggantikan atribusi terlihat, melainkan melengkapinya. Atribusi yang harus terlihat ditulis dengan markup terpisah, dan polanya dibahas pada bagian akhir topik.

<blockquote cite="https://example.com/etika-kutipan">
  <p>Atribut cite menyimpan alamat sumber untuk alat bantu,
  sedangkan atribusi terlihat ditulis dengan markup terpisah.</p>
</blockquote>

Isi blockquote adalah konten aliran biasa, sehingga kutipan panjang boleh memuat beberapa p sekaligus. Praktik yang lazim adalah menaruh satu sumber dalam satu blockquote, bukan menumpuk beberapa sumber ke dalam satu elemen, agar atribusinya tetap terurai dengan benar. Kutipan dari sumber lisan seperti hasil wawancara juga ditulis dengan blockquote yang sama, dan atribusinya mengikuti pola atribusi yang dibahas pada bagian akhir topik. Nama narasumbernya cukup ditulis teks biasa, sedangkan judul karya yang terkait tetap ditandai cite. Apabila kutipan diambil dari halaman yang dapat dibuka, isi atribut cite berupa URL lengkap menuju halaman tersebut.

q untuk kutipan sebaris#

Elemen q (quotation) menandai kutipan yang berada di dalam kalimat lain. Browser menambahkan tanda kutip pembuka dan penutup secara otomatis, dan bentuk tanda kutipnya mengikuti bahasa halaman, sehingga tanda kutip manual di dalam q menghasilkan kutipan yang dibungkus dua lapis. Atribut cite pada q bekerja sama seperti pada blockquote, yaitu menyimpan URL sumber tanpa ditampilkan.

<p>Panduan menegaskan, <q>sumber kutipan harus terlihat di halaman yang sama</q>, bukan hanya tersimpan sebagai atribut.</p>

Pemilihan antara q dan tanda kutip biasa ditentukan oleh kebutuhan rujukan. Apabila kutipan perlu dicatat sebagai pernyataan dari sumber lain, q menyediakan penanda yang dapat dibaca mesin, sedangkan kutipan keseharian tanpa rujukan cukup ditulis dengan tanda kutip biasa. Kutipan di dalam kutipan boleh ditulis dengan q bersarang, dan browser mengganti bentuk tanda kutipnya secara otomatis sehingga kedua lapisnya tetap terbedakan. Bentuk tanda kutip yang dihasilkan juga dapat diatur dengan properti CSS quotes apabila gaya halaman menuntut bentuk lain.

cite untuk judul karya#

Elemen cite menandai judul karya yang dirujuk, misalnya buku, artikel, spesifikasi, film, atau lagu. Browser menampilkannya miring secara bawaan, dan makna resminya memang terbatas pada judul karya, bukan nama orang. Aturan lama yang membolehkan nama orang di dalam cite sudah tidak berlaku, sehingga nama penulis kutipan ditulis sebagai teks biasa atau tautan. Judul yang merupakan bagian dari karya, seperti nama bab atau satu lagu di dalam album, tidak ditandai cite, melainkan ditulis dengan tanda kutip biasa.

<p>Aturan penomoran butir daftar diatur dalam <cite>HTML Living Standard</cite> yang diterbitkan WHATWG.</p>

Perlu dibedakan elemen cite dengan atribut cite yang namanya sama. Elemen cite menandai judul karya yang terlihat pembaca, sedangkan atribut cite pada blockquote dan q menyimpan URL sumber yang tidak terlihat. Keduanya melengkapi satu sama lain, yaitu atribut mengarahkan alat bantu ke sumbernya, sedangkan elemen memberi nama karya pada teks. Apabila karyanya tersedia daring, elemen cite dapat digabungkan dengan tautan, sehingga judulnya sekaligus mengarahkan pembaca ke sumbernya. Pasangan ini lazim pada daftar pustaka halaman dokumentasi.

Pola atribusi sumber#

Atribusi yang terlihat memerlukan markup karena atribut cite tidak dirender. Terdapat dua pola yang lazim. Pola pertama membungkus blockquote dalam figure, lalu atribusinya ditulis pada figcaption, dan judul karya di dalamnya ditandai cite. Pola kedua menaruh footer di dalam blockquote sebagai wadah atribusinya, dan pola ini tepat apabila kutipan tidak membutuhkan keterangan tambahan bergaya keterangan gambar.

<figure>
  <blockquote cite="https://example.com/panduan-kutipan">
    <p>Sumber yang dicantumkan membuat kutipan dapat diperiksa ulang
    oleh pembacanya.</p>
  </blockquote>
  <figcaption>Bab dua, <cite>Panduan Penulisan Teknis</cite></figcaption>
</figure>

<blockquote>
  <p>Markup yang baik menyatakan makna, bukan sekadar tampilan.</p>
  <footer>Penyusun panduan, <cite>Panduan Markup Bermakna</cite></footer>
</blockquote>

Kedua pola menempatkan nama orang di luar cite dan menyisakan cite hanya untuk judul karyanya. Apabila sumbernya berupa halaman web, nama karyanya dapat dijadikan tautan, dan atribut cite tetap diisi URL yang sama agar alat bantu tetap menemukannya. Pemilihan pola sebaiknya konsisten di seluruh situs, karena atribusi yang bergaya ganda membingungkan pembaca yang membandingkan antarkutipan.

Demo berikut merangkai pola pertama dan elemen q dalam satu halaman kecil. Perhatikan tanda kutip yang muncul di sekitar q tanpa ditulis manual, lalu bandingkan dengan kutipan blok yang atribusinya terletak pada figcaption.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Demo kutipan</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 16px; color: #1e293b; line-height: 1.6; }
    blockquote { margin: 12px 0; padding: 8px 16px; border-left: 4px solid #94a3b8; background: #f8fafc; }
    figcaption { font-size: 14px; color: #64748b; }
    q { color: #334155; }
  </style>
</head>
<body>
  <p>Perhatikan tanda kutip yang ditambahkan browser pada elemen q berikut
  tanpa satu tanda kutip pun ditulis manual:</p>
  <p>Panduan menegaskan, <q>butir daftar ditulis dalam satu baris</q>.</p>
  <figure>
    <blockquote cite="https://example.com/panduan-kutipan">
      <p>Kutipan panjang menggunakan blockquote, sedangkan atribusinya
      ditulis pada figcaption.</p>
    </blockquote>
    <figcaption>Bab dua, <cite>Panduan Penulisan Teknis</cite></figcaption>
  </figure>
</body>
</html>

Menyatukan contoh dalam satu berkas#

Berkas berikut memuat seluruh unsur topik ini dalam satu halaman, yaitu kutipan blok dengan atribusi figcaption, kutipan sebaris dengan q, judul karya dengan cite, dan kutipan blok kedua yang hanya mengandalkan atribut cite. Urutan elemennya mengikuti urutan bahasan, tetapi pola atribusi yang dibahas pada bagian akhir justru tampil lebih dahulu karena melekat pada kutipan blok pertama.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh kutipan dan rujukan</title>
</head>
<body>
  <h1>Catatan tentang kutipan</h1>

  <h2>Kutipan panjang dengan atribusi terlihat</h2>
  <figure>
    <blockquote cite="https://example.com/panduan-kutipan">
      <p>Sumber yang dicantumkan membuat kutipan dapat diperiksa ulang,
      dan pembaca dapat menilai kredibilitasnya secara langsung.</p>
    </blockquote>
    <figcaption>Bab dua, <cite>Panduan Penulisan Teknis</cite></figcaption>
  </figure>

  <h2>Kutipan sebaris</h2>
  <p>Panduan penulisan menegaskan bahwa <q>sumber kutipan harus terlihat
  di halaman yang sama</q>, bukan hanya tersimpan sebagai atribut.</p>

  <h2>Judul karya</h2>
  <p>Aturan penomoran butir daftar diatur dalam <cite>HTML Living Standard</cite>
  yang diterbitkan WHATWG.</p>

  <h2>Kutipan dengan sitasi atribut</h2>
  <blockquote cite="https://example.com/etika-kutipan">
    <p>Atribut cite menyimpan alamat sumber untuk alat bantu,
    sedangkan atribusi terlihat ditulis dengan markup terpisah.</p>
  </blockquote>
</body>
</html>

Buka berkasnya di browser, lalu bandingkan kutipan pertama dan kutipan terakhir. Keduanya sama-sama menyimpan URL sumber pada atribut cite, tetapi hanya yang pertama yang menampilkan sumbernya secara terlihat. Bila atribusi terlihat pada kutipan pertama dihilangkan, halaman itu menjadi contoh nyata mengapa atribut cite saja tidak cukup. Keadaan itu persis tampak pada bagian terakhir berkas, yang sumbernya hanya tersimpan di dalam atribut.

Perbedaan antara markup dan tampilan juga tampak pada q, karena tanda kutipnya disisipkan oleh browser, bukan ditulis pada teks sumbernya. Domain example.com pada berkas itu adalah domain cadangan yang memang disediakan untuk dokumentasi, sehingga URL tersebut perlu diganti dengan alamat sumber sebenarnya ketika pola ini diterapkan pada tulisan nyata.

Kesalahan umum#

Empat kesalahan berikut paling sering ditemukan pada markup kutipan. Semuanya berkaitan dengan perbedaan antara makna elemen dan tampilan yang diharapkan, dan perbaikannya selalu berupa penyuntingan markup, bukan penambahan gaya.

• Menulis tanda kutip manual di dalam q. Browser menambahkan tanda kutipnya sendiri, sehingga teksnya tampil dua lapis. Hapus tanda kutip manualnya dan biarkan q yang menyisipkannya.
• Mengharapkan atribut cite tampil di layar. Atribut itu tidak dirender oleh browser, sehingga sumber kutipan tidak terlihat apabila tidak ada markup atribusi. Tambahkan figcaption atau footer yang memuat sumbernya.
• Menggunakan blockquote demi indentasi. Elemen ini menyatakan ada kutipan dari sumber lain, dan pernyataan itu menyesatkan apabila isinya bukan kutipan. Jarak dikerjakan CSS, misalnya margin dan border pada p atau figure, sehingga tampilannya serupa tanpa melanggar maknanya.
• Menaruh nama orang di dalam cite. Makna resmi elemen ini adalah judul karya, bukan penyusunnya. Tulis nama orang sebagai teks biasa atau tautan, lalu tandai judul karyanya dengan cite.

Ringkasan#

• blockquote untuk kutipan blok dan q untuk kutipan sebaris, dengan atribut cite berisi URL sumber pada keduanya.
• Atribut cite tidak dirender, sehingga atribusi terlihat ditulis melalui figcaption atau footer di dalam kutipan.
• Elemen cite menandai judul karya, sedangkan nama orang ditulis sebagai teks biasa atau tautan.
• q menyisipkan tanda kutip secara otomatis, sehingga tanda kutip manual di dalamnya menghasilkan kutipan dua lapis.

Referensi#

• Dokumentasi elemen blockquote — MDN — Model konten blockquote dan pola atribusinya.
• Dokumentasi elemen q — MDN — Perilaku tanda kutip otomatis dan atribut cite.
• Dokumentasi elemen cite — MDN — Batasan makna cite untuk judul karya.
• Dokumentasi elemen figure — MDN — Hubungan figure, figcaption, dan kutipan blok.