Itt ismét hangsúlyozni kell a kezdőtanfolyam elején, hogy ne várjatok csodákat a bemutatott elemektől. Optikailag ezek tényleg még nem sokat mutatnak. Azonban érdekesek abból a szempontból, hogy logikusan és szemantikusan strukturálhatjátok velük a dokumentumaitokat.
Navigációs területek
A nav elem segítségével navigációs sávokat vagy más területeket lehet szemantikusan megjelölni az extra elemekhez. Ennek az elemnek a fő feladata tehát főleg hiperhivatkozások más oldalakra vagy kiegészítő információkra történő jelölése.
Egy példa:
<nav> <a href="index.html">Kezdőlap</a> <a href="html5.html">HTML5 tanulás</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
A nav elemben bármilyen elemet használhattok. Tehát még mindig listákkal lehet meghatározni a navigációt. Azonban más elemek is könnyedén használhatók a nav elemen belül. Emellett a nav többször is szerepelhet egy dokumentumban.
Részletek megadása
Egy másik érdekes elem a details. Ezen keresztül – amint azt az elem neve is sejteti – további információkat lehet megadni egy tartalomról. Fontos, hogy a details elem csak akkor válik igazán érdekessé, ha az azt követő summary elemmel van összekapcsolva. Erről az elemről több a későbbiekben.
Elsőként egy példa a details használatára:
<article>
<details>
<summary>Hivatkozások a cikkhez...</summary>
<ul>
<li><a href="hivatkozas1.html">Hivatkozás 1</a></li>
<li><a href="hivatkozas2.html">Hivatkozás 2</a></li>
<li><a href="hivatkozas3.html">Hivatkozás 3</a></li>
</ul>
</details>
<details>
<summary>Források a cikkhez ...</summary>
<ul>
<li><a href="forras1.html">Hivatkozás 4</a></li>
<li><a href="forras2.html">Hivatkozás 5</a></li>
<li><a href="forras3.html"">Hivatkozás 6</a></li>
</ul>
</details>
</article>
A details elem tartalma addig rejtve marad a látogató előtt, amíg az a summary elemet nem kattintja meg a details-en belül.
Ez például érdekes lehet egy videolejátszóval kapcsolatban. Erre is egy példa:
<video id="video" 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>Videolejátszó vezérlők megjelenítése/elrejtése</summary>
<p>
<button id="start" onClick="start()">Indítás/Szünet</button>
<button id="némít" onClick="némít()">Némítás</button>
<button id="hangosít" onClick="hangosít()">Hangosítás</button>
<button id="csonkít" onClick="csonkít()">Csonkítás</button>
</p>
</details>
Amikor a weboldal betöltődik, csak a lejátszóablak látható elsőként.
Ha egy látogató azonban rákattint a be-/ki kapcsolási hivatkozásra, akkor a summary elemen belül meghatározott tartalmak megjelennek.
A specifikáció szerint, ha nem található summary elem, a böngészők alapértelmezett tartalmat fognak megjeleníteni.
Egyébként érdekes még a open attribútum a details esetében.
<details open> … </details>
Ha ez az attribútum be van állítva, akkor a summary elem tartalma az oldal betöltésekor rögtön látható lesz.
Összefoglalás
Tehát most egy kissé részletesebben vizsgáljuk meg a summary elemet.
<article>
<details>
<summary>Hivatkozások a cikkhez...</summary>
<ul>
<li><a href="hivatkozas1.html">Hivatkozás 1</a></li>
<li><a href="hivatkozas2.html">Hivatkozás 2</a></li>
<li><a href="hivatkozas3.html">Hivatkozás 3</a></li>
</ul>
</details>
<details>
<summary>Források a cikkhez ...</summary>
<ul>
<li><a href="forras1.html">Hivatkozás 4</a></li>
<li><a href="forras2.html">Hivatkozás 5</a></li>
<li><a href="forras3.html"">Hivatkozás 6</a></li>
</ul>
</details>
</article>
Így tehát a summary tag használatával a details taggben definiálható a még nem kinyitott tartalom. A summary segítségével hozzá lehet adni további információkat, amelyek csak szükség esetén jelennek meg.
Tény, hogy az összecsukható és kibontható területeket természetesen egyszerűen meg lehet valósítani JavaScript segítségével is. Ha azonban a JavaScript letiltva van a böngészőben, akkor az alkalmazás nem fog működni. Ezért szerencsés lenne a details és summary tagok széleskörű támogatásának hamarosan megtörténnie.
Szélsőségek és Margók
További információk, margók, hivatkozások stb. kiemelhetők az HTML5 aside elemével. Az ilyen módon kiemelt tartalom része a teljes dokumentumnak, de nem közvetlenül kapcsolódik hozzá.
Kérlek, vegye figyelembe, hogy az HTML5 specifikációban nem van meghatározva, hogy egy aside tag által kiemelt területre milyen dimenzió vonatkozzon. Így az aside tartalom például margóként, de akár oldalsávjaként is megjelenhet.
A következő példa mutatja egy aside terület definícióját.
<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>Időpontok hozzáadása
Az időpontok speciálisan kiemelhetők az új time elem segítségével. Ennek az elemnek a különlegessége, hogy az időpontok ember és gép által olvashatók.
Az időpontokat az emberek az időelembe írják. Hogy a böngészőknek lehetőséget adjunk az időinformációk kiolvasására, a time elem datetime attribútumát használjuk.
<p>Wir treffen uns am <time datetime="2014-04-15 19:00">15. April um 19 Uhr</time>. </p>
Itt még egyszer fontos megjegyezni, hogy a jelenlegi böngészőkben ez kezdetben nincs optikai hatással, csak a célja az időpontok gépi olvashatósága.
Szövegek kiemelése
A mark elem segítségével szavakat vagy teljes szövegrészeket lehet vizuálisan kiemelni. Az HTML5 specifikációja hangsúlyozza, hogy az elem csak szöveges tartalommal kell, hogy kapcsolatban legyen, valamint bizonyos kapcsolatban kell lennie a kontextussal.
Példa:
<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>
Hogyan jelenítik meg a böngészők a kiemelést, az nem meghatározott.
Mindazonáltal a Google Chrome és a Firefox mindkettő sárga háttérre helyezi a kiemelést.
Párbeszédelem kiemelése
A párbeszédek különleges kiemelésére is gondoltak az HTML5-ben. Ehhez a dialog elemet használhatjuk. Jelenleg a dialog elemet csak a Safari és a Google Canary, azaz a böngésző fejlesztői verziója támogatja.
Erre is adok egy példát:
<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>
Amint a gombra kattintanak, megjelenik a párbeszédablak. Ahhoz, hogy ez működjön, az előző példában HTML5, CSS és JavaScript kombinációjára van szükség.
