Kop- en voetgedeelte
Met de twee elementen header en footer kunnen het kop- en voetgedeelte gedefinieerd worden. Om het kopgedeelte te definiëren, wordt het head-element gebruikt. Hierbij hoeft het overigens niet per se om het kopgedeelte van de gehele pagina te gaan. Ook kan met head het kopgedeelte van andere elementen zoals secties en artikelen worden gemarkeerd.
Let op: Verwar header niet met het bekende head-element, waarmee het kopgedeelte van HTML-documenten wordt gedefinieerd, waarin de documenttitel, stylesheet- en JavaScript-oproepen worden opgenomen.
Voor een volledig document zou het gebruik van header er als volgt uitzien:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Toegepast op een section-element zou het volgende beeld ontstaan:
<section>
<header>
<h1> Web-apps maken (Deel 09): jQuery mobile (1)</h1>
<p> jQuery is ongetwijfeld een van de bekendste JavaScript-frameworks.</p>
</header>
<p>
Op "klassieke" websites wordt jQuery daarom al duizenden keren gebruikt. Speciaal ontworpen voor gebruik in web-apps is het zusterraamwerk jQuery mobile (jQM). Dit raamwerk helpt je om je web-app er in een handomdraai uit te laten zien als een echte app. Genoeg reden om een gedetailleerde blik te werpen op jQM.
</p>
<footer>
<p>Copyright door PSD-Tutorials.de</p>
</footer>
</section>Zorg er in ieder geval voor dat footer en header geen extra header- en footer-elementen mogen bevatten.
Koppen groeperen
In samenhang met secties komen de koppen aan bod. Deze koppen kunnen in eerste instantie de klassieke elementen h1 tot h6 zijn. Maar ook in HTML5 is het hgroup-element toegestaan. Binnen deze hgroup-elementen kunnen op hun beurt meerdere koppen voorkomen.
Bekijk eerst een klassiek HTML-document waarin de "normale" structuur wordt gedefinieerd met behulp van hx-elementen.
<h1>
Boek
</h1>
<h2>
Hoofdstuk 1
</h2>
<h2>
Hoofdstuk 2
</h2>
<h3>
Subhoofdstuk 2.1
</h3>
<h3>
Subhoofdstuk 2.2
</h3>
<h2>
Hoofdstuk 3
</h2>
Deze definitie resulteert in de volgende structuur:
Boek
Hoofdstuk 1
Hoofdstuk 2
Subhoofdstuk 2.1
Subhoofdstuk 2.2
Hoofdstuk 3
In de browser worden de koppen echter niet ingesprongen.
Interessant is hgroup vooral in samenhang met journalistieke teksten. Deze bestaan vaak uit een tweedelige kop, die bestaat uit de hoofdkop en de bij- of onderkop. Een voorbeeld zal dit aspect verduidelijken.
<hgroup> <h1>Cloud OS</h1> <h2>Het web als besturingssysteem</h2> </hgroup> <p>Hier begint de inhoud van het artikel ...</p>
In dit voorbeeld is duidelijk te zien dat de onderkop geen apart gedeelte binnen het artikel start. Het betreft eerder een deel van de artikelkop. Precies dit kan worden samengevat met behulp van het hgroup-element.
Binnen hgroup zijn de elementen h1 tot h6 toegestaan.
Het Contour-concept
In HTML5 komt daarnaast het Contour-concept aan bod, waarbij het gaat om de interactie tussen section- en verschillende hx-elementen. Bij dit concept worden, zoals tot nu toe gebruikelijk, de koppen door de elementen h1 tot h6 in verschillende niveaus onderverdeeld. Hierbij vertegenwoordigt h1 het hoogste niveau, terwijl h6 het laagste niveau aangeeft. Hierin is dus geen verandering ten opzichte van vroeger. Nu kunnen de hx-elementen echter binnen section-elementen worden gedefinieerd. En hierbij begint de telling elke keer opnieuw, maar telkens een niveau dieper.
Het Contour-concept lijkt misschien ingewikkeld in de HTML5-specificatie, maar het idee erachter is eigenlijk heel eenvoudig. Hiermee kan namelijk een inhoudsopgave gedefinieerd worden die de structuur van het document machinaal leesbaar maakt.
Ook hiervoor een voorbeeld:
<h1>
Hoofdstuk 1
</h1>
<section>
<h1>
Hoofdstuk 2
</h1>
<section>
<h1>
Hoofdstuk 3
</h1>
</section>
</section>
Met het outline-concept van HTML5 volgt de volgende structuur:
1. Hoofdstuk 1
- Hoofdstuk 2
- Hoofdstuk 3
- Hoofdstuk 3
Een ander voorbeeld om het effect te verduidelijken. Ook hier eerst het oorspronkelijke document.
<section>
<h1>Installatie en configuratie</h1>
<section>
<h2>Installatie</h2>
<p>Alles over installatie
</section> <section>
<h2>Configuratie</h2>
<p>Hier vinden jullie alles over configuratie
</section>
<aside>
<p>Interessante boeken over het onderwerp...
</aside>
</section>
<footer>
<p>(c) door PSD-Tutorials.de
</footer>
</section>
De resulterende structuur ziet er als volgt uit:
1. Sectie (Installatie en configuratie)
1.1 Sectie (Installatie)
1.2 Sectie (Configuratie)
1.3 Sectie (aside)
- Sectie (footer)
En nog een voorbeeld:
<body>
<h1>Installatie en configuratie</h1>
<h2>Installatie</h2>
<p>Alles over installatie
...nog meer inhoud...
<section>
<h3>Vereisten</h3>
<p>Alles over installatievereisten
...nog meer inhoud...
<h3>Voorbereidingen</h3>
<p>Alles over voorbereidingen
...nog meer inhoud...
<h2>Configuratie</h2>
<p>Alles over configuratie
...nog meer inhoud...
</section>
</body>
De structuur ziet er als volgt uit:
1. Installatie en configuratie
1.1 Installatie
1.1.1 Vereisten
1.1.2 Voorbereidingen
1.2 Configuratie
De interne nummering begint hier dus telkens opnieuw bij 1. Van het outline-concept zijn slechts deze elementen beïnvloed:
• article
• aside
• nav
• section
De elementen header en footer worden daarentegen buiten beschouwing gelaten.
Let op dat het outline-concept momenteel nog niet door browsers wordt ondersteund.
Het zal echter slechts een kwestie van tijd zijn voordat de browserfabrikanten hier actie ondernemen. De voordelen van het outline-concept zouden te groot zijn. Denk bijvoorbeeld aan automatisch gegenereerde navigatiebalken. Maar zelfs als de structurering op de genoemde manier momenteel wordt genegeerd door browsers, is het raadzaam om nu alvast te proberen uw documenten logisch te structureren. Zo krijgt u meteen een zekere toekomstbestendigheid voor uw websites.
