Kalau kamu menulis ulang kata-kata orang lain, HTML punya tag khusus buat menandainya. <blockquote> buat kutipan panjang yang berdiri sendiri, <q> buat kutipan pendek di tengah kalimat, dan <cite> buat judul karya yang dikutip, misalnya judul buku.
🧪 Tebakan cepat:
citebisa jadi atribut (<blockquote cite="...">) dan bisa juga jadi tag (<cite>). Mana yang tampil di halaman? Tebak dulu, jawabannya ada di bagian "Atribut cite dan tag cite itu beda".
Kutipan panjang dengan <blockquote>
<figure>
<blockquote cite="https://example.com/sicp/preface">
<p>Programs must be written for people to read, and only incidentally for machines to execute.</p>
</blockquote>
<figcaption>Harold Abelson dan Gerald Jay Sussman, <cite>Structure and Interpretation of Computer Programs</cite></figcaption>
</figure>
<blockquote ...>membuka kutipan panjang. Browser menampilkannya sebagai blok sendiri, agak menjorok ke dalam.cite="https://example.com/sicp/preface"adalah atribut berisi alamat sumber kutipannya. Ditulis di dalam tag pembuka, sebelum>.<p>membungkus kalimat yang dikutip, di dalam<blockquote>.</blockquote>menutup kutipannya.<figure>dan<figcaption>membungkus kutipan beserta keterangannya: siapa yang bilang dan dari karya apa. Boleh dipakai, boleh juga gak.<cite>menandai judul karyanya, di sini judul buku.
Hasilnya, kutipan tampil sebagai blok tersendiri, lalu di bawahnya nama penulis dan judul buku yang dimiringkan. Alamat di atribut cite gak kelihatan di mana-mana.
Gak pakai <figure>? Tag <cite> boleh ditulis langsung sesudah </blockquote>.
Atribut cite dan tag <cite> itu beda
Namanya sama, tugasnya beda:
- Atribut
cite="alamat"ditulis di dalam tag pembuka<blockquote>atau<q>. Isinya alamat web sumbernya. Gak tampil di halaman, tapi bisa dibaca mesin pencari dan program lain. - Tag
<cite>Judul</cite>adalah elemen sendiri, dengan tag pembuka dan penutup. Isinya judul karya: buku, artikel, film. Tampil di halaman, miring.
<blockquote cite="https://contoh.com/buku">
<p>Kalimat yang dikutip.</p>
</blockquote>
<cite>Judul Buku</cite>
Jadi alamat gak masuk ke <cite>, dan judul gak masuk ke atribut. Nama orang juga bukan judul karya: tulis nama penulis sebagai teks biasa.
Kutipan pendek dengan <q>
<p>Kata dosenku, <q>kode itu ditulis buat dibaca manusia</q>, jadi kasih nama variabel yang jelas.</p>
<q> dipakai di tengah kalimat, jadi kalimatnya tetap satu baris. Browser menambahkan tanda kutip sendiri, jadi jangan ketik " lagi.
⚠️ Jebakan yang sering ketemu
- Judul karya ditulis pakai
<blockquote>kedua. Judul bukan kutipan. Pakai<cite>. - Tanda kutip diketik sendiri di
<q>. Tanda kutipnya jadi dobel. <blockquote>cuma biar menjorok. Kalau isinya bukan kutipan, geser pakai CSS, misalnyamargin-left.- Kutipan beberapa paragraf dipecah. Semua
<p>dari satu kutipan masuk ke satu<blockquote>.
TL;DR: <blockquote> buat kutipan panjang sebagai blok, <q> buat kutipan pendek di tengah kalimat (tanda kutipnya otomatis), <cite> buat judul karya. Alamat sumber ditulis di atribut cite="..." di tag pembuka <blockquote> atau <q>, dan gak tampil. Judul buku ditulis di tag <cite>, dan tampil miring.
