Också här vill jag i början av handledningen nämna att ni inte ska förvänta er mirakler av de presenterade elementen. Visuellt sett ser de faktiskt inte mycket ut ännu. De är dock intressanta med tanke på att ni med dem kan strukturera era dokument logiskt och semantiskt.
Navigeringsområden
Med nav-elementet kan ni semantiskt markera navigeringsfält eller andra områden för extra element. Detta element är avsett främst för att markera länkar till andra sidor eller till kompletterande information.
Ett exempel:
<nav> <a href="index.html">Startsida</a> <a href="html5.html">Lära sig HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Inom nav kan ni använda vilka element som helst. Ni kan fortfarande definiera navigeringen med listor. Andra element kan dock också användas utan problem inuti nav. Dessutom kan nav förekomma flera gånger i en dokument.
Angivande av detaljer
Ännu ett intressant element är details. Med detta kan man - och detta antyds redan av elementets namn - ange ytterligare information om en innehåll. Observera att details-elementet blir riktigt intressant först i samband med summary-elementet. Mer om detta element följer sedan.
Först ett exempel på användning av details:
<article>
<details>
<summary>Referenser till artikeln...</summary>
<ul>
<li><a href="referens1.html">Länk 1</a></li>
<li><a href="referens2.html">Länk 2</a></li>
<li><a href="referens3.html">Länk 3</a></li>
</ul>
</details>
<details>
<summary>Källor till artikeln ...</summary>
<ul>
<li><a href="källa1.html">Länk 4</a></li>
<li><a href="källa2.html">Länk 5</a></li>
<li><a href="källa3.html"">Länk 6</a></li>
</ul>
</details>
</article>
Innehållet i details-elementet hålls dolt tills besökaren klickar på summary-elementet inuti details.
Detta kan vara intressant till exempel i samband med en videospelare. Även här är ett exempel:
<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>Visa/dölj videoavspelar-kontroller</summary>
<p>
<button id="start" onClick="start()">Starta/Pausa</button>
<button id="mute" onClick="mute()">Ljud av/på</button>
<button id="louder" onClick="louder()">Högre ljud</button>
<button id="quieter" onClick="quieter()">Lägre ljud</button>
</p>
</details>
När sidan laddas visas endast spelarfönstret till att börja med.
När en besökare klickar på Visa/dölj-länken visas innehållet som definierats inuti summary.
Enligt specifikationen ska webbläsarna, om inget summary-element hittas, visa en standardtext.
Och för övrigt är attributet open för details också intressant.
<details open> … </details>
Om detta attribut anges, visas innehållet i summary-elementet direkt när sidan laddas.
Sammanfattningar
Nu tar vi en lite mer detaljerad titt på summary-elementet.
<article>
<details>
<summary>Referenser till artikeln...</summary>
<ul>
<li><a href="referens1.html">Länk 1</a></li>
<li><a href="referens2.html">Länk 2</a></li>
<li><a href="referens3.html">Länk 3</a></li>
</ul>
</details>
<details>
<summary>Källor till artikeln ...</summary>
<ul>
<li><a href="källa1.html">Länk 4</a></li>
<li><a href="källa2.html">Länk 5</a></li>
<li><a href="källa3.html"">Länk 6</a></li>
</ul>
</details>
</article>
Inom summary definieras innehållet som ännu inte är öppnat i samband med details. Tack vare summary kan ytterligare information infogas som endast visas vid behov.
Utan tvekan kan man förstås också enkelt realisera utdragbara och hopfällbara områden med JavaScript. Men om JavaScript är inaktiverat i webbläsaren kommer applikationen inte att fungera. Därför är en snabb och bred support för details och summary önskvärd.
Marginaler och sidorubriker
Ytterligare information, marginaler, korsreferenser osv. kan utmärkas i HTML5 med aside-elementet. Innehållet som utmärks på detta sätt finns i sammanhanget med hela dokumentet men är inte direkt relaterat till det.
Observera att det inte är specificerat i HTML5-specifikationen vilka dimensioner som ska gälla för ett område utmärkt med aside. Därför kanas asides-innehållet exempelvis visas som en marginal eller som en sidorubrik.
Följande exempel visar definitionen av ett aside-område.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Skapa webbappar (Del 10): jQuery mobile (2)</h2>
<p>I den här handledningen skapas den första riktiga jQM-sidan. Förutsättningen för detta är HTML-grundstrukturen som du redan har lärt dig.</p>
<aside>
<h3>Vidare läsning</h3>
<ul>
<li><a href="#/fn1">Det finns mer information att läsa…</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#">Startsida</a></li>
<li><a href="# ">Kontakt</a></li>
</ul>
</nav>
</aside>
</body>Lägga till tidsangivelser
Tidsangivelser kan utmärkas särskilt med det nya time-elementet. En speciell egenskap hos detta element är att tidsangivelserna är läsbara både för människor och maskiner.
För människor skrivs tidsangivelserna i time-elementet. För att ge webbläsarna möjlighet att också läsa tidsinformationerna används datetime-attributet för time-elementet.
<p>Vi ses kl. <time datetime="2014-04-15 19:00">den 15 april kl. 19</time>. </p>
På denna punkt bör det nämnas att det i de aktuella webbläsarna till att börja med inte har någon optisk effekt, utan är uteslutande avsett att göra tidsangivelser läsbara för maskiner.
Framhäva text
Med mark-elementet finns möjligheten att visuellt framhäva ord eller hela textpassager. I HTML5-specifikationen betonas att elementet endast bör användas i samband med textinnehåll. Dessutom måste det ha ett visst samband med kontexten.
Ett exempel:
<p>I den här handledningen skapas den första riktiga jQM-sidan. Förutsättningen för detta är <mark>HTML-grundstrukturen</mark> som du redan har lärt dig.</p>
Det är inte fastställt hur webbläsarna implementerar framhävningen.
Google Chrome och Firefox använder dock båda en gul bakgrund för framhävningen.
Utmärka dialoger
Också för särskild utmärkning av dialoger har det tänkts i HTML5. För detta finns dialog-elementet. För närvarande stöds dialog-elementet dock endast av Safari och Google Canary, alltså webbläsarens utvecklarversion.
Här är ett exempel:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Detta är innehållet i rutan.</p>
<button id="hide">Stäng</button>
</dialog>
<button id="show">Visa innehållet</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 klickas visas dialogen. För att detta ska fungera använder det tidigare exemplet en kombination av HTML5, CSS och JavaScript.
