HTML Semantics: Navigatie

June 3rd, 2013 | 4 min read | HTML5, Web, Web semantics

Het is alweer een tijd geleden dat ik nog een tutorial rond web semantics geschreven heb. In deze tutorial ga ik beschrijven welke HTML tags je kan gebruiken om een navigatie-structuur tot stand te brengen.

Deze semantiek is volgens mij redelijk belangrijk omdat het naast het ordelijk houden van je HTML code er ook nog voor zorgt dat crawlers beter inzicht krijgen in jouw website. Web semantics spelen immers een bepaalde rol in SEO.

Een lijst

De meeste mensen hebben al wel een bepaald idee van hoe ze een navigatie gaan bouwen, namelijk door middel van een lijst (

<ul>

). Maar toch is dit niet overal zo vanzelfsprekend, er zijn immers nog steeds websites die het zonder een lijst opbouwen.

In HTML 4 kwam je normaal gezien met een structuur als:

<div class="mainNav">
    <ul>
        <li><a href="#">Pagina 1</a></li>
        <li><a href="#">Pagina 2</a></li>
        <li><a href="#">Pagina 3</a></li>
        <li><a href="#">Pagina 4</a></li>
    </ul>
</div>

Of iets gelijkaardisgs (zonder

<div>

bijvoorbeeld).

HTML5

Lijsten worden echter voor meer dan enkel navigatie gebruikt. Daarom dat het, puur op basis van de semantiek, moeilijk af te leiden is waarvoor die lijst juist gebruikt wordt.

In HTML5 is echter de <nav> tag geïntroduceerd, deze heeft als doel de HTML code die gebruikt wordt om de navigatie te creëeren te omsluiten. Ik citeer:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Dus als resultaat krijgen we dan:

<nav class="mainNav">
    <ul>
        <li><a href="#">Pagina 1</a></li>
        <li><a href="#">Pagina 2</a></li>
        <li><a href="#">Pagina 3</a></li>
        <li><a href="#">Pagina 4</a></li>
    </ul>
</nav>

Let er wel op dat in de HTML5 specificatie ook de opmerking wordt gegeven dat het enkel is voor major navigation. Gebruik dit dus enkel in het geval van de “hoofdnavigatie”.

Een andere tag die ons kan helpen is de

<header>

tag. Deze HTML tag wordt namelijk gebruikt om alles wat te maken heeft met de pagina header te omsluiten. Deze tag kan dus meer bevatten dan enkel de navigatie.

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

Stel dat we bijvoorbeeld een iets uitgebreidere navigatie hebben met een brand-naam, een links- en rechts geäligneerd menu, dan krijgen we volgende code:

<header>
    <nav class="mainNav">
        <h1><a href="#">My brand</a></h1>
        <ul class="leftAligned">
            <li><a href="#">Pagina 1</a></li>
            <li><a href="#">Pagina 2</a></li>
        </ul>
        <ul class="rightAligned">
            <li><a href="#">Pagina 3</a></li>
            <li><a href="#">Pagina 4</a></li>
        </ul>
    </nav>
</header>

CSS toepassen

Op basis van deze semantiek kunnen we ook op een vrij eenvoudige manier de CSS toekennen, bijvoorbeeld:

header {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #111;
}

header > nav {
    margin: 0 3em;
}

header > nav > h1 {
    display: block;
    margin: 0.8em 0;
    font-size: 1.2em;
    float: left;
}
header > nav > h1 > a {
    color: #FFF;
    text-decoration: none;
}
header > nav > ul.leftAligned {
    display: block;
    float: left;
    margin: 0;
}
header > nav > ul.rightAligned {
    display: block;
    float: right;
    margin: 0;
}
header > nav > ul > li {
    list-style-type: none;
    display: block;
    float: left;
    border-left: solid 1px #333;
    border-right: solid 1px #333;
}
header > nav > ul > li > a {
    font-size: 1em;
    line-height: 1.1em;
    display: inline-block;
    padding: 1.2em;
    color: #FFF;
    text-decoration: none;
}
header > nav> ul > li > a:hover {
    background: #222;
}

Zoals je ziet kunnen we deze logische structuur nu gebruiken om de navigatie te stijlen zonder dat we classnames moeten introduceren waar na een tijd niemand nog van weet waar ze juist voor dienen.

Zoals je kan zien ziet het resultaat er vrij net uit:

result

Daarmee zit deze vrij korte tutorial er dan ook  op.

Download project

Download – semantics-navigatie-example.tar.gz (2 kB)

Demo

Back to tutorialsContact me on TwitterDiscuss on Twitter

Profile picture

Dimitri "g00glen00b" Mestdagh is a consultant at Cronos and tech lead at Aquafin. Usually you can find him trying out new libraries and technologies. Loves both Java and JavaScript.