Čo je to blockquote?

Ak ste sa niekedy pozreli na zoznam prvkov HTML, možno ste sa ocitli v otázke, „čo je to blockquote?“ Prvkom blockquote je Značka HTML pár, ktorý sa používa na definovanie dlhých ponúk. Tu je definícia tohto prvku podľa Špecifikácia W3C HTML5:

Prvok blockquote predstavuje časť, ktorá je citovaná z iného zdroja.

Ako používať Blockquote na vašich webových stránkach

Keď píšete text na webovú stránku a vytvárate jej rozloženie, niekedy budete chcieť vyvolať blok textu ako ponuku. Môže to byť cenová ponuka odinakiaľto, napríklad odporúčanie zákazníka, ktoré sprevádza prípadovú štúdiu alebo príbeh úspešného projektu.

Môže to byť tiež dizajnová úprava, ktorá opakuje dôležitý text z článku alebo samotného obsahu. Vo vydavateľstve sa to niekedy nazýva a vytiahnuť ponuku„Vo webovom dizajne sa jeden zo spôsobov, ako to dosiahnuť (a spôsob, ktorým sa venujeme v tomto článku), nazýva blockquote.

Pozrime sa teda na to, ako by ste značku blockquote použili na definovanie dlhých citácií, napríklad tento úryvok z knihy „The Jabberwocky“ od Lewisa Carrolla:

„Boli to brilantní a štrajkovia
Žiarili a hrali sa v tampóne:
Všetci mimózy boli borogovci,
A mama ratuje.

(Lewis Carroll)

Príklad použitia značky Blockquote

Značka blockquote je sémantická značka, ktorá informuje prehliadač alebo užívateľského agenta, že ich obsah predstavuje dlhú ponuku. Preto by ste do značky blockquote nemali vkladať text, ktorý nie je citátom.

Keď sa nad tým zamyslíte, tento citát je citátom textu, stane sa náhodou, že pochádza z toho istého článku, v ktorom sa cituje samotný citát.

Väčšina webových prehľadávačov pridáva na obe strany blokovaného úvodzovky určité odsadenie (asi 5 medzier), aby vynikla nad okolitým textom. Niektoré extrémne staré prehliadače môžu dokonca citovaný text vykresliť kurzívou. Pamätajte, že toto je jednoducho predvolený štýl prvku blockquote.

S CSS máte úplnú kontrolu nad tým, ako sa bude zobrazovať váš blockquote. Cenovú ponuku môžete vyvolať zväčšením alebo dokonca odstránením odsadenia, pridaním farieb pozadia alebo zväčšením veľkosti textu. Tento citát môžete umiestniť na jednu stranu stránky a obklopiť ním druhý text, čo je bežný vizuálny štýl používaný pre úvodzovky v tlačených časopisoch.

Vzhľad blockquote máte pod kontrolou pomocou CSS, o čom si v krátkosti ešte trochu povieme. Zatiaľ sa budeme venovať tomu, ako pridať samotnú cenovú ponuku do svojho označenia HTML.

Ak chcete do textu pridať značku blockquote, jednoducho text, ktorý je citátom, obklopte nasledujúcou dvojicou značiek:

• Otvorenie:
• Uzávierka:

Napríklad:

‘Twas brillig and the slithey toves.
Žiarili a hrali sa v tampóne:
Všetci mimózy boli borogovci,
A mama ratuje.

Pridajte dvojicu značiek blockquote okolo obsahu samotnej ponuky. V tomto príklade sme použili aj niektoré rozbiť značky (
), ak je to vhodné, do textu vložte konce riadkov. Je to tak preto, lebo znovu vytvárame text z básne, kde sú dôležité konkrétne prestávky.

Ak ste vytvárali ponuku posudkov zákazníkov a riadky sa nemuseli členiť na konkrétne časti, vy Nechcel by som pridať tieto značky prerušenia a umožniť samotnému prehliadaču, aby sa podľa potreby zalomil a zlomil na základe obrazovky veľkosť.

Na odsadenie textu nepoužívajte blockquote

Po mnoho rokov ľudia používali značku blockquote, ak chceli na svojej webovej stránke odsadiť text, aj keď tento text nebol úvodzovkou. Toto je zlý postup! Sémantiku blockquote nechcete používať iba z vizuálnych dôvodov.

Ak potrebujete odsadiť text, mali by ste používať šablóny štýlov, nie značky blockquote (pokiaľ samozrejme nie je to, čo sa pokúšate odsadiť, citát!).