Bloky

Na této stránce popisuji blokové tagy, což jsou všechny, za kterými a před kterými se zalamuje řádka (kromě seznamů a tabulek). Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu.

Tag Význam Párový
p odstavec nepovinně
br řádkový zlom ne
div oddíl ano
center vycentrování ano
h1 nadpis 1. úrovně ano
h2 nadpis 2 úrovně ano
h3 nadpis 3. úrovně ano
h4 nadpis 4. úrovně ano
h5 nadpis 5. úrovně ano
h6 nadpis 6. úrovně ano
blockquote citace, odsazení ano
address adresa ano
pre předformátovaný text ano
hr vodorovná čára ne

Další blokové prvky z HTML 5 jsou docela zbytečné, ale mají pro úplnost samostatnou stráku.

Tok textu

Pokud se text nevejde na řádek, automaticky se zalomí. Slovo, které by se tam nevešlo, se prostě zobrazí na začátku dalšího řádku. Proto není v HTML nutné ukončovat řádky. Stačí pouze vymezit odstavce a jiné bloky textu.

Zarovnání odstavce - častý dotaz

<p style="text-align: right">Odstavec zarovnaný napravo</p>
<p style="text-align: center">Odstavec zarovnaný na střed</p>
<p style="text-align: justify">Odstavec zarovnaný do bloku</p>

Zarovnání blokových prvků se dříve dělávalo atributem align, které je ale nahrazeno css vlastností text-align.

p

Odstavec (angl. paragraph). Základní formátovací tag. Značka <p> se nachází na začátku každého odstavce. Původně šlo o tag nepárový, ale postupně se začala používat i značka </p>, která tag ukončila. Novější specifikace vyžadují ukončovací tag.

Text nového odstavce vždy začíná nový řádek a konec odstavce končí řádek. Klasický odstavec v HTML má před sebou a za sebou navíc vertikální mezeru, která většinou přesně odpovídá výšce jednoho řádku, což odpovídá anglosaské normě. (Této mezery se lze zbavit pomocí CSS stylu margin, například <p style="margin-top: 0px; margin-bottom: 0px">.) Pokud se vyskytnou za sebou dva odstavce nebo jiné elementy s vertikální mezerou, výška mezery se nesčítá. Podobná mezera se dělá i u jiných blokových prvků, nejčastěji u nadpisů.

Tag <p> je velmi často používán HTML editory jako základní prvek dokumentu.

Texty, které mají odstavce značené pomocí tagu <p>, jsou dobře transformovatelné do jiných formátů a dobře se s nimi pracuje pomocí CSS. Nejen proto používání tagu <p> velmi doporučuji.

Atribut tagu <p>
Atribut Význam Hodnoty
align zarovnání odstavce left | right | center | justify
Atribut align u tagů <p>, <div> a u nadpisů
align= význam poznámky
left zarovnání doleva výchozí hodnota, nemusí se nastavovat
right zarovnání doprava pravý okraj textu bude zarovnaný
center zarovnání na střed  
justify zarovnání do bloku budou zarovnány oba okraje textu,
poslední řádek bude zarovnán doleva
velmi staré prohlížeče justify nepodporují,
často vznikají nehezky velké mezislovní mezery

Příklad: <p align="right">Odstavec zarovnaný doprava.</p>

Atribut align u odstavce i u jiných blokových prvků se považuje za zastaralý (ačkoli funguje výborně). Doporučuji jej nahrazovat CSS stylem text-align.

br

Řádkový zlom (angl. break). Způsobuje okamžité ukončení řádku. Případný další text pokračuje na nové řádce.

Je důležité pochopit rozdíl mezi <p> a <br>.

V některých wysiwyg editorech se měkký enter vytváří kombinací Shift + Enter nebo Ctrl + Shift + Enter.

Clear

Jako jediný HTML tag má <br> atributy reagující na plovoucí (obtékané) objekty. Obtékanými objekty jsou nejčastěji obrázky nebo tabulky zarovnané k jedné straně. Vložením <br> s atributem clear se dá nastavit, aby se další text zobrazil až tam, kde zobrazení řádků nebude ovlivňováno případnými obtékanými objekty.

Tag <br>, atribut clear
clear= význam
right Text čeká na ukončení objektů u pravého okraje
left Text čeká na ukončení objektů u levého okraje
all Text čeká na ukončení objektů u obou okrajů

Příklad: <img align="right" alt="obrázek zarovnaný vpravo"><br clear="right">Text začíná až pod obtékaným obrázkem.

Atribut clear u tagu <br> se považuje za zastaralý a doporučuje se nahradit jej CSS vlastností clear. Clear přes CSS má tu podstatnou výhodu, že se dá nastavit libovolnému prvku (ne pouze tagu <br>). Pozor, v CSS není hodnota all, ale both.

div

Div se nejčastěji překládá jako oddíl. Zahrnuje v sobě libovolně velkou oblast textu včetně nadpisů, obrázků a tabulek. Nezřídka se celá stránka vyskytuje uvnitř jednoho elementu <div>.

Před a za oddílem se zalomí řádek. V tomto smyslu je <div> velmi podobný odstavci (<p>). Narozdíl od odstavce ale <div> nedělá před a za sebou vizuální mezery (aneb má nulový výchozí margin).

Tag <div> byl do HTML přidán zejména kvůli kaskádovým stylům. V tom se zase podobá tagu <span>, který také přibyl kvůli stylům. Rozdíl mezi <div> a <span> je v tom, že <div> je blokový element (způsobuje zalomení řádku před a po), kdežto <span> je in-line element (řádkový). Na toto téma vizte též pojednání div a span, neutrální tagy.

Kromě obecných atributů (v případě <div> velmi důležitých) lze použít atribut align (zarovnání), které má stejné hodnoty jako v případě tagu <p> (odstavce).

Atributy tagu <div>
Atribut Význam Hodnoty
align zarovnání textu, zastaralý atribut left | right | center | justify
obecné atributy    

center

Vycentrování libovolně velkého obsahu. Dosahuje stejného efektu jako <div align="center">. Nedoporučuji jeho používání. Smysl měl pouze v dobách, kdy některé prohlížeče nepodporovaly <div>. Dnes jej doporučuji nahradit divem s CSS stylem text-align: center. Avšak tag center je v prohlížečích stále plně funkční.

Centrování se dědí do vnořených elementů (např. odstavců <p>). Výjimkou je vnořená tabulka. Ta se sice vystředí, ale její obsah se zarovnává normálně (zpravidla vlevo).

h1 až h6

Nadpisy (angl. heading) jsou vlastně zvláštním druhem odstavců (tag <p>). Je rozlišováno šest stupňů nadpisů. 

Nadpisy se automaticky zobrazují tučně, různým stupněm písma (odpovídá stupni u tagu <font>) a mají kolem sebe vertikální mezery. Není tedy třeba je formátovat ručně. V tabulce uvádím též velikost písma ve výchozím nastavení prohlížečů (může se měnit):

Výchozí formátování nadpisů
Tag Stupeň
písma
Výchozí
velikost
Využití
h1 6 24px Hlavní nadpis stránky
h2 5 18 -19px Podnadpisy, názvy kapitol
h3 4 16px Mezinadpisy
h4 3 13px Důležitější odstavce
h5 2 10px Žádné rozumné použití
h6 1 9px Nejde ani pořádně přečíst

Tagy <h1> až <h6> mají jediný atribut (kromě obecných): align se stejnými hodnotami, jako má odstavec.

Mnozí autoři pro nadpisy nepoužívají tyto tagy <hx>, ale normální odstavce (tag <p>), kterým nastaví velikost a řez (pomocí tagů <font>, <b> a <i>). To je vcelku chyba, zejména protože si tak přidělávají spoustu práce. Vzhled nadpisů lze snadno předefinovat pomocí CSS.

Text se správně nadefinovanými nadpisy se snáze převádí do jiných formátů (rtp, pdf, doc). Většina HTML editorů umožňuje snadné zadávání nadpisových tagů. Některé programy na základě nadpisů dokáží automaticky vytvářet obsah dokumentu. Některé vyhledávače si také všímají tagů nadpisů a přikládají jejich textu větší váhu.

blockquote

Bloková citace, která se původně používala pro delší kusy citací (na rozdíl od krátkých, které realizoval tag <cite>). Moderní specifikace doporučují pro citaci použít tagu <q>.

<blockquote> se zobrazuje jako odstavec s větším levým a pravým odsazením (odsazení znamená, že je po okrajích odstavce prázdné místo). Díky odsazení se tag <blockquote> v praxi používá ani ne tak pro citaci, jako spíše pro odsazení. V dnešních prohlížečích je odsazení <blockquote> zpravidla 40 pixelů. Odsazení se zvětší, pokud se tag použije vícekrát za sebou.

Tag <blockquote> má kromě obecných atributů ještě atribut cite, který udává url dokumentu, z nějž je citováno. Atribut cite se v dokumentu nijak neprojeví (nejde např. prokliknout), takže se moc nepoužívá.

Příklad použití cite: <blockquote cite="http://www.seznam.cz">Najdu tam, co neznám</blockquote>

Před příchodem CSS byl tag <blockquote> jediným způsobem, jak odsadit odstavec. Dnes doporučuji raději použití normálního odstavce <p> nebo oddílu <div> s deklarací stylu margin nebo margin-left. Následující dva elementy se zobrazí stejně:

<blockquote>Odsazení blokovou citací </blockquote>

<p style="margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em;">Odsazení pomocí stylu</p>

address

Vymezení adresy. Další tag, který se časem ukázal být zbytečným. Zobrazuje se stejně jako odstavec, akorát že kurzívou. Nemá žádné atributy.

pre

Předformátovaný text. Tento tag umožňuje rychlé publikování textových souborů, které už jsou formátované pomocí mezer a konců řádek.

Uvnitř tagu <pre> totiž neplatí základní pravidlo HTML syntaxe, které konec řádku bere jako mezeru a skupinu mezer chápe jako mezeru jednu. Takže případné násobné mezery a konce řádků se v prohlížeči zobrazí stejně jako ve zdroji.

Případný konec řádku bezprostředně po značce <pre> a před značkou </pre> je zanedbáván, aby nevznikaly nežádoucí vertikální mezery.

Aby se písmenka zarovnávala pod sebe, zobrazují prohlížeče předformátovaný text neproporcionálním písmem (nejčastěji Courier), které má všechny znaky stejně široké. Zobrazení fontu se dá předefinovat pomocí CSS.

V některých zdrojích se uvádí atribut width, který by měl stanovovat maximální počet znaků na řádek. Nefunguje v Exploreru, v nejnovější Mozille (aktualizace 2005) to funguje.

xmp

Obdobou tabu <pre> je tag <xmp>, což znamená "example", angl. příklad. Nejenže zachovává mezery a řádkové zlomy, ale dokonce (narozdíl od <pre>) neinterpretuje ani další HTML tagy. Hodí se tedy zejména pro snadný zápis příkladů jazyka html. Funguje ve všech prohlížečích, ale specifikacemi je ostře nedoporučován, ba zavrhován. Více informací o XMP.

hr

Vodorovná čára (angl. horizontal rule). Bez atributů se zobrazí stínovaně šedá přes celou šířku stránky. Atributy ale mohou její vzhled ovlivnit.

Atributy tagu <hr>
Atribut Význam Možné hodnoty
width šířka (horizontálně) délka nebo procento
size šířka ve smyslu tloušťky délka v pixelech
align zarovnání čáry s nastavenou šířkou left, center, right
color barva (pouze v IE) barva
noshade čára bude bez stínu bez hodnoty

Příklad: <hr width="50" size="50" color="red" align="center" noshade> zobrazí vycentrovaný červený čtverec. Starší verze Mozilly a Opera neumějí změnit barvu, vykreslují vždy tmavě šedou. Novější Firefox barvu zadanou přes atribut color umí, ale nezvládá obarvení stylem.

Od roku 2023 se dá čára <hr> použít i uvnitř tagu <select>. Zobrazí oddělení možností.

Vertikální čára se v čistém HTML udělat nedá, resp. neexistuje na to tag. V praxi se vertikální čára dělá tak, že se nějakému tagu, nejčastěji tagu <div>, přidá pravý nebo levý okraj pomocí CSS stylu border (resp. jeho variant border-left, border-right apod.).

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.