Ako ste ikada pogledali popis HTML elemenata, možda ste se pronašli i pitate "Što je blok kvote?" Element blockquote je par od HTML oznake koji se koristi za definiranje dugih navoda. Evo definicije ovog elementa prema W3C HTML5 specifikaciji:
Element blockquote predstavlja odjeljak koji je citiran iz drugog izvora.
Kako koristiti Blockquote na svojim web stranicama
Kada pišete tekst na web stranici i izradite taj izgled stranice, ponekad želite zazivati blok teksta kao ponudu.
To bi mogla biti citat s nekog drugog mjesta, poput izjave korisnika koje prati studiju slučaja ili priču o uspjehu projekta. To bi također moglo biti dizajnerski tretman koji ponavlja važan tekst iz članka ili samog sadržaja. U izdavaštvu, to se ponekad naziva povuci-citat . U web dizajnu jedan je od načina da to postignemo (i način na koji pokrivamo u ovom članku) zove se blok-kvota.
Zato pogledajmo kako biste upotrijebili oznaku blockquote da biste definirali dugu ponudu, kao što je ovaj izvod iz "The Jabberwocky" od Lewis Carroll:
"Dva brillig i slittey toves
Je li se u wabe pojavio i gimble?
Svi mimsi su bili borogovi,
I mama izlazi.
(Lewis Carroll)
Primjer korištenja oznake Blockquote
Blockquote oznaka je semantička oznaka koja govori pregledniku ili korisničkom agensu da je sadržaj dugačak citat. Kao takav, ne biste trebali priložiti tekst koji nije citat unutar oznake blockquote. Imajte na umu da je "citat" često stvarna riječ koju je netko izgovorio ili tekst iz vanjskog izvora (poput teksta Lewisa Carrolla u ovom članku), no to može biti i koncept dizajna koji smo prethodno pokrili.
Kada razmišljate o tome, taj je parazit citat teksta, samo se događa da bude iz istog članka koji se pojavljuje u samom citatu.
Većina web preglednika dodati neke uvlačenje (oko 5 mjesta) na obje strane blokova kako bi se ističu iz okolnog teksta. Neki iznimno stariji preglednici mogu čak crtati citirani tekst kurzivom.
Ne zaboravite da je ovo jednostavno zadani stil elementa blockquote. S CSS-om imate potpunu kontrolu nad time kako će se prikazati vaš blokni broj. Možete povećati ili čak ukloniti uvod, dodati pozadinske boje ili povećati veličinu teksta kako biste dodatno pozvali citat. Taj citat možete plutati na jednu stranu stranice i zamotati ga u drugi tekst, što je obično vizualni stil koji se upotrebljava za povlačenje u tiskanim časopisima. Imate kontrolu nad izgledom blokova u CSS-u, nešto što ćemo uskoro razgovarati. Za sada nastavimo s gledanjem kako dodati sam citat na HTML oznaku.
Da biste dodali oznaku blockquote u svoj tekst, jednostavno okružite tekst koji je citat sa sljedećim parom oznake -
Na primjer:
"Dva brillig i slittey toves
Je li se u wabe pojavio i gimble?
Svi mimsi su bili borogovi,
I mama izlazi.
Kao što možete vidjeti, jednostavno dodajte par oznaka blockquote oko sadržaja samog citata. U ovom smo primjeru upotrebljavali i neke od njih (
) za dodavanje pojedinačnih prekida linije gdje je to prikladno unutar teksta. To je zato što ponovno stvaramo tekst iz pjesme, gdje su ti posebni prekidi važni. Ako ste stvorili kupčevu izjavu o izjavi, a linije nisu trebale prekinuti u određenim dijelovima, ne biste htjeli dodati te oznake za razvrstavanje i omogućiti da se preglednik automatski obavija i prekine po potrebi na temelju veličine zaslona.
Nemojte koristiti Blockquote u tekst umetnuti
Već se godinama ljudi koristili oznakom "blockquote" ako žele umetnuti tekst na svoju web stranicu, čak i ako taj tekst nije bio paravan. Ovo je loša praksa! Ne želite koristiti semantiku blok-kvote isključivo iz vizualnih razloga. Ako trebate umetnuti tekst, trebali biste upotrebljavati obrasce stila, a ne oznake s oznakom "blockquote" (osim ako naravno, ono što pokušavate uvlačiti je citat!). Pokušajte staviti ovaj kôd na svoju web stranicu ako pokušavate jednostavno dodati uvod:
Ovo će biti tekst koji je razveden.
Zatim ćete ciljati tu klasu sa stilom CSS
.indented {
padding: 0 10px;
}
To dodaje 10 piksela padding na bilo koju stranu odlomka.
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 18.05.17.