HTML blockquote: kutipan blok dan sumber kutipan

HTML <blockquote> menandai bagian yang berdiri sendiri yang dikutip dari sumber lain. Ini bisa berisi beberapa paragraf. Anda dapat mencatat URL asli dalam atribut cite dan menambahkan tautan terpisah yang terlihat sehingga pembaca bisa memeriksa sumber.

Kapan seharusnya Anda menggunakan blockquote?

Gunakan blockquote untuk menyajikan kutipan sebagai bagian tersendiri. Jangan menggunakannya hanya untuk mengubah inden atau warna paragraf. Untuk kutipan singkat dalam kalimat, gunakan <q>; lihat referensi elemen HTML q.

Kutipan blok dapat berisi paragraf dan konten aliran lainnya. Jaga agar kutipan tetap berbeda dari atribusinya: letakkan kredit penulis atau sumber di luar <blockquote>. Periksa kata-kata asli dan gunakan hanya materi yang diperlukan untuk tujuan Anda.

Contoh lengkap dengan tautan sumber

Simpan kode berikut sebagai quote.html dan buka di browser. Tidak diperlukan server atau pustaka tambahan. Kutipan bahasa Inggris pendek berasal langsung dari HTML Standard.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh kutipan blok</title>
</head>
<body>
  <p>Standar HTML menjelaskan isi yang diwakili blockquote sebagai berikut.</p>
  <blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
    <p lang="en">a section that is quoted from another source</p>
  </blockquote>
  <p>Sumber: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
    target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>

Peramban menampilkan paragraf pengantar, kutipan, dan tautan sumber dalam urutan itu. Gaya bawaan dapat berbeda, tetapi peramban biasanya memberi margin tambahan pada kutipan. Tautan membuka bagian relevan dari Standar HTML. Kutipan mempertahankan kata-kata aslinya dalam bahasa Inggris.

Atribut cite berbeda dari kutipan yang terlihat.

Atribut cite berisi URL dari sumber yang dikutip. Menambahkannya tidak secara otomatis menampilkan tautan atau kredit sumber. Sertakan elemen <a> terpisah dan teks deskriptif ketika pembaca perlu mengikuti referensi.

Atribut cite dan elemen <cite> memiliki nama yang sama tetapi memiliki peran yang berbeda. Atribut mencatat alamat sumber; elemen menandai judul sebuah karya, seperti buku atau dokumen. Nama seorang penulis saja bukanlah judul karya.

Gaya kutipan dengan CSS

Pertahankan makna kutipan dalam HTML dan sesuaikan margin serta border-nya dengan CSS. Hubungkan stylesheet dari head pada contoh, lalu tambahkan aturan berikut ke stylesheet tersebut. Anda juga dapat menambahkan aturan ini ke stylesheet yang sudah digunakan oleh halaman.

blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid #477080;
}

Kutipan mendapatkan border kiri dan spasi internal. Jika Anda menambahkan warna latar atau teks, pertahankan kontras yang dapat dibaca. Jangan menandai konten biasa yang tidak dikutip sebagai blockquote hanya untuk mendapatkan tampilan ini. Lihat definisi blockquote pada Standar HTML dan referensi blockquote MDN untuk sintaks dan kondisi penggunaannya.