Hierbij wordt aan het begin van de tutorial opnieuw vermeld dat je geen wonderen mag verwachten van de gepresenteerde elementen. Visueel gezien stellen ze namelijk nog niet veel voor. Ze zijn echter interessant omdat je hiermee je documenten logisch en semantisch kunt structureren.
Navigatiegebieden
Met het nav-element kunnen navigatiebalken of andere gebieden voor extra elementen semantisch worden gemarkeerd. Dit element is met name bedoeld om hyperlinks naar andere pagina's of aanvullende informatie te markeren.
Als voorbeeld:
<nav> <a href="index.html">Startpagina</a> <a href="html5.html">HTML5 leren</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Binnen nav kunt u willekeurige elementen gebruiken. U kunt de navigatie dus nog steeds definiëren met behulp van lijsten. Andere elementen kunnen echter ook probleemloos binnen nav worden gebruikt. nav kan ook meerdere keren in een document voorkomen.
Details opgeven
Een ander interessant element is details. Hiermee kun je - zoals de naam van het element al doet vermoeden - aanvullende informatie over een inhoud opgeven. Let op dat het details-element pas echt interessant wordt in combinatie met het summary-element. Meer over dit element zal dan volgen.
Laten we eerst een voorbeeld bekijken van het gebruik van details:
<article>
<details>
<summary>Verwijzingen naar het artikel...</summary>
<ul>
<li><a href="verwijzingen1.html">Link 1</a></li>
<li><a href="verwijzingen2.html">Link 2</a></li>
<li><a href="verwijzingen3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Bronvermeldingen bij het artikel ...</summary>
<ul>
<li><a href="bron1.html">Link 4</a></li>
<li><a href="bron2.html">Link 5</a></li>
<li><a href="bron3.html"">Link 6</a></li>
</ul>
</details>
</article>
De inhoud van het details-element blijft verborgen voor de bezoeker totdat deze het summary-element binnen details aanklikt.
Dit kan bijvoorbeeld interessant zijn in combinatie met een videospeler. Hier is ook een voorbeeld voor:
<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>Videospeler-bediening tonen/verbergen</summary>
<p>
<button id="start" onClick="start()">Start/Pauze</button>
<button id="stumm" onClick="stumm()">Dempen</button>
<button id="lauter" onClick="lauter()">Harder</button>
<button id="leiser" onClick="leiser()">Zachter</button>
</p>
</details>
Wanneer de pagina wordt geladen, is alleen het venster van de speler zichtbaar.
Als een bezoeker nu echter op de Toon/Verberg-link klikt, worden de inhoud gedefinieerd binnen summary getoond.
Volgens de specificatie moeten de browsers, wanneer er geen summary-element wordt gevonden, een standaardinformatie weergeven.
Ook interessant is overigens het open-attribuut voor details.
<details open> … </details>
Als dit attribuut is ingesteld, is de inhoud van het summary-element bij het laden van de pagina direct zichtbaar.
Samenvattingen
Laten we nu nog wat gedetailleerder kijken naar het summary-element.
<article>
<details>
<summary>Verwijzingen naar het artikel...</summary>
<ul>
<li><a href="verwijzingen1.html">Link 1</a></li>
<li><a href="verwijzingen2.html">Link 2</a></li>
<li><a href="verwijzingen3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Bronvermeldingen bij het artikel ...</summary>
<ul>
<li><a href="bron1.html">Link 4</a></li>
<li><a href="bron2.html">Link 5</a></li>
<li><a href="bron3.html"">Link 6</a></li>
</ul>
</details>
</article>
Binnen summary wordt dus samen met details de nog niet geopende inhoud gedefinieerd. Dankzij summary is het mogelijk om aanvullende informatie toe te voegen die pas wordt weergegeven wanneer dat nodig is.
Toegegeven, op- en neerklapbare secties kunnen natuurlijk ook heel eenvoudig met JavaScript worden gerealiseerd. Als JavaScript echter in de browser is uitgeschakeld, zal de toepassing niet werken. Daarom is een brede ondersteuning voor details en summary wenselijk.
Marges en marges
Aanvullende informatie, marges, cross-references enzovoort kunnen in HTML5 worden gemarkeerd met het aside-element. De hiermee gemarkeerde inhoud bevindt zich weliswaar in de context van het hele document, maar is er niet direct aan gerelateerd.
Houd er rekening mee dat in de HTML5-specificatie niet is vastgelegd welke dimensie moet worden toegepast op een met aside gemarkeerd gebied. Daarom kan de aside-inhoud bijvoorbeeld worden weergegeven als marginaal, maar ook als zijbalk.
Het volgende voorbeeld toont de definitie van een aside-gebied.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Web-apps maken (Deel 10): jQuery mobiel (2)</h2>
<p>In deze tutorial wordt de eerste echte jQM-pagina gemaakt. De vereiste hiervoor is de HTML-basisstructuur die je al kent.</p>
<aside>
<h3>Meer informatie</h3>
<ul>
<li><a href="#/fn1">Er is meer informatie beschikbaar…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigatie</h2>
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="# ">Contact</a></li>
</ul>
</nav>
</aside>
</body>Tijd toevoegen
Tijd kan speciaal worden gemarkeerd met het nieuwe tijd-element. De bijzonderheid van dit element is dat de tijdsaanduidingen leesbaar zijn voor zowel mensen als machines.
Voor mensen worden de tijdsaanduidingen in het tijdselement geschreven. Om browsers de kans te geven de tijdinformatie ook te kunnen uitlezen, wordt het tijdstip-attribuut van het tijd-element gebruikt.
<p>We ontmoeten elkaar op <tijd datetime="2014-04-15 19:00">15 april om 19.00 uur</tijd>. </p>
Op dit punt nogmaals de opmerking dat dit momenteel in de huidige browsers geen visuele effecten heeft, maar uitsluitend bedoeld is om tijdsaanduidingen machinaal leesbaar te maken.
Benadrukte tekst
Met het mark-element is het mogelijk om woorden of hele tekstpassages visueel te benadrukken. In de HTML5-specificatie wordt expliciet vermeld dat het element alleen in combinatie met tekstuele inhoud moet worden gebruikt. Bovendien moet het een specifieke relatie hebben met de context.
Een voorbeeld:
<p>In deze tutorial wordt de eerste echte jQM-pagina gemaakt. De vereiste hiervoor is de <mark>HTML-basisstructuur</mark> die je al kent.</p>
Hoe browsers de benadrukking weergeven, is niet vastgelegd.
Zowel Google Chrome als Firefox gebruiken echter een gele achtergrond.
Dialogen markeren
HTML5 voorziet ook in de afzonderlijke markering van dialogen. Hiervoor is het dialog-element beschikbaar. Op dit moment wordt het dialog-element echter alleen ondersteund door Safari en Google Canary, de ontwikkelaarsversie van de browser.
Hier is nogmaals een voorbeeld van:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Dit is de inhoud van de box.</p>
<button id="hide">Sluiten</button>
</dialog>
<button id="show">Toon de inhoud</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>
Zodra op de knop wordt geklikt, is de dialoog te zien. Om dit te laten werken, wordt in het vorige voorbeeld gebruik gemaakt van een combinatie van HTML5, CSS en JavaScript.
