Strukturní tagy z HTML 5
Zbytečné strukturní tagy z HTML 5, protože nic nedělají. Píšu je sem, aby tato příručka byla kompletní.
Přehled strukturních tagů z HTML 5:
| Tag | Význam | Párový |
|---|---|---|
| header | záhlaví stránky ve smyslu viditelné hlavičky | ano |
| footer | patička stránky | ano |
| main | hlavní obsah stránky | ano |
| article | jeden článek, zejména pro situaci, kdy je na stránce článků víc | ano |
| aside | vedlejší obsah | ano |
| section | obsahová sekce, například kapitoly článku | ano |
| nav | navigace stránky | ano |
| figure | obalení obrázku nebo jiného obsahu s jeho souvisejícím obsahem | ano |
| figcaption | nadpis tagu figure | ano |
Strukturní tagy mají vymezovat na webové stránce logické oblasti, jako je hlavička, patička, navigace, hlavní obsah a podobně. Potíž je v tom, že čtenáři nebo uživateli stránky takové semantické odlišení v kódu stránky nepřinese vůbec nic. To povede k tomu, že autoři stránek budou laxní v jejich používání. Strukturní tagy budou nápomocné pouze robotům a strojům, které se stránky nějakým způsobem snaží automaticky zpracovávat.
Proč píšu, že ty tagy nic nedělají: protože fakt nic nedělají. Aby se zobrazily odlišně než jiný obsah, musí se jim přidat CSS styl. To už ale dnes jde udělat s univerzálními tagy <div> či <span>. Stejně dobře si můžete obsah obalit třeba tagy <pejsek> nebo <kočička> (žirafa ne: zvířátko nesmí začínat písmenkem s diakritikou) a přidat jim CSS styl - bude to fungovat úplně stejně, jako když použijete třeba tag <main>.
V dosavadní praxi se oblasti stránek uzavíraly do tagu <div>, kterému byla přidána class nebo id, a tak je bylo následně možno stylovat. Nevidím důvod, proč od zítřka místo <div class="header"> psát <header>. Jestli se vám to ale líbí, tak prosím, používejte je. Jak je libo.
Souhrnný příklad na strukturní tagy
<!doctype html>
<html>
<head>
<title>titulek stránky</title>
<style>/* styly na formátování všech těch tagů */ </style>
</head>
<body>
<header>hlavička, třeba s logem</header>
<nav>horní navigace</nav>
<main>
<article>
Vlastní text
článku.
<section>První kapitola, třeba i s podnadpisy</section>
<section>Druhá kapitola nebo jakkoli odlišný obsah</section>
<aside>Sloupeček, který ale ještě
patří do článku</aside>
</main>
<nav>spodní navigace</nav>
<aside>reklama</aside>
<footer>patička</footer>
</body>
</html>
Tento příklad je pouze příkladem, nikoli normou.
Následující přehled bude kapku nuda. Trochu vzrůšo bude až u figure, ale taky nic moc.
header
Zbytečný strukturní tag na vymezení hlavičky stránky. Před a za tagem se zalomí řádek. Aby tag header dělal něco dalšího, je nutno tag header nastylovat přes CSS. Například:
<style>
header {background-color: navy; padding-bottom: 20px;}
</style>
<header>
hlavička stránky, třeba s logem
</header>
footer
Zbytečný strukturní tag na vymezení patičky stránky. Před a za tagem se zalomí řádek. Aby dělal něco dalšího, je nutno tag footer nastylovat přes CSS.
main
Zbytečný strukturní tag na vymezení hlavního obsahu stránky. Tedy typicky hlavního textu s nadpisem, obrázků vztahujících se ke stránce, navigace uvnitř stránky atd. Naopak by dovnitř neměl patřit žádný obsah, který se k článku nevztahuje, typicky záhlaví, navigace a podobně. Doporučuji pravidlo, že co je i na jiných stránkách webu, by do <main> patřit nemělo.
Před a za tagem se zalomí řádek. Aby tag main dělal něco dalšího, je nutno tag header nastylovat přes CSS.
article
Zbytečný strukturní tag na vymezení článku. Vhodný hlavně v situaci, kdy je na jedné stránce článků víc. Před a za tagem se zalomí řádek. Aby tag article dělal něco dalšího, je nutno tag article nastylovat přes CSS.
aside
Zbytečný strukturní tag na vymezení dodatečného obsahu stránky. Před a za tagem se zalomí řádek. Aby dělal něco víc, je nutno tag aside nastylovat přes CSS. Očekávám mnoho článků na téma, jestli <aside> má, nebo nemá být součástí tagu <main>, i když je to úplně šumák.
nav
Zbytečný strukturní tag na vymezení navigace stránky. Před a za tagem nav se zalomí řádek, další vzhled je nutno nastylovat přes CSS. Tagů <nav> může na stránce být více.
figure
Strukturní tag, který by měl obalovat objekt stránky se všemi jeho popisnými údaji. Takže typicky obrázek s popiskem, ukázku kódu s popisem, video s popisem a podobně. Pro ten popisek je formálně vyhrazen tag <figcaption>.
Figure se ve výchozím stavu zobrazí jako blokový prvek s odsazením. Konkrétně jsou mu nastaveny okraje margin. Levý a pravý margin je 40px, horní a dolní 1em nebo 16px (podle prohlížeče). Výchozí stylování je tedy stejné jako u tagu <blockquote>.
Příklad
<figure>
<img src="obrazek.jpg">
<figcaption>Popisek obrázku</figcaption>
</figure>
figcaption
Tag pro popisek oblasti <figure>. Měl by se ve <figure> vyskytovat jenom jeden a na kraji (na začátku nebo na konci), ale to si pište, že se nic nestane, když bude vně <figure> nebo jich bude uvnitř víc. Výchozí formátování je pouze zalomení řádku před a po. Případné další formátování se dá udělat přes CSS a ani na <figcaption> nefunguje caption-side tak, jako funguje na tag <caption>.
Pozor, správně je figcaption, nikoli figurecaption. I když vlastně - nazvěte si to třeba kočičák, je to fuk.
Reklama
