Textový element

<blockquote>

Citace. Delší text převzatý odjinud, oddělený od okolního textu.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Citace jako blok

blockquote obalí delší citovaný text. Uvnitř jsou obvyklé elementy, nejčastěji odstavec.

Prohlížeč citaci ve výchozím stylu odsadí zleva i zprava o 40 pixelů.

Zdroj

Kdo to řekl

Atribut cite uloží adresu zdroje, ale prohlížeč ji nezobrazí. Viditelný zdroj patří do popisku: citaci zabalíme do figure a autora dáme do figcaption.

Krátká citace

Citace uvnitř věty

Krátkou citaci uprostřed textu označí element q. Uvozovky doplní prohlížeč sám, a to podle jazyka stránky. Česky tedy „dole a nahoře“.

Styl

Citace s proužkem

Výchozí margin nahradíme barevným proužkem vlevo a větším písmem. Citace se tak oddělí od textu a zároveň k němu patří.

Styl

Velké uvozovky

Ozdobné uvozovky vložíme přes ::before, takže v HTML nebudou a screen reader je nepřečte. Jsou jen pro oko.

Responzivita

Na telefonu menší padding

Padding 56 pixelů je na telefonu skoro šestina šířky. Na úzké obrazovce dáme uvozovky nad text a padding vlevo zrušíme.

Shrnutí

Kdy použít citace

Ano

• blockquote pro delší citace
• q pro krátké citace ve větě
• zdroj ve figcaption, název díla v cite

Ne

• blockquote jen kvůli odsazení textu
• uvozovky psané ručně kolem q

Další: <code> →