Også her i begyndelsen af vejledningen skal det igen bemærkes, at I ikke bør forvente mirakler fra de præsenterede elementer. Visuelt set gør de faktisk ikke meget endnu. De er dog interessante, fordi I kan strukturere jeres dokumenter logisk og semantisk med dem.
Navigationsområder
Via elementet nav kan navigationsbjælker eller andre områder til yderligere elementer semantisk markeres. Dette element er primært tænkt til at markere hyperlinks til andre sider eller yderligere informationer.
Et eksempel:
<nav> <a href="index.html">Startside</a> <a href="html5.html">Lære HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Inden for nav kan I bruge vilkårlige elementer. I kan stadig definere navigationen ved hjælp af lister. Andre elementer kan dog også nemt indsættes inden for nav. nav kan desuden forekomme flere gange i et dokument.
Angive detaljer
Et andet interessant element er details. Med dette kan man - som elementnavnet allerede antyder - angive yderligere oplysninger om en indhold. Bemærk, at details-elementet først bliver interessant i kombination med summary-elementet. Mere om dette element følger bagefter.
Først et eksempel på brugen af details:
<article>
<details>
<summary>Henvisninger til artiklen...</summary>
<ul>
<li><a href="henvisning1.html">Link 1</a></li>
<li><a href="henvisning2.html">Link 2</a></li>
<li><a href="henvisning3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Kildehenvisninger til artiklen ...</summary>
<ul>
<li><a href="kilde1.html">Link 4</a></li>
<li><a href="kilde2.html">Link 5</a></li>
<li><a href="kilde3.html"">Link 6</a></li>
</ul>
</details>
</article>
Indholdet af details-elementet forbliver skjult for besøgende, indtil de klikker på summary-elementet inde i details.
Dette kan f.eks. være interessant i forbindelse med en videospiller. Også her er et eksempel:
<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>Videoafspiller styring til/fra</summary>
<p>
<button id="start" onClick="start()">Start/Pause</button>
<button id="stumm" onClick="stumm()">Dæmp lyden</button>
<button id="lauter" onClick="lauter()">Højere</button>
<button id="leiser" onClick="leiser()">Lavere</button>
</p>
</details>
Når siden indlæses, er det kun vinduet til afspilleren, der er synligt i starten.
Hvis en besøgende klikker på linket til at skjule og vise, vises de indhold, der er defineret inde i summary.
Ifølge specifikationen vil browsere vise en standardindhold, hvis der ikke findes et summary-element.
Det er i øvrigt også interessant med attributtet open for details.
<details open> … </details>
Hvis denne attribut er angivet, vises indholdet af summary-elementet direkte, når siden indlæses.
Opsummeringer
Lad os nu kaste et lidt mere detaljeret blik på summary-elementet.
<article>
<details>
<summary>Henvisninger til artiklen...</summary>
<ul>
<li><a href="henvisning1.html">Link 1</a></li>
<li><a href="henvisning2.html">Link 2</a></li>
<li><a href="henvisning3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Kildehenvisninger til artiklen ...</summary>
<ul>
<li><a href="kilde1.html">Link 4</a></li>
<li><a href="kilde2.html">Link 5</a></li>
<li><a href="kilde3.html"">Link 6</a></li>
</ul>
</details>
</article>
Inden for summary defineres indholdet, der endnu ikke er åbnet, i forbindelse med details. Takket være summary kan yderligere informationer integreres, som kun bliver vist ved behov.
Indrømmet, det ville være muligt at implementere åbne og lukke områder med JavaScript. Hvis JavaScript dog er deaktiveret i browseren, vil applikationen ikke fungere. Derfor er det ønskeligt med en snarlig bred support til details og summary.
Marginaler og marginalier
Yderligere informationer, marginaler, krydshenvisninger osv. kan markeres i HTML5 med aside-elementet. Indholdet, der er markeret derved, er placeret i forbindelse med hele dokumentet, men er ikke direkte tilknyttet det.
Bemærk venligst, at i HTML5-specifikationen ikke er fastlagt, hvilke dimensioner der skal gælde for et område markeret med aside. Derfor kan indholdet i aside f.eks. vises som en marginalie eller en sidebar.
Det følgende eksempel viser definitionen af et aside-område.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Opret web-apps (Del 10): jQuery mobile (2)</h2>
<p>I denne tutorial oprettes den første rigtige jQM-side. Forudsætningen for dette er den HTML-struktur, du allerede har lært at kende.</p>
<aside>
<h3>Yderligere information</h3>
<ul>
<li><a href="#/fn1">Der er yderligere oplysninger...</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#">Forside</a></li>
<li><a href="# ">Kontakt</a></li>
</ul>
</nav>
</aside>
</body>Tilføjelse af tidsangivelser
Tidsangivelser kan specielt markeres med det nye time-element. Dette elements særegenhed er, at tidsangivelserne er læsbare for både mennesker og maskiner.
Tidsangivelserne skrives ind i time-elementet for mennesker. For at give browsere mulighed for også at kunne læse tidsinformationerne, anvendes attributtet datetime for time-elementet.
<p>Vi mødes den <time datetime="2014-04-15 19:00">15. april kl. 19:00</time>. </p>
Her skal det igen bemærkes, at der i de nuværende browsere ikke umiddelbart er nogen visuelle virkninger, men det er udelukkende beregnet til at gøre tidsangivelser maskinlæsbare.
Fremhævning af tekster
Med mark-elementet er der mulighed for at visuelt fremhæve ord eller hele tekstpassager. Det specificeres i HTML5-specifikationen, at elementet kun skal bruges i forbindelse med tekstindhold og skal have en bestemt relation til konteksten.
Et eksempel:
<p>I denne tutorial oprettes den første rigtige jQM-side. Forudsætningen for dette er <mark>HTML-strukturen</mark>, som du allerede kender.</p>
Hvordan browsere implementerer fremhævningen, er ikke fastlagt.
Både Google Chrome og Firefox bruger dog en gul baggrund til dette.
Markering af dialoger
Også til den separate markering af dialoger er der tænkt på i HTML5. Til dette formål findes dialog-elementet. I øjeblikket understøttes dialog-elementet dog kun af Safari og Google Canary, altså udviklerversionen af browseren.
Også her et eksempel:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Dette er indholdet af boksen.</p>
<button id="hide">Luk</button>
</dialog>
<button id="show">Vis indholdet</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>
Når knappen klikkes, vises dialogen. For at det hele fungerer, er der i det foregående eksempel benyttet en kombination af HTML5, CSS og JavaScript.
