Co je Blockquote?

Pokud jste se někdy podívali na seznam prvků HTML, možná jste se sami dotazovali "co je to bloková kokta?" Prvek blockquote je dvojice značek HTML, která se používá k definování dlouhých citací. Zde je definice tohoto prvku podle specifikace W3C HTML5:

Prvek blockquote představuje část, která je citována z jiného zdroje.

Jak používat Blockquote na vašich webových stránkách

Když píšete text na webové stránce a vytvoříte rozložení stránky, někdy chcete chtít jako blok citovat blok textu.

Mohlo by to být citát někde jinde, jako svědectví zákazníka, které doprovází případovou studii nebo příběh o úspěchu projektu. Mohlo by to být i designové zpracování, které opakuje nějaký důležitý text z článku nebo samotného obsahu. Při publikování se to někdy nazývá pull-quote . V návrhu webových stránek se jeden ze způsobů, jak toho dosáhnout (a způsob, jakým se v tomto článku zabýváme), se nazývá blockquote.

Takže se podívejme na to, jak byste použili značku blockquote pro definování dlouhých citací, jako je tento výňatek z "The Jabberwocky" od Lewise Carrol:

"Je to jasné a rozbité
Díval se a oblékal se do dívky:
Všechny mimsy byly borogovové,
A mome raths outgrabe.

(Lewis Carroll)

Příklad použití tagu Blockquote

Značka blockquote je sémantická značka, která informuje prohlížeč nebo agent uživatele, že obsah je dlouhá citace. Jako takové byste neměli uzavírat text, který není citací uvnitř tagu blockquote.Pamatujte si, že "citace" je často skutečná slova, která někdo řekl, nebo text z vnějšího zdroje (jako text Lewis Carroll v tomto článku), ale to může být také pojetí pullquote, které jsme předtím pokryli.

Když o tom přemýšlíte, tato pullquote je citát textu, prostě se to stane ze stejného článku, ve kterém se citát sám objevuje.

Většina webových prohlížečů přidává na obě strany bloku nějaké odsazení (asi 5 mezer), aby se vyniklo z okolního textu. Některé mimořádně staré prohlížeče mohou dokonce vykreslovat citovaný text kurzívou.

Nezapomeňte, že je to jednoduše výchozí stylování prvku blokové křivky. S funkcí CSS máte úplnou kontrolu nad tím, jak se vaše blokové zobrazení zobrazí. Můžete zvýšit nebo dokonce odstranit odsazení, přidat barvy pozadí nebo zvýšit velikost textu pro další volání citace. Tuto citaci můžete umístit na jednu stranu stránky a obklopit ji druhým textem, což je běžně vizuální styl, který se používá pro vytištění v tištěných časopisech. Máte kontrolu nad zobrazením bloku v CSS, něco, o čem se budeme brzy diskutovat. Prozatím budeme pokračovat v tom, jak přidat samotnou citát do značky HTML.

Chcete-li do textu přidat blokovou značku, jednoduše obklopte text, který je citací, s následujícím párem značek -

Například:


"Je to jasné a rozbité

Díval se a oblékal se do dívky:

Všechny mimsy byly borogovové,

A mome raths outgrabe.

Jak můžete vidět, stačí jednoduše přidat pár bloků bloků kolem obsahu samotné nabídky. V tomto příkladu jsme také použili některé tagy break (
) pro přidání jednorázových zlomků tam, kde je to vhodné, uvnitř textu. Je to proto, že vytváříme text z básně, kde jsou tyto konkrétní přestávky důležité. Pokud jste vytvořili citovou připomínku zákazníka a linky nemusely v konkrétních částech narušit, nechtěli byste přidávat tyto značky pro přerušení a nechat prohlížeč sám zabalit a podle potřeby rozdělit podle velikosti obrazovky.

Nepoužívejte Blockquote k odsazení textu

Po mnoho let používali lidé tag blockquote, jestliže chtěli odsadit text na svých webových stránkách, a to i v případě, že tento text nebyl přitahován. To je špatná praxe! Nechcete sémantiku blockquote používat pouze z vizuálních důvodů. Pokud potřebujete odsadit svůj text, měli byste používat listy stylů, nikoliv blokové značky (pokud samozřejmě to, co se pokoušíte odsadit, je citace!). Zkuste tento kód na své webové stránce, pokud se pokoušíte jednoduše přidat odrážku:

Bude to text, který je odsazen.

Dále byste cílovali tuto třídu ve stylu CSS

.indented {
polstrování: 0 10px;
}}

To přidá 10 pixelů polstrování na obě strany odstavce.

Původní článek Jennifer Krynin. Upraveno Jeremy Girardem 5.8.17.