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

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.