Hlavička a zápatí
Pomocí elementů header a footer lze definovat hlavičku a patu. Pro definici hlavičky se používá element head. Přitom to nemusí nutně být hlavička celé stránky. S elementem head lze také označit hlavičku jiných elementů, jako jsou sekce a články.
Upozornění: Nepřekládejte element header s běžným elementem head, který definuje hlavičku HTML dokumentů obsahující název dokumentu, odkazy na styly a skripty JavaScriptu.
Pro celý dokument by použití elementu header vypadalo následovně:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Použití s elementem section by vypadalo následovně:
<section>
<header>
<h1> Vytváření webových aplikací (část 09): jQuery mobile (1)</h1>
<p> jQuery je bezesporu jedním z nejznámějších JavaScriptových frameworků.</p>
</header>
<p>
Na „klasických“ webových stránkách je jQuery již tisíckrát použita. Pro použití ve webových aplikacích byl vytvořen sesterský framework jQuery mobile (jQM). Tento framework vám pomáhá, aby se vaše webová aplikace okamžitě podobala skutečné aplikaci. Dostatečný důvod podívat se podrobněji na jQM.
</p>
<footer>
<p>Copyright by PSD-Tutorials.de</p>
</footer>
</section>Ujistěte se, že elementy footer a header neobsahují žádné další elementy header a footer.
Skupina nadpisů
V souvislosti sekcími se objevují nadpisy. Tyto nadpisy mohou být klasickými elementy h1 až h6. V HTML5 je však povolen také element hgroup. Uvnitř těchto elementů hgroup mohou být opět obsaženy více nadpisů.
Podívejte se nejprve na klasický HTML dokument, kde je "běžná" struktura definována prostřednictvím elementů hx.
<h1>
Kniha
</h1>
<h2>
Kapitola 1
</h2>
<h2>
Kapitola 2
</h2>
<h3>
Podkapitola 2.1
</h3>
<h3>
Podkapitola 2.2
</h3>
<h2>
Kapitola 3
</h2>
Tato definice znamená následující strukturu:
Kniha
Kapitola 1
Kapitola 2
Podkapitola 2.1
Podkapitola 2.2
Kapitola 3
V prohlížeči však nadpisy nejsou odsazeny.
Element hgroup je zajímavý zejména v souvislosti s novinářskými texty. Ty často sestávají z dvoudílného nadpisu, který se skládá z hlavního názvu a nadpisu nad nebo pod ním. Příklad tohoto aspektu by měl vše ujasnit.
<hgroup> <h1>Cloudový OS</h1> <h2>Web jako operační systém</h2> </hgroup> <p>Zde začíná obsah článku …</p>
Z tohoto příkladu je zřejmé, že nadpis podruhé nezačíná nový oddíl uvnitř článku. Spíše jde o část nadpisu článku. Toto lze shrnout pomocí elementu hgroup.
Uvnitř elementu hgroup jsou povoleny elementy h1 až h6.
Koncept struktury obsahu
V HTML5 vstupuje do hry koncept struktury obsahu, kde jde o spolupráci elementů section a různých elementů hx. V tomto konceptu jsou nadpisy, podobně jako doposud, pomocí elementů h1 až h6 rozděleny do různých úrovní. Přičemž h1 odpovídá nejvyšší úrovni a h6 nejnižší. Zde tedy není žádná změna ve srovnání s minulostí. Nyní mohou být elementy hx definovány uvnitř elementů section. A při každém takovém začátku se počítání začne znovu, avšak vždy o úroveň níže.
Koncepce struktury obsahu vypadá v HTML5 specifikaci poměrně komplikovaně, ale myšlenka za tím je velmi jednoduchá. Skutečně umožňuje definovat obsahový soupis, který činí strukturu dokumentu strojově čitelnou.
Zde je k tomu příklad:
<h1>
Kapitola 1
</h1>
<section>
<h1>
Kapitola 2
</h1>
<section>
<h1>
Kapitola 3
</h1>
</section>
</section>
Podle koncepce obrysování v HTML5 vzniká následující struktura:
1. Kapitola 1
- Kapitola 2
- Kapitola 3
- Kapitola 3
Další příklad má ilustrovat efekt. I zde nejprve výchozí dokument.
<section>
<h1>Instalace a konfigurace</h1>
<section>
<h2>Instalace</h2>
<p>Vše kolem instalace
</section> <section>
<h2>Konfigurace</h2>
<p>Zde najdete vše k tématu konfigurace
</section>
<aside>
<p>Zajímavé knihy k tématu...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
Vzniklá struktura vypadá následovně:
1. Sekce (Instalace a konfigurace)
1.1 Sekce (Instalace)
1.2 Sekce (Konfigurace)
1.3 Sekce (aside)
- Sekce (footer)
A ještě jeden příklad:
<body>
<h1>Instalace a konfigurace</h1>
<h2>Instalace</h2>
<p>Vše k tématu instalace
...ještě více obsahu...
<section>
<h3>Předpoklady</h3>
<p>Vše k tématu požadavky na instalaci
...ještě více obsahu...
<h3>Přípravy</h3>
<p>Vše k tématu přípravy
...ještě více obsahu...
<h2>Konfigurace</h2>
<p>Vše k tématu konfigurace
...ještě více obsahu...
</section>
</body>
Výsledná struktura vypadá takto:
1. Instalace a konfigurace
1.1 Instalace
1.1.1 Předpoklady
1.1.2 Přípravy
1.2 Konfigurace
Interní počítání zde tedy začíná vždy znovu u 1. Z koncepce obrysování jsou postiženy pouze tyto prvky:
• article
• aside
• nav
• section
Opačně zůstávají externí prvky header a footer.
Upozorňujeme, že koncept obrysování aktuálně ještě není podporován prohlížeči.
Avšak bude to jen otázkou času, než výrobci prohlížečů začnou jednat. Přínosy konceptu obrysování jsou příliš velké. Můžete si například představit automaticky generované navigační panely. I tak platí: I když jsou struktury v uvedené podobě momentálně prohlížeči ignorovány, měli byste již teď snažit se o logickou strukturu vašich dokumentů. Tak získáte určitou budoucí jistotu pro vaše webové stránky.
