Home » Školení » Tvorba WWW – HTML » Blokové tagy

Blokové tagy

Jsou všechny, za 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.


V praxi to znamená, že se roztáhnou na celou šířku stránky. Pokud text dosáhne konce stránky, zalomí se a pokračuje na dalším řádku.

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.

<body>
<p>Odstavec </p>
</body>

Tag <p>, atribut align

Tag <p> může obsahovat vlastnost align, která definuje zarovnání textů. Může nabývat hodnot left, right, justify a center.

<p align=“right“>text vpravo</p>
<p align=“left“>
text vlevo</p>
<p align=“center“>
text ve středu</p>
<p align=“justify“>
text zarovnaný do bloku</p>

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í.

Nějaký text. <br>Tento text je o řádek níž.

Tag <br>, atribut 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=right: Text čeká na ukončení objektů u pravého okraje
  • clear=left: Text čeká na ukončení objektů u levého okraje
  • clear=all: Text čeká na ukončení objektů u obou okrajů
<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. Pozor, v CSS není hodnota all, ale both. Proto výsledek tohoto zdrojového kódu by byl totožný s předchozím.

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ý).

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

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

Na logické členění textu se používají nadpisy.

HTML zná celkem šest úrovní nadpisů, které můžete na svých stránkách použít pro lepší zdůraznění struktury dokumentů.

Nadpisy značíme tagy <hn></hn>, kde n je úroveň zanoření nadpisu. Takže například nadpis první úrovně bude označen znaky <h1></h1> a nadpis nejjnižší (šesté) úrovně označíme takto <h6></h6>. Aby vám byly nadpisy zcela jasné, vyzkoušejte si, jak se zobrazí tento kód (pokud nebude uvedeno jinak, bude vždy ukázkový úsek HTML kódu pouze část mezi tagy <body></body>):

<h1>Hlavní nadpis (1. úroveň)</h1>
<h2>Důležitý nadpis (2. úroveň)</h2>
<h3>Další důležitý nadpis (3. úroveň)</h3>
<h4>Poměrně malý nadpis (4. úroveň)</h4>
<h5>Zanořený nadpis (5. úroveň)</h5>
<h6>Malý nadpis (6. úroveň)</h6>

Nadpis je také blokový element, zobrazuje se obvykle tlustě a s mezerou nad a pod textem.

Některé z uvedených tagů mají sémantický význam. Tzn. že určují, o jaký obsah se jedná.

Pomocí vhodně nastaveného tagu FONT dosáhneme prakticky stejného vizuálního výsledku, přesto je ale důležité nadpisy používat. Proč? Člověk přisuzuje důležitost textu podle jeho vzhledu. Ale pro počítač (třeba indexovací roboti Google) by bylo krajně nevýhodné napřed zjišťovat, jak text v reálu vypadá. Ten se řídí jedině sémantikou použitých tagů a podle té rozlišuje text na důležitý a méně důležitý.

Proto textu umístěnému v H1 věnuje mnohem větší pozornost než textu ve FONT. Důležitost textu také klesá s použitým druhem nadpisu, proto je vhodné H1 užít na hlavní nadpis stránky a ostatní nižší nadpisy na hierarchické rozčlenění obsahu.

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>, atribut cite

Atribut cite 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á.

<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.

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.

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:

  • 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
<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.

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.)