Sekiranya anda pernah melihat senarai elemen HTML, anda mungkin mendapati diri anda bertanya "apakah blokiran?" Elemen blockquote adalah pasangan tag HTML yang digunakan untuk menentukan petikan panjang. Berikut adalah definisi elemen ini mengikut spesifikasi W3C HTML5:
Unsur blockquote mewakili seksyen yang dipetik daripada sumber lain.
Cara Menggunakan Blockquote pada Halaman Web Anda
Apabila anda menulis teks pada halaman web dan membuat susun atur halaman itu, anda kadang-kadang mahu memanggil blok teks sebagai petikan. Ini boleh menjadi petikan dari tempat lain, seperti testimoni pelanggan yang mengiringi kajian kes atau kisah kejayaan projek. Ini juga boleh menjadi rawatan reka bentuk yang mengulangi beberapa teks penting dari artikel atau kandungan itu sendiri. Dalam penerbitan, ini kadang-kadang disebut quote menarik. Dalam reka bentuk web, salah satu cara untuk mencapai ini (dan cara yang kita meliputi dalam artikel ini) dipanggil blockquote.
Jadi mari lihat bagaimana anda akan menggunakan tag blockquote untuk menentukan petikan panjang, seperti petikan ini dari "The Jabberwocky" oleh Lewis Carroll:
'Twas brillig dan tol slitheyAdakah gergasi dan gimble di wabe:Semua mimsy adalah borogoves,Dan moma itu mengalir keluar.
(oleh Lewis Carroll)
Contoh Menggunakan Tag Blockquote
Teg blockquote adalah tag semantik yang memberitahu penyemak imbas atau ejen pengguna bahawa kandungannya adalah sebutan panjang. Oleh itu, anda tidak boleh menyertakan teks yang bukan sebut harga di dalam tag blockquote. Ingatlah, "petikan" sering kata-kata sebenar yang seseorang berkata atau teks dari sumber luar (seperti teks Lewis Carroll dalam artikel ini), tetapi ia boleh juga menjadi konsep pullquote yang diliputi sebelum ini. Apabila anda berfikir tentang hal itu, pullquote itu adalah petikan teks, ia hanya berlaku dari artikel yang sama yang kutipan itu muncul.
Kebanyakan penyemak imbas web menambah beberapa indentasi (kira-kira 5 ruang) ke kedua-dua belah blockquote untuk membuatnya menonjol dari teks di sekelilingnya. Sesetengah pelayar yang sangat lama bahkan mungkin memberikan teks yang disebutkan dalam huruf miring. Ingatlah bahawa ini hanyalah gaya piawai elemen blockquote. Dengan CSS, anda mempunyai kawalan penuh ke atas bagaimana blockquote anda akan dipaparkan. Anda boleh menambah atau bahkan mengeluarkan inden, menambah warna latar belakang atau menambah saiz teks untuk memanggil lagi quote. Anda boleh mengapungkan petikan itu ke satu sisi halaman dan mempunyai teks lain membungkusnya, yang merupakan gaya visual biasa yang digunakan untuk pullquotes dalam majalah bercetak. Anda mempunyai kawalan terhadap penampilan blockquote dengan CSS, sesuatu yang akan dibincangkan sedikit lebih lama lagi. Buat masa sekarang, mari kita teruskan melihat cara menambah kutipan itu sendiri ke markup HTML anda.
Untuk menambah teg blockquote pada teks anda, hanya sekeliling teks yang merupakan petikan dengan pasangan tag berikut -
Sebagai contoh:
'Twas brillig dan tol slithey Adakah gergasi dan gimble di wabe: Semua mimsy adalah borogoves, Dan moma itu mengalir keluar.Seperti yang dapat anda lihat, anda hanya perlu menambah sepasang tag blockquote di sekeliling kandungan petikan itu sendiri. Dalam contoh ini, kami juga menggunakan beberapa tag rosak () untuk menambah satu baris pemisah di mana sesuai di dalam teks. Ini kerana kita mencipta teks dari puisi, di mana rehat tertentu adalah penting. Sekiranya anda mencipta petikan testimoni pelanggan, dan garis tidak perlu memecahkan bahagian tertentu, anda tidak akan mahu menambah tag rosak ini dan membenarkan penyemak imbas itu sendiri membungkus dan memecahkan seperti yang diperlukan berdasarkan pada saiz skrin.
Jangan gunakan Blockquote untuk Teks Inden
Selama bertahun-tahun, orang menggunakan tag blockquote jika mereka ingin indent teks pada halaman web mereka, walaupun teks itu bukan pullquote. Ini adalah amalan yang buruk! Anda tidak mahu menggunakan semantik blockquote semata-mata kerana sebab visual. Sekiranya anda perlu inden teks anda, anda harus menggunakan helaian gaya, bukan tag blockquote (melainkan, tentu saja, apa yang anda cuba indent adalah petikan!). Cuba letakkan kod ini di halaman web anda jika anda cuba semata-mata untuk menambah inden:
Ini akan menjadi teks yang diindentikasi.
Seterusnya, anda akan menyasarkan kelas itu dengan gaya CSS
.indened {
padding: 0 10px;}
Ini menambah 10 piksel padding ke kedua-dua belah perenggan.
