Jika Anda pernah melihat daftar elemen HTML, Anda mungkin menemukan diri Anda bertanya "apa itu blockquote?" Elemen blockquote adalah pasangan tag HTML yang digunakan untuk menentukan kutipan panjang. Berikut adalah definisi elemen ini sesuai dengan spesifikasi HTML5 W3C:
Elemen blockquote mewakili bagian yang dikutip dari sumber lain.
Bagaimana Menggunakan Blockquote di Halaman Web Anda
Ketika Anda menulis teks di halaman web dan membuat tata letak halaman itu, Anda kadang-kadang ingin memanggil blok teks sebagai kutipan.
Ini bisa berupa kutipan dari tempat lain, seperti testimonial pelanggan yang menyertai studi kasus atau kisah sukses proyek. Ini juga bisa menjadi perawatan desain yang mengulangi beberapa teks penting dari artikel atau konten itu sendiri. Dalam penerbitan, ini kadang-kadang disebut tarik-kutipan , Dalam desain web, salah satu cara untuk mencapai hal ini (dan cara yang kami bahas dalam artikel ini) disebut blockquote.
Jadi mari kita lihat bagaimana Anda akan menggunakan tag blockquote untuk menentukan kutipan panjang, seperti kutipan dari "The Jabberwocky" oleh Lewis Carroll:
'Twas brillig and the slithey toves
Apakah gyre dan gimble di wabe:
Semua kemewahan adalah borogoves,
Dan mome raths outgrabe.
(oleh Lewis Carroll)
Contoh Penggunaan Tag Blockquote
Tag blockquote adalah tag semantik yang memberi tahu browser atau agen pengguna bahwa isinya adalah kutipan panjang. Dengan demikian, Anda tidak boleh melampirkan teks yang bukan kutipan di dalam tag blockquote. Ingat, "kutipan" adalah kata-kata yang sebenarnya sering seseorang katakan atau teks dari sumber luar (seperti teks Lewis Carroll dalam artikel ini), tetapi itu juga bisa menjadi konsep pullquote yang kita bahas sebelumnya.
Ketika Anda memikirkannya, tanda tarik itu adalah kutipan dari teks, itu hanya kebetulan berasal dari artikel yang sama bahwa kutipan itu sendiri muncul.
Kebanyakan peramban web menambahkan beberapa indenting (sekitar 5 spasi) ke kedua sisi pemblokiran untuk membuatnya menonjol dari teks di sekitarnya. Beberapa peramban yang sangat lama bahkan dapat membuat teks kutipan dalam huruf miring.
Ingat bahwa ini hanyalah gaya default dari elemen blockquote. Dengan CSS, Anda memiliki kontrol penuh atas bagaimana blockquote Anda akan ditampilkan. Anda dapat menambah atau bahkan menghapus indentasi, menambahkan warna latar belakang atau menambah ukuran teks untuk memanggil kutipan lebih jauh. Anda dapat mengapungkan kutipan itu ke salah satu sisi halaman dan membungkus teks lain di sekitarnya, yang merupakan gaya visual umum yang digunakan untuk daftar kutipan di majalah tercetak. Anda memiliki kendali atas tampilan blockquote dengan CSS, sesuatu yang akan kita bahas sedikit lebih lama. Untuk saat ini, mari lanjutkan terus cara menambahkan kutipan itu sendiri ke markup HTML Anda.
Untuk menambahkan tag blockquote ke teks Anda, cukup kelilingi teks yang merupakan kutipan dengan pasangan tag berikut -
Sebagai contoh:
'Twas brillig and the slithey toves
Apakah gyre dan gimble di wabe:
Semua kemewahan adalah borogoves,
Dan mome raths outgrabe.
Seperti yang Anda lihat, Anda cukup menambahkan sepasang tag blockquote di sekitar konten kutipan itu sendiri. Dalam contoh ini, kami juga menggunakan beberapa tag istirahat (
) untuk menambahkan jeda baris tunggal yang sesuai di bagian dalam teks. Ini karena kita menciptakan kembali teks dari puisi, di mana jeda spesifik itu penting. Jika Anda membuat kutipan testimonial pelanggan, dan garis-garisnya tidak perlu pecah di bagian-bagian tertentu, Anda tidak ingin menambahkan tag istirahat ini dan memungkinkan peramban itu sendiri untuk membungkus dan merusak sesuai kebutuhan berdasarkan ukuran layar.
Jangan Gunakan Blockquote ke Teks Indentasi
Selama bertahun-tahun, orang menggunakan tag blockquote jika mereka ingin memasukkan teks di halaman web mereka, bahkan jika teks itu bukan tanda kutip. Ini adalah praktik yang buruk! Anda tidak ingin menggunakan semantik blockquote semata-mata untuk alasan visual. Jika Anda perlu membocorkan teks Anda, Anda harus menggunakan style sheet, bukan tag blockquote (kecuali, tentu saja, apa yang Anda coba indentasikan adalah kutipan!). Coba letakkan kode ini di halaman web Anda jika Anda hanya mencoba menambahkan indentasi:
Ini akan menjadi teks yang dilekatkan.
Selanjutnya, Anda akan menargetkan kelas itu dengan gaya CSS
.indented {
padding: 0 10px;
}
Ini menambahkan 10 piksel padding ke salah satu sisi paragraf.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 5/8/17.