Hlavička a päta
Pomocou elementov header a footer je možné definovať hlavičku a pätku. Na definovanie hlavičky sa používa element head. Nemusí to však nutne znamenať hlavičku celej stránky. Rovnako sa s head môže označiť aj hlavička iných prvkov, ako sú sekcie a články.
Upozorňujeme: Neprehovárajte si element header s známym elementom head, ktorý definuje hlavičku HTML dokumentov, obsahujúci nadpis dokumentu, odkazy na štýly a JavaScript.
Pre celý dokument by použitie elementu header vyzeralo nasledovne:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Po aplikovaní na prvok section by to vyzeralo nasledovne:
<section>
<header>
<h1> Vytváranie webových aplikácií (časť 09): jQuery mobilná (1)</h1>
<p> jQuery je nepochybne jedno z najznámejších JavaScriptových rámcov.</p>
</header>
<p>
„Klasické“ webové stránky už tisíckrát využívajú jQuery. Špeciálne pre použitie vo webových aplikáciách bola vytvorená sesterská platforma jQuery Mobile (jQM). Tento rámec vám pomôže vytvoriť vašu webovú aplikáciu tak, aby vyzerala ako skutočná aplikácia. Dôvodov na to, aby ste venovali jQM dôkladnú pozornosť, je dosť.
</p>
<footer>
<p>Copyright by PSD-Tutorials.de</p>
</footer>
</section>Určite dávajte pozor, aby elementy footer a header neobsahovali žiadne ďalšie prvky header a footer.
Skupiny nadpisov
V súvislosti so sekciami vstupujú do hry nadpisy. Tieto nadpisy môžu byť klasické prvky h1 až h6. V HTML5 je však povolený aj prvok hgroup. V týchto prvkoch hgroup môže byť obsiatych viacero nadpisov.
Pre zobrazenie klasického HTML dokumentu, kde je štruktúra "obvyklá", definovaná pomocou prvkov hx.
<h1>
Knihy
</h1>
<h2>
Kapitola 1
</h2>
<h2>
Kapitola 2
</h2>
<h3>
Podkapitola 2.1
</h3>
<h3>
Podkapitola 2.2
</h3>
<h2>
Kapitola 3
</h2>
Táto definícia znamená nasledujúcu štruktúru:
Knihy
Kapitola 1
Kapitola 2
Podkapitola 2.1
Podkapitola 2.2
Kapitola 3
Avšak v prehliadači nie sú nadpisy odsadené.
Prvok hgroup je zaujímavý predovšetkým v súvislosti s novinárskymi textami. Tieto texty často pozostávajú z dvojčlennej hlavičky, ktorú tvoria hlavný nadpis a nadpis na striešku alebo päte. Príklad tohto aspektu by mal byť jasnejší.
<hgroup> <h1>Cloud OS</h1> <h2>Webové ako operačný systém</h2> </hgroup> <p>Tu sa začína obsah článku...</p>
Na tomto príklade je zrejmé, že nadpis na pätke nezároveň nezačína samostatnú sekciu v rámci článku. Skôr je súčasťou nadpisu článku. Práve toto je možné jednoducho zhrnúť pomocou prvku hgroup.
V rámci prvku hgroup sú povolené prvky h1 až h6.
Koncepcia kontúr
V HTML5 prichádza do hry aj koncepcia kontúry, v ktorej ide o spoluprácu medzi prvkom section a rôznymi prvky hx. V tomto koncepte sú, ako doteraz, nadpisy rozdelené na rôzne úrovne pomocou prvkov h1 až h6. Pričom h1 predstavuje najvyššiu úroveň a h6 najnižšiu úroveň. Tu teda v porovnaní s dřív, nedochádza ku žiadnej zmene. Teraz však môžu byť prvky hx definované v rámci prvkov section. A pri každom takomto prípade sa začíta zase odznova, avšak stále o úroveň nižšie.
Koncepcia kontúry v špecifikácii HTML5 nie je príliš zložitá, ale myšlienka za ňou je veľmi jednoduchá. V skutočnosti sa dá definovať obsahový záznam, ktorý robí štruktúru dokumentu strojovo čitateľnou.
Tu je ďalší príklad:
<h1>
Kapitola 1
</h1>
<section>
<h1>
Kapitola 2
</h1>
<section>
<h1>
Kapitola 3
</h1>
</section>
</section>
Prostredníctvom Outline konceptu v HTML5 vzniká nasledujúca štruktúra:
1. Kapitola 1
- Kapitola 2
- Kapitola 3
- Kapitola 3
Ďalší príklad by mal jasne ukázať efekt. Aj tu opäť začiatočný dokument.
<section>
<h1>Inštalácia a Konfigurácia</h1>
<section>
<h2>Inštalácia</h2>
<p>Všetko okolo témy inštalácie
</section> <section>
<h2>Konfigurácia</h2>
<p>Tu nájdete všetko ohľadom konfigurácie
</section>
<aside>
<p>Zaujímavé knihy k téme...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Vyhovujúca štruktúra vyzerá nasledovne:
1. Sekcia (Inštalácia a Konfigurácia)
1.1 Sekcia (Inštalácia)
1.2 Sekcia (Konfigurácia)
1.3 Sekcia (aside)
- Sekcia (footer)
A ešte jeden príklad:
<body>
<h1>Inštalácia a Konfigurácia</h1>
<h2>Inštalácia</h2>
<p>Všetko o téme Inštalácia
...ešte viac obsahu...
<section>
<h3>Požiadavky</h3>
<p>Všetko o téme inštalačné požiadavky
...ešte viac obsahu...
<h3>Prípravy</h3>
<p>Všetko o téme Prípravy
...ešte viac obsahu...
<h2>Konfigurácia</h2>
<p>Všetko o téme Konfigurácia
...ešte viac obsahu...
</section>
</body>
Výsledková štruktúra teda vyzerá nasledovne:
1. Inštalácia a Konfigurácia
1.1 Inštalácia
1.1.1 Požiadavky
1.1.2 Prípravy
1.2 Konfigurácia
Interné číslovanie sa teda vždy začína znova pri 1. Z Outline konceptu sú postihnuté iba tieto elementy:
• article
• aside
• nav
• section
Naopak, elementy header a footer sú momentálne preskočené.
Dávajte pozor, že Outline koncept zatiaľ nie je podporovaný prehliadačmi.
Avšak, je len otázkou času, kým sem zasiahnu výrobcovia prehliadačov. Prínosy Outline konceptu by totiž boli veľké. Uvažujte napríklad o automaticky generovaných navigačných paneloch. Avšak, aj tak platí: Aj keď štruktúra v špecifikovanej forme momentálne prehliadačmi ignorovaná bude, už teraz by ste mali snažiť sa logicky štruktúrovať vaše dokumenty. Takto získate určitú budúcnosť zabezpečenú pre vaše webové stránky.
