Terkadang halaman kita menampilkan kutipan panjang dari sumber lain — testimoni pelanggan, kutipan tokoh, atau cuplikan buku. Elemen blockquote menandai kutipan tingkat blok itu, sehingga browser dan mesin pencari tahu bahwa kalimat tersebut berasal dari pihak lain, bukan tulisan kita sendiri.

Chapter ini membahas penandaannya, atribut cite yang tidak pernah tampil, serta cara membuat atribusi yang terlihat oleh pembaca.

Aturan Dasar #

blockquote menampung kutipan satu paragraf atau lebih. Isinya sebaiknya tetap dibungkus elemen p — bukan diletakkan telanjang — agar tiap paragraf kutipan tetap diperlakukan sebagai paragraf:

html 
<blockquote>
  <p>Kualitas roti dinilai pelanggan, bukan oleh juru roti.</p>
</blockquote>

Hasil Render: browser menjorokkan isi blockquote dari tepi kiri halaman dengan margin bawaan, dan teksnya tetap satu paragraf. Mari kita telaah strukturnya:

  1. Baris 1-3 (<blockquote> membungkus <p>): kutipan blok dengan isi berupa paragraf — penanda p tetap dipakai di dalamnya.

Atribut cite: Alamat Sumber #

blockquote memiliki atribut cite yang diisi URL sumber kutipan:

html 
<blockquote cite="https://example.com/wawancara-dewi">
  <p>Pelanggan bukan data. Pelanggan adalah orang yang datang karena merasa diterima.</p>
</blockquote>

Nilai cite di atas tidak pernah tampil di halaman — pembaca manusia tidak melihatnya. Alamat tersebut hanya terbaca oleh mesin: mesin pencari dan skrip yang memetakan sumber kutipan. Karena itu atribut cite melengkapi, bukan menggantikan, atribusi yang terlihat.

Untuk atribusi yang dibaca pembaca, kita memakai elemen footer di dalam blockquote; elemen cite di dalam footer menandai judul karya yang dikutip:

html 
<blockquote cite="https://example.com/jurnal-dewi">
  <p>Kualitas pelayanan dinilai pelanggan, bukan oleh pemilik toko.</p>
  <footer>— Dewi Anggraini, <cite>Jurnal Toko Roti Dewi</cite>, edisi April</footer>
</blockquote>

Hasil Render:

Seluruh isi blockquote tampil menjorok; baris footer tampil sebagai baris terakhir kutipan. Mari kita bedah baris-per-baris:

  1. Baris 1 (<blockquote cite="...">): pembuka kutipan sekaligus alamat sumber untuk mesin.
  2. Baris 2 (<p>...</p>): isi kutipan tetap dibungkus paragraf.
  3. Baris 3 (<footer>...</footer>): atribusi terlihat — nama penulis ditulis polos, judul karya ditandai elemen cite.

Ringkasan #

  • blockquote menandai kutipan tingkat blok dari sumber lain; isinya tetap dibungkus p.
  • Atribut cite berisi URL sumber dan tidak pernah tampil bagi pembaca manusia.
  • Atribusi terlihat ditulis dalam footer di dalam blockquote; judul karya memakai elemen cite.
  • blockquote menyatakan kutipan, bukan indentasi visual.

Chapter berikutnya menangani kutipan pendek di dalam kalimat: elemen q yang tanda kutipnya ditambahkan browser sendiri, serta elemen cite untuk judul karya.