Pernah baca artikel berita yang ada kutipan narasumber digeser ke kanan dengan font berbeda? Itu cara visual nge-mark "kata-kata ini dari orang lain, bukan dari penulis". HTML kasih tag semantik untuk itu — <blockquote> untuk kutipan panjang, <q> untuk inline pendek, <cite> untuk nama karyanya. Bukan cuma soal tampilan miring atau geser — screen reader dan mesin pencari paham ini kutipan, bukan prosa penulis.

💡 Atribut cite="URL" invisible metadata. Tag <blockquote> dan <q> punya atribut cite yang gak tampil di layar tapi dibaca screen reader + crawler. Buat referensi sumber asli — kayak footnote tapi machine-readable.

<blockquote> — Kutipan Panjang

Kutipan panjang yang berdiri sendiri sebagai blok:

<blockquote cite="https://contoh.com/artikel">
  <p>Kode yang baik adalah kode yang mudah dibaca manusia.</p>
</blockquote>

<q> — Kutipan Inline Pendek

Kutipan singkat di tengah kalimat. Browser otomatis tambah tanda kutip — jangan ketik manual:

<p>Menurut Einstein, <q>Imajinasi lebih penting dari pengetahuan.</q></p>

<cite> — Nama Karya

Nama buku, artikel, film, atau karya lain yang dirujuk:

<p>Saya membaca <cite>Refactoring</cite> karya Martin Fowler.</p>

Atribut cite="URL" pada <blockquote> atau <q> menunjuk ke sumber — tidak tampil di halaman, tapi bisa dibaca screen reader dan mesin pencari.

⚠️ Jangan pakai <blockquote> hanya untuk indent visual. Pakai CSS margin-left atau padding untuk itu. Semantik dan styling adalah urusan berbeda.

🎭 Analogi sehari-hari

Pernah liat artikel di Tempo atau Kompas yang ada kutipan dari narasumber? Biasanya teks-nya digeser ke kanan, font-nya beda, kadang ada nama narasumber di bawahnya. Itu cara visual nge-mark "kata-kata ini dari orang lain, bukan dari penulis." HTML kasih tools yang sama: <blockquote> buat kutipan panjang berdiri sendiri (kayak kutipan utama wartawan), <q> buat kutipan inline di tengah kalimat, <cite> buat sebut sumber karyanya.

⚠️ Jebakan yang sering ditemui

• <blockquote> untuk INDENT VISUAL = anti-pattern. Pakai CSS margin/padding.
• <q> browser auto-add quotation marks — JANGAN ketik manual "<q>...</q>" (double quotes).
• cite="URL" atribut TIDAK TAMPIL — invisible metadata. Jelas pisah dari <cite> element (nama karya).
• <cite> style italic default — sama dengan <i>/<em> visually.
• Quote multi-paragraf — semua <p> di dalam <blockquote>, jangan keluar.
• Pull quote (highlight kutipan dari artikel sendiri) bukan kutipan orang lain — pakai <aside> atau styled <p> lebih cocok.

TL;DR: Tag kutipan semantik. <blockquote> = kutipan panjang (blok). <q> = kutipan inline (browser auto-add quote marks — JANGAN manual). <cite> = nama karya (buku/artikel/film). Atribut cite="URL" di <blockquote>/<q> = invisible metadata sumber buat screen reader + SEO. JANGAN pakai <blockquote> cuma buat indent visual — pakai CSS margin. Pull quote (highlight dari artikel sendiri) pakai <aside>, bukan <blockquote>.