Ak ste sa niekedy pozreli na zoznam prvkov HTML, možno ste sa pýtali, "čo je blockquote?" Prvok blockquote je dvojica značiek HTML, ktorá sa používa na definovanie dlhých cenových ponúk. Tu je definícia tohto prvku podľa špecifikácie W3C HTML5:
Prvok blockquote predstavuje časť citovanú z iného zdroja.
Ako používať blockquote na vašich webových stránkach
Keď píšete text na webovej stránke a vytvárate rozloženie stránky, niekedy chcete vyvolať blok textu ako citát.
Mohlo by ísť o citát od niekde inde, ako o svedectve zákazníka, ktoré sprevádza prípadovú štúdiu alebo projektový úspech. Môže to byť aj koncepcia, ktorá opakuje niektoré dôležité texty z článku alebo samotného obsahu. Pri publikovaní sa to niekedy nazýva pull-quote . Vo webovom dizajne sa jeden z spôsobov, ako to dosiahnuť (a spôsob, akým sa v tomto článku zaoberáme), sa nazýva blockquote.
Takže poďme sa pozrieť na to, ako by ste použili značku blockquote na definovanie dlhých citácií, ako napríklad tento výňatok z "The Jabberwocky" od Lewisa Carrolla:
"Je to jasné a roztrhané
Dievčatá a námahu v wabe:
Všetky mimsy boli borogov,
A mame raths outgrabe.
(podľa Lewis Carroll)
Príklad použitia značky Blockquote
Znak blokovania bloku je sémantická značka, ktorá informuje prehliadač alebo agent používateľa, že obsah je dlhá citácia. Ako taký by ste nemali prikladať text, ktorý nie je citátom vo vnútri tagu blockquote. Nezabudnite, že "citát" je často skutočné slová, ktoré niekto povedal, alebo text z vonkajšieho zdroja (napríklad text Lewis Carroll v tomto článku), ale môže to byť tiež koncept pullquote, ktorý sme predtým pokryli.
Keď o tom premýšľate, že pullquote je citátom textu, jednoducho sa to stane z toho istého článku, v ktorom sa citácia sama objavuje.
Väčšina webových prehliadačov pridá niektoré odsadenia (asi 5 medzery) na obidve strany blockquote, aby bolo vyčlenené z okolitého textu. Niektoré extrémne staré prehliadače môžu dokonca uvádzať citovaný text kurzívou.
Pamätajte si, že ide len o predvolený styling prvku blockquote. Pomocou služby CSS máte úplnú kontrolu nad tým, ako sa bude zobrazovať vaše blokové číslo. Môžete zvýšiť alebo dokonca odstrániť odsadenie, pridať farby pozadia alebo zväčšiť veľkosť textu, aby ste mohli ďalej vyvolať cenovú ponuku. Túto cenovú ponuku môžete posunúť na jednu stranu stránky a obklopiť ju ďalším textom, čo je obyčajne vizuálny štýl, ktorý sa používa na vytlačenie v tlačených časopisoch. Máte kontrolu nad objavením bloku bloku s CSS, o čom sa budeme čoskoro diskutovať. Zatiaľ budeme pokračovať v hľadaní toho, ako pridať samotnú cenovú ponuku do značky HTML.
Ak chcete do svojho textu pridať značku blokov, jednoducho obklopte text, ktorý je citáciou, s nasledujúcim párom značiek -
Napríklad:
"Je to jasné a roztrhané
Dievčatá a námahu v wabe:
Všetky mimsy boli borogov,
A mame raths outgrabe.
Ako môžete vidieť, jednoducho pridáte dvojicu značiek blokov okolo obsahu samotnej cenovej ponuky. V tomto príklade sme použili aj niektoré značky prerušenia (
), aby sa pridali jednotlivé riadkové prerušenia, ak je to vhodné, v texte. Je to preto, že vytvárame text z básne, kde sú tieto špecifické prestávky dôležité. Ak ste vytvorili cenovú ponuku pre zákazníkov a linky nemuseli v konkrétnych častiach narúšať, nechcete pridať tieto značky prerušenia a nechať prehliadač podľa potreby veľkosť záplaty a rozbiť podľa veľkosti obrazovky.
Nepoužívajte Blockquote na zarovnanie textu
Po mnoho rokov ľudia používali značku blockquote, ak chcú odsadiť text na svojej webovej stránke, a to aj vtedy, ak tento text nebol výzvou. To je zlý postup! Nechcete používať sémantiku blockquote len z vizuálnych dôvodov. Ak potrebujete odsadiť text, mali by ste používať štýlové listy, nie blokové značky (ak, samozrejme, to, čo sa pokúšate zarovnať, je citát!). Skúste vložiť tento kód do svojej webovej stránky, ak sa pokúšate jednoducho pridať odrážku:
Toto bude text, ktorý je odsadený.
Ďalej by ste sa zamerali na túto triedu v štýle CSS
.indented {
polstrovanie: 0 10px;
}
To pridá 10 pixelov polstrovania na obidve strany odseku.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 5/8/17.