Også her vil det igjen påpekes i begynnelsen av opplæringen at du ikke bør forvente mirakler fra de presenterte elementene. Visuelt sett gjør de faktisk ikke så mye. De er imidlertid interessante med tanke på at du kan strukturere dokumentene logisk og semantisk med dem.
Navigasjonsområder
Via nav-elementet kan du semantisk merke navigasjonsfelt eller andre områder for tilleggsinnholdselementer. Dette elementet er hovedsakelig ment for å markere hyperkoblinger til andre sider eller til supplerende informasjon.
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>
Innenfor nav-elementet kan du bruke hvilke som helst elementer. Du kan fortsatt definere navigasjonen ved hjelp av lister. Andre elementer kan imidlertid også lett brukes innenfor nav. nav kan også forekomme flere ganger i et dokument.
Angi detaljer
Et annet interessant element er details. Gjennom dette kan du – som navnet på elementet allerede antyder – angi ytterligere informasjon om en innholdsenhet. Vær oppmerksom på at details-elementet først blir virkelig interessant i kombinasjon med summary-elementet. Mer om dette elementet følger etterpå.
Først et eksempel på bruk av details:
<article>
<details>
<summary>Henvisninger til artikkelen...</summary>
<ul>
<li><a href="henvisning1.html">Lenke 1</a></li>
<li><a href="henvisning2.html">Lenke 2</a></li>
<li><a href="henvisning3.html">Lenke 3</a></li>
</ul>
</details>
<details>
<summary>Kilder til artikkelen ...</summary>
<ul>
<li><a href="kilde1.html">Lenke 4</a></li>
<li><a href="kilde2.html">Lenke 5</a></li>
<li><a href="kilde3.html"">Lenke 6</a></li>
</ul>
</details>
</article>
Innholdet i details-elementet blir holdt skjult for besøkende før de klikker på summary-elementet inne i details.
Dette kan for eksempel være interessant i forbindelse med en videospiller. 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>Skjul/vis videospillerkontroll</summary>
<p>
<button id="start" onClick="start()">Start/Pause</button>
<button id="stumm" onClick="stumm()">Dempe</button>
<button id="lauter" onClick="lauter()">Høyere</button>
<button id="leiser" onClick="leiser()">Lavere</button>
</p>
</details>
Når siden lastes, vil bare spillervinduet være synlig i utgangspunktet.
Hvis en besøkende klikker på linken for å skjule eller vise, vil innholdet definert innenfor summary-elementet vises.
Ifølge spesifikasjonen skal nettleserne vise standardinnhold hvis det ikke finnes et summary-element.
Også interessant er attributtet open for details.
<details open> … </details>
Hvis dette attributtet er satt, vil innholdet i summary-elementet være synlig når siden lastes.
Oppsummeringer
Nå tar vi en litt grundigere titt på summary-elementet.
<article>
<details>
<summary>Henvisninger til artikkelen...</summary>
<ul>
<li><a href="henvisning1.html">Lenke 1</a></li>
<li><a href="henvisning2.html">Lenke 2</a></li>
<li><a href="henvisning3.html">Lenke 3</a></li>
</ul>
</details>
<details>
<summary>Kilder til artikkelen ...</summary>
<ul>
<li><a href="kilde1.html">Lenke 4</a></li>
<li><a href="kilde2.html">Lenke 5</a></li>
<li><a href="kilde3.html"">Lenke 6</a></li>
</ul>
</details>
</article>
Innenfor summary blir altså innholdet som ikke er åpnet ennå definert i forbindelse med details. Takk til summary kan ekstra informasjon integreres som bare blir vist ved behov.
Man kunne selvfølgelig også realisere åpne og lukkingbare områder enkelt med JavaScript. Men hvis JavaScript er deaktivert i nettleseren, vil ikke applikasjonen fungere. Derfor er det ønskelig med en bred støtte for details og summary så snart som mulig.
Sidebarer og marginalia
Ekstra informasjon, marginalia, kryssreferanser osv. kan markeres med aside-elementet i HTML5. Innholdet som er markert på denne måten befinner seg i sammenheng med det totale dokumentet, men er ikke direkte tilknyttet det.
Vær oppmerksom på at HTML5-spesifikasjonen ikke bestemmer hvilken dimensjon en seksjon markert med aside skal ha. Det betyr at innholdet i aside for eksempel kan vises som en marginalia eller som en sidebar.
Følgende eksempel viser definisjonen av en aside-seksjon.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Lage web-apper (Del 10): jQuery mobile (2)</h2>
<p>I denne opplæringen blir den første ordentlige jQM-siden opprettet. Forutsetningen for dette er html-skjelettet som du allerede har lært.</p>
<aside>
<h3>Mer informasjon</h3>
<ul>
<li><a href="#/fn1">Det finnes mer informasjon...</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigasjon</h2>
<ul>
<li><a href="#">Hjemmeside</a></li>
<li><a href="# ">Kontakt</a></li>
</ul>
</nav>
</aside>
</body>Legge til tidspunkter
Tidspunkter kan spesifikt markeres med det nye time-elementet. Særpreget med dette elementet er at tidspunktene er leselige for både mennesker og maskiner.
Tidspunktene skrives inn i time-elementet for mennesker. For å gi nettleserne muligheten til å lese tidinformasjonene, brukes attributtet datetime på time-elementet.
<p>Vi sees den <time datetime="2014-04-15 19:00">15. april kl. 19.00</time>. </p>
På dette tidspunktet er det verdt å merke seg at dette ikke har noen synlige effekter i moderne nettlesere, men er kun ment for å gjøre tidspunkter leselige for maskiner.
Fremheve tekster
Med mark-elementet er det mulig å visuelt fremheve ord eller hele tekstpassasjer. Det presiseres i HTML5-spesifikasjonen at dette elementet kun skal brukes i sammenheng med tekstinnhold. I tillegg må det ha en bestemt tilknytning til konteksten.
Et eksempel:
<p>I denne opplæringen blir den første ordentlige jQM-siden opprettet. Forutsetningen for dette er <mark>html-skjelettet</mark> som du allerede har lært.</p>
Hvordan nettlesere legger til fremhevingen er ikke bestemt.
Både Google Chrome og Firefox bruker imidlertid en gul bakgrunn.
Marker samtaler
Også utmerkelsen av dialoger ble tenkt på i HTML5. For dette formålet finnes dialog-elementet. For øyeblikket støttes imidlertid dialog-elementet utelukkende av Safari og Google Canary, altså utviklerversjonen av nettleseren.
Her er et annet eksempel:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Dette er innholdet i boksen.</p>
<button id="hide">Lukk</button>
</dialog>
<button id="show">Vis innholdet</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>
Så snart knappen trykkes, vises dialogboksen. For at dette skal fungere, er det brukt en kombinasjon av HTML5, CSS og JavaScript i det tidligere eksemplet.
