nav

Het nav element is een div met een specifieke semantiek (bedoeling/beketenis). Het is een blokelement, dus paginabreed, waarin je de navigatie van je pagina plaatst.

Het <nav>-element omsluit een blok met koppelingen die voor de navigatie instaan. Dit kan bijvoorbeeld een navigatiemenu van een website zijn.

Spraaksynthesizers kunnen bijvoorbeeld dit element overslaan bij het voorlezen, zodat de gebruiker sneller de daadwerkelijke inhoud van het document te horen krijgt.

<nav> … </nav>

De HTML5 specificatie vermeldt ook dat het <nav> element enkel dient voor de hoofdnavigatie. Als voorbeeld geven ze pagina met twee <nav> elementen, een om op de website te navigeren en een om binnen dezelfde pagina te navigeren.

We passen dat toe op onze bloemlezing-pagina. We beginnen met het toevoegen van navigatie binnen dezelfde pagina. We voegen een lijst toe met de titels van de gedichten. Door op een item in de lijst te klikken springen we naar het desbetreffende gedicht. Hoe je dat doet kan je lezen op Link naar een bladwijzer.

<nav>
    <ol>
        <li><a href="#gedicht1">De hand van de dichter</a></li>
        <li><a href="#gedicht2">Voor het inslapen</a></li>
        <li><a href="#gedicht3">De liefde slaapt in haar hart</a></li>
        <li><a href="#gedicht4">Jaloezie</a></li>
        <li><a href="#gedicht5">De vreemdeling</a></li>
        <li><a href="#gedicht6">Polderland</a></li>
        <li><a href="#gedicht7">Twee vrienden</a></li>
        <li><a href="#gedicht1">Aan de dood</a></li>
    </ol>
</nav>

Door de links in een nav element te plaatsen ziet onze webpagina er niet anders uit. We hebben alleen de semantiek verbeterd.