aside

In het <aside> element plaats je elementen op de pagina die zijdelings bij een hoofdartikel of -sectie horen. De inhoud van <aside> … </aside> hoort bij het ouderelement waarbinnen het ingebed is. Het <aside> element is geschikt voor quotes, video's, advertenties en bijvoorbeeld blokken met gerelateerde berichten of hyperlinks. De naam <aside> heeft niets te maken met de positie of visuele weergave van de inhoud.

Als je een <aside> niet opneemt binnen een ander structuurelement zoals <section> of <article>, is het top-levelelement (body ) het ouderelement van de betreffende <aside> en slaat de inhoud ervan op de hele pagina. Dat kan de bedoeling zijn, maar meestal heeft dat semantisch gezien, geen enkel nut. Let er dus op dat de <aside>-tags binnen de juiste structuurtags worden geplaatst.

Om de bloemlezing-webpagina gebruiken we het aside element om de navigatie binnen dezelfde pagina te plaatsen.

<aside>
    <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>
</aside>

Op die manier maken we onderscheid met de website navigatie die in het header element van de webpagina komt te staan. Het toevoegen van het aside element verandert niets aan het uitzicht van de webpagina. We verbeteren opnieuw alleen de semantiek.