Základní strukturální tagy v HTML5

Web se neustále vyvíjí. Jazyk HTML 4 je tu s námi už pěknou řadu let a tvůrcům webového obsahu sloužil dobře. Avšak po čase začali mnozí narážet na různá omezení. Bylo v podstatě jen otázkou času, kdy přijde novější verze - HTML5. Ta s sebou přináší nové, účinnější a hlavně jednodušší zápisy. Dále zavádí širokou škálu funkcí pro práci třeba s formuláři, multimédii, strukturami a sémantikou. Dobrých článků na téma HTML5 kolují po internetu spousty. Nechci se znovu pouštět do popisu samotného jazyka HTML5. V tomto článku bych se rád zaměřil na nové strukturální tagy, které přidávají do stránek další sémantický význam, a poskytl jejich základní přehled.

<div>

HTML5 se zaměřilo převážně na zvýšení přehlednosti zdrojového kódu a doplnění chybějící sémantiky. Většina stránek je dnes tvořena obvyklými částmi, jako je hlavička, nějaké sloupce a obvykle patička. Tyto části jsou spojovány do logických celků pomocí tagu <div> a jeho atributů id nebo class, protože v současné verzi HTML 4 žádné speciální tagy na toto rozlišení nejsou. Ten ale nenese žádný sémantický význam, a tak bývá obtížné celý dokument strojově zpracovávat. Slouží tak prakticky jen k rozdělení dokumentu na části, kterým pak dáváme určitý vzhled pomocí CSS stylů.

Specifikace HTML5 přidala několik poměrně zajímavých a užitečných tagů pro strukturování vašeho obsahu. Z velké části dokážou tyto značky nahradit běžné používání <div> položek v našem zdrojovém kódu. Zde je jejich základní přehled:

section - reprezentuje různé části stránek, např. kapitoly
article - reprezentuje nezávislé textové části stránky, např. komentáře, články
header - reprezentuje hlavičku stránky
nav - reprezentuje část stránky, která je určena k navigaci, nejčastěji menu
aside - reprezentuje obsah, který je nějakým způsobem spjat s hlavním obsahem stránky, ale nemusí být nutně jeho součástí
footer - reprezentuje patičku stránky, může obsahovat informace o autorovi, autorských právech nebo odkazy na související dokumenty

<section>

Element <section> použijeme přesně v případech, kdy chceme sdružit dohromady část dokumentu se souvisejícím obsahem. HTML5 specifikace přesně říká:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Takže v podstatě vše uvnitř elementu <section> by mělo jít zároveň uvést jedním společným nadpisem.

Dobré vysvětlení dává například Ian Devlin, autor několika známých publikací o HTML5, na svém blogu. Uvádí, že dobrou analogii lze nalézt také v běžných novinách. Ty se obvykle dělí do sekcí: zprávy, sport, nemovitosti atd. Každá z nich má svůj základní nadpis a obsahuje informace, které se vztahují právě k tomuto nadpisu. Je ale také pravděpodobné, že každá z těchto sekcí bude obsahovat články, což nás vede pěkně k následujícímu elementu…

<article>

Znovu si ukažme co říká HTML5 specifikace o tomto elementu:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Budeme-li pokračovat v naší novinové analogii, tak je pravda, že zmíněná sportovní sekce bude obsahovat články, které jsou výhradně jen o sportu. Každý článek má svůj vlastní nadpis, svůj odlišný příběh, je zcela samostatný a nezávislý za zbytku stránky. Tento obsah by tedy mělo být možné vyjmout a zobrazit například v RSS čtečce.

Vrátíme-li se k samotné struktuře stránky, tak nic nám nebrání tagy <article> a <section> do sebe libovolně zanořovat. Pokud si to dokument vyžádá, je možné, aby článek obsahoval další sekce, ale také je možné, aby sekce obsahovala i další články.


  
    
      Nadpis
    
    
      Bla bla bla...
    
  
  
    
      Nadpis
    
    
      Bla bla...

<header> a <footer>

Téměř každý HTML dokument má svoji hlavičku a patičku. Specifikace HTML5 i na toto pamatuje a přidala proto tyto dva elementy <header> a <footer>, aby bylo možné sémanticky rozlišit tyto části dokumentu. Neexistuje žádné omezení na počet použití těchto tagů na stránce. V podstatě každá sekce nebo článek může mít svůj specifický nadpis a patičku. Element <header> často obsahuje nadpis <h1>, <h2>, <h3>, … <h6>. Běžné je i umístění formuláře pro vyhledávání nebo třeba loga stránky.


  Toto je nadpis
  Rychlý průvodce HTML5 elementy

Patička obsahuje informace o dané sekci, ke které se vztahuje. Obvykle se jedná o informace o autorovi, odkazy na další zdroje informací, copyright či různá „like-tlačítka“. Tento element se hodí i pro moderní obří patičky.

Copyright © 2012

Není podmínkou aby element <header> musel být nahoře v dokumentu. Stejně tak i patička <footer> nemusí být nutně umístěna na konci. Je však doporučeno toto pořadí dodržet, protože zdrojový kód dokumentu je pak lépe čitelný.

<nav>

Tento element označuje tu část stránky, která je určena k navigaci čtenáře. Typicky se jedná o seznamy odkazů, které:

slouží jako primární/sekundární navigace webu
slouží k orientaci v dlouhém textu

Mějte přitom na paměti, že ne všechny seznamy odkazů musí být nutně uzavřeny uvnitř tagu <nav>. Typickým příkladem jsou dlouhé patičky, které obsahují řadu informací jako pravidla portálu, copyright, odkazy na stránku s kontakty apod. Pro tyto účely postačí, když je vše uzavřeno uvnitř tagu <footer>. Ukázkou může být např. web společnosti SNOWBOARD ZEZULA, na jehož tvorbě jsem se spolupodílel.

<aside>

Posledním prvkem, o kterém bych se rád zmínil, je element <aside>. Reprezentuje takovou část stránky, která je určitým způsobem spjata s hlavním obsahem, ale nemusí být nutně jeho součástí. Často můžeme vidět podobné části stránky zobrazené jako levé či pravé sloupce vedle textu. Typickým příkladem uplatnění je zobrazení sekundární navigace, reklamního banneru, odkazů pro sdílení na sociálních sítích či dalších vedlejších informací.

Závěrem

V HTML5 se rozhodně nestává používání obyčejného tagu <div> nějakým přežitkem. Uplatnění tento element stále najde v situacích, kdy nepotřebujeme seskupeným prvkům přidávat nějakou další sémantiku. Například chceme čistě jen „ostylovat“ určitou část webu.

Seznam nových HTML5 tagů je samozřejmě větší. Já jsem vyjmenoval pouze základních šest prvků. Ale už i použití těchto tagů výrazně mění sémantiku dokumentu a také pro samotné vývojáře se stává kód webové stránky čitelnější.