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 | Význam | Hodnoty |
|---|---|---|
| align | zarovnání odstavce | left | right | center | justify |
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 zobrazení je jediný rozdíl: <br> kolem sebe nedělá vertikální mezery.
- Z typografického hlediska odpovídá <br> "měkkému entru" aneb "vynucenému zalomení řádku".
- Pokud je tag <br> použit uprostřed odstavce, další text se považuje za pokračování toho odstavce, nikoli za nový. Takže kupříkladu pokračuje nastavení zarovnání.
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.
| 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).
| 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):
| 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.
| 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
