Obdobne ako na začiatku tutoriálu, aj teraz zdôrazňujem, že z prezentovaných prvkov by ste nemali očakávať žiadne zázraky. Vzhľadovo totiž zatiaľ veľmi nevyzerali. Sú však zaujímavé v tom, že vďaka nim môžete logicky a sémanticky štruktúrovať svoje dokumenty.
Navigačné oblasti
Pomocou elementu nav môžete sémanticky zvýrazniť navigačné panely alebo iné oblasti pre ďalšie prvky. Tento element je teda určený hlavne na označenie hypertextových odkazov na iné stránky alebo doplňujúcich informácií.
Príklad:
<nav> <a href="index.html">Úvodná stránka</a> <a href="html5.html">HTML5 učenie</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
V rámci elementu nav môžete použiť ľubovoľné prvky. Navigáciu teda môžete stále definovať pomocou zoznamov. Ďalšie elementy však môžete tiež ľahko vložiť dovnútra elementu nav. Element nav môže byť v dokumente tiež viackrát.
Uvádzať detaily
Ďalším zaujímavým elementom je details. Pomocou neho môžete – a už názov elementu naznačuje – uviesť ďalšie informácie o obsahu. Treba si všimnúť, že element details je naozaj zaujímavý až v spojení s elementom summary. Viac o tomto elemente potom v ďalšej časti.
Najskôr príklad využitia elementu details:
<article>
<details>
<summary>Odkazy na článok...</summary>
<ul>
<li><a href="odkaz1.html">Odkaz 1</a></li>
<li><a href="odkaz2.html">Odkaz 2</a></li>
<li><a href="odkaz3.html">Odkaz 3</a></li>
</ul>
</details>
<details>
<summary>Zdroje k článku...</summary>
<ul>
<li><a href="zdroj1.html">Odkaz 4</a></li>
<li><a href="zdroj2.html">Odkaz 5</a></li>
<li><a href="zdroj3.html">Odkaz 6</a></li>
</ul>
</details>
</article>
Obsah elementu details zostáva skrytý pred návštevníkom, kým neuvidí summary element umiestnený vo vnútri elementu details.
Zaujímavé by to mohlo byť napríklad v súvislosti s prehrávačom videí. Aj na to máme príklad:
<video id="film" width="320" height="180" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
<details open>
<summary>Ovládanie videoprehrávača zobraziť/skryť</summary>
<p>
<button id="start" onClick="start()">Štart/Zastav</button>
<button id="stumm" onClick="stumm()">Stlmiť</button>
<button id="loud" onClick="loud()">Hlasnejší</button>
<button id="quiet" onClick="quiet()">Tichší</button>
</p>
</details>
Keď sa stránka načíta, zobrazuje sa len okno prehrávača.
Ak návštevník klikne na odkaz Zobraziť/Skryť, zobrazia sa obsahy, ktoré sú definované v rámci summary.
Podľa špecifikácie prehliadačov, ak sa nenájde žiadny element summary, zobrazí sa predvolený obsah.
Zaujímavé je tiež atribút open pre details.
<details open> … </details>
Ak je tento atribút nastavený, obsah summary elementu je pri načítaní stránky zobrazený priamo.
Zhrnutia
Teraz ešte raz trochu detailnejší pohľad na element summary.
<article>
<details>
<summary>Odkazy na článok...</summary>
<ul>
<li><a href="odkaz1.html">Odkaz 1</a></li>
<li><a href="odkaz2.html">Odkaz 2</a></li>
<li><a href="odkaz3.html">Odkaz 3</a></li>
</ul>
</details>
<details>
<summary>Zdroje k článku...</summary>
<ul>
<li><a href="zdroj1.html">Odkaz 4</a></li>
<li><a href="zdroj2.html">Odkaz 5</a></li>
<li><a href="zdroj3.html">Odkaz 6</a></li>
</ul>
</details>
</article>
V rámci summary je definovaný obsah, ktorý ešte nie je otvorený, v spojení s details. Vďaka summary je možné vložiť ďalšie informácie, ktoré sa zobrazia až pri potrebe.
Priznajme si, že rozkladacie a zložiteľné oblasti by sa dali samozrejme jednoducho realizovať aj pomocou JavaScriptu. Ak však je JavaScript v prehliadači deaktivovaný, aplikácia nebude fungovať. Preto je široká podpora pre details a summary žiaduca.
Marginálie a poznámky
Dodatočné informácie, poznámky, odkazy atď. je možné označiť v HTML5 pomocou elementu aside. Obsah označený týmto spôsobom sa nachádza v kontexte celého dokumentu, ale priamo k nemu nepatrí.
Upozorňujeme, že v špecifikácii HTML5 nie je stanovená dimenzia pre oblasť označenú cez aside. Preto by obsah aside mohol byť zobrazený napríklad ako marginália, alebo ako bočný panel.
Nasledujúci príklad ukazuje definíciu oblasti s aside.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Web-Apps erstellen (Teil 10): jQuery mobile (2)</h2>
<p>In diesem Tutorial wird die erste echte jQM-Seite erstellt. Voraussetzung dafür ist das HTML-Grundgerüst, das ihr bereits kennengelernt habt.</p>
<aside>
<h3>Weiterführendes</h3>
<ul>
<li><a href="#/fn1">Weiterführende Informationen gibt es…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="# ">Kontakt</a></li>
</ul>
</nav>
</aside>
</body>Pridanie časových údajov
Časové údaje je možné špeciálne označiť pomocou nového elementu time. Osobitnosťou tohto prvku je, že časové údaje sú čitateľné pre človeka aj stroj.
Časové údaje sa zapisujú do elementu
<p>Wir treffen uns am <time datetime="2014-04-15 19:00">15. April um 19 Uhr</time>. </p>
Na tomto mieste by sme ešte raz rád upozornili, že v aktuálnych prehliadačoch tento prístup nemá žiadne vizuálne účinky, ale je určený výlučne na zlepšenie strojovej čitateľnosti časových údajov.
Zvýrazňovanie textov
Pomocou elementu mark je možné zvýrazniť slová alebo celé textové pasáže. V špecifikácii HTML5 sa výslovne uvádza, že tento element by mal byť použitý len v súvislosti s textovými obsahmi. Okrem toho musí byť v určitom vzťahu k obsahu.
Príklad:
<p>In diesem Tutorial wird die erste echte jQM-Seite erstellt. Voraussetzung dafür ist das <mark>HTML-Grundgerüst</mark>, das ihr bereits kennengelernt habt.</p>
Ako je zvýraznenie implementované v prehliadačoch, nie je špecifikované.
Google Chrome a Firefox však obidva používajú žltý pozadie.
Označovanie dialógov
HTML5 tiež pamätá na osobitnú označenie dialógov. Na tento účel slúži element dialog. Momentálne je však element dialog podporovaný iba v prehliadačoch Safari a Google Canary, teda v developérskej verzii prehliadača.
K tomu tu je ďalší príklad:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Das ist der Inhalt der Box.</p>
<button id="hide">Schließen</button>
</dialog>
<button id="show">Zeige den Inhalt</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('dialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
Po stlačení tlačidla sa dialógové okno zobrazí. Pre správne fungovanie je v predchádzajúcom príklade do kombinácie HTML5, CSS a JavaScriptu.
