Šta je Blockquote?

Ako ste ikada pogledali spisak HTML elemenata, možda ste naišli na pitanje "šta je blokoteka?" Element blokkote je HTML tag par koji se koristi za definisanje dugih citata. Evo definicije ovog elementa prema W3C HTML5 specifikaciji:

Element blokkota predstavlja odeljak koji je citiran iz drugog izvora.

Kako koristiti Blockquote na svojim web stranicama

Kada pišete tekst na web stranici i kreirate izgled stranice, ponekad želite da pozovete blok teksta kao citat.

Ovo bi mogao biti citat iz nekog drugog mjesta, kao što je iskaz kupca koji prati studiju slučaja ili priča o uspjehu projekta. To bi takođe moglo biti dizajniran tretman koji ponavlja neki važan tekst iz samog članka ili sadržaja. U objavljivanju, ovo se ponekad naziva i pull-quote . U web dizajnu, jedan od načina za postizanje ovog (i način koji pokrivamo u ovom članku) naziva se blokotom.

Dakle, pogledajmo kako biste koristili oznaku blokkota da biste definirali dugačke citate, kao što je ovaj odlomak iz "The Jabberwocky" Lewisa Carrolla:

"Twas brillig i slithe toves
Da li se girije i gurne u vabe:
Svi mimici bili su borovci,
I mum se nadmašuje.

(by Lewis Carroll)

Primer korišćenja oznake blokiranja

Oznaka blockquote je semantička oznaka koja govori pretraživaču ili korisničkom agentu da je sadržaj dugačak citat. Kao takvo, ne bi trebalo da priložite tekst koji nije citat unutar blok-tag-tag-a. Zapamtite, "citat" je često aktuelne reči koje je neko rekao ili tekst iz vanjskog izvora (poput Lewis Carroll teksta u ovom članku), ali to može biti i pullquote koncept koji smo prethodno pokrivali.

Kad razmislite o tome, taj pullquote je citat teksta, samo se čini da je iz istog članka u kome se pojavljuje citat.

Većina web pretraživača dodaju neku udaljavanje (oko 5 mjesta) na obe strane blokoteke kako bi se izdvojila iz okolnog teksta. Neki izuzetno stariji pregledači mogu čak i učiniti citirani tekst kurzivom.

Zapamtite da je ovo jednostavno podrazumevani stil blokovskog elementa. Sa CSS-om, imate potpunu kontrolu nad prikazom vašeg blokkota. Možete povećati ili čak ukloniti indent, dodati boje pozadine ili povećati veličinu teksta kako biste dodatno pozvali citat. Možete cepati taj citat sa jedne strane stranice i zameniti drugi tekst, što je uobičajeno vizuelni stil koji se koristi za izvlačenje u štampanim časopisima. Imate kontrolu nad pojavom blokade sa CSS-om, o čemu ćemo malo razgovarati. Za sada, nastavimo da gledamo kako da dodate sam citat u HTML oznaku.

Da biste u tekst dodali oznaku blokade, jednostavno okružite tekst koji je citat sa sledećim par tagom -

Na primjer:


"Twas brillig i slithe toves

Da li se girije i gurne u vabe:

Svi mimici bili su borovci,

I mum se nadmašuje.

Kao što vidite, jednostavno dodate par oznaka blokova oko sadržaja samog citata. U ovom primeru koristili smo i neke oznake za pauzu (
) da dodate pojedinačne linije kada je to moguće unutar teksta. To je zato što preoblikujemo tekst iz pesme, gde su te specifične pauze važne. Ako ste kreirali cjenovnički citat, a linije nisu trebale provaliti određene dijelove, ne biste želeli dodati ove oznake pauze i omogućiti sebi da se prebaci i razbije po potrebi na osnovu veličine ekrana.

Nemojte koristiti blokquote u tekstu indentiranja

Dugi niz godina ljudi su koristili oznaku za blokiranje ako žele da unesu tekst na svoju web stranicu, čak i ako taj tekst nije bio pullquote. Ovo je loša praksa! Ne želite da koristite semantiku blokoteke isključivo iz vizuelnih razloga. Ako želite da unesete svoj tekst, trebalo bi da koristite tabele stilova, a ne oznake blokova (osim ako, naravno, ono što pokušavate da unesete je citat!). Pokušajte da stavite ovaj kod na svoju veb stranicu ako pokušavate jednostavno dodati indent:

Ovo će biti tekst koji je razdvojen.

Zatim biste ciljali tu klasu CSS stilom

.indented {
padding: 0 10px;
}

Ovo dodaje 10 piksela podloge na obe strane paragrafa.

Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 5/8/17.