13.01.12 | Een expliciete outline met HTML5

Met de komst van HTML5 verandert de codestructuur van menig website. De HTML/CSS-goeroes van Insyde kennen diverse methodes om alles uit HTML en CSS te halen, zonder daarbij SEO uit het oog te verliezen.

Echter, in veel gevallen is het nodig om met extra div's en classes/id's de juiste semantiek aan elementen te geven. HTML5 biedt gelukkig vele extra's om je code te verrijken zonder hulpstukken zoals css classes te hoeven inzetten.

Document outline en sectioning content

Alles binnen HTML5 draait om de outline. Een outline is in feite de inhoudsopgave van je pagina. De outline zorgt ervoor dat je pagina wordt opgedeeld in sections. Je kunt die eenvoudig bekijken met de Outline snippet.

(X)HTML4 pagina's hebben ook een outline. De sections worden impliciet gemaakt door middel van de headingelementen die je gebruikt. Iedere keer als je een headingelement plaatst, wordt de section gesloten en wordt er een nieuwe section gestart. Als je een headingelement gebruikt dat lager in rang is dan het vorige headingelement (bijvoorbeeld een h3 na een h2), start er een subsection.
Op die manier krijg je een soort boomstructuur, de outline.

Dit artikel heeft een titel (h1) en deze paragraaf begint met een h2. De outline is dus als volgt:

1. Een expliciete outline met HTML5
1. Document outline en sectioning content
2. Nieuwe elementen
3. etc.

Echter, er zijn situaties waarbij de impliciete outline tekort schiet. Neem bijvoorbeeld de situatie waarbij je wilt dat de laatste paragraaf van een subsection bij de parent section hoort:

1. Konijnen
   1. Zwarte konijnen
      Stukje tekst over zwarte konijnen.
   2. Witte konijnen
      Stukje tekst over witte konijnen.
   Dit artikel ging over konijnen.

De laatste alinea hoort bij 1. Konijnen, terwijl de impliciete sectioning er voor zorgt dat de paragraaf bij 2. Witte konijnen hoort. Tenslotte wordt een (sub)section in (X)HTML4 alleen gesloten door een headingelement te plaatsen.
Daarom wil je de outline explicieter kunnen bepalen en dat kan met HTML5.

In de volgende paragraaf beschrijf ik hoe je dit aanpakt en welke elementen je daarvoor kunt gebruiken.

Nieuwe elementen

Bekijk de broncode van een willekeurige website en je ziet enorm veel div's. Ze bevatten classes en id's zoals content, container, wrapper en nav.
In feite 'doet' een div niets. Dit element bakent een stuk code af door het in een blok te zetten. Vervolgens kun je er met CSS voor zorgen dat zo'n blok een bepaalde opmaak (breedte, positie op het scherm etc.) krijgt.

Een voorbeeld van een paginalayout met de bijbehorende div's kun je hier zien: 


 

Door middel van deze div's proberen we bepaalde delen van de pagina een betekenis te geven. Het mooie is dat HTML5 zijn eigen elementen heeft die deze delen van de pagina benoemt.
De indeling komt er dan zo uit te zien:

 







 

Het W3C heeft bedacht dat de volgende elementen zgn. sectioning content elements zijn en dus expliciet je outline bepalen.

• article
• aside
• nav
• section

Dus zonder headings te gebruiken heeft je pagina al een duidelijke outline. Echter, ieder sectioning content element zou wel met een heading moeten beginnen.

Je hebt ook sectioning root elements. Dit zijn de elementen die zelf een outline creëren die los staat van de outline van hun parent:

• blockquote
• body
• details
• fieldset
• figure
• td

Wat deze elementen inhouden en wanneer je deze toepast, vertel ik in de volgende paragrafen.

Div#content

Dit is het hoofdgedeelte van je website. In je div#content kan allerlei content staan. Een lijst met blogartikelen, een stuk tekst met enkele paragrafen of een fotogallerij. Waar je in HTML4 nog kunstelde met een ul (incl. class) met li's om de layout en semantiek te beschrijven, komt HTML5 de gebruiker tegemoet met enkele elementen. Maar wanneer gebruik je welk element?

Een article is bedoeld voor delen van de pagina die je ook apart zou kunnen lezen, bijvoorbeeld een blogartikel. Maar ook een widget zou in een section kunnen. Een handige vuistregel is: zou ik hier een RSS feed van kunnen maken?

Je kunt het section element gebruiken om bepaalde stukken van je pagina te groeperen, zodat de samenhang beter wordt. Wat je in feite doet is je outline explicieter indelen.

Wanneer er geen samenhang is, gebruik je gewoon een div. Dit element zul je dus (nog steeds) het vaakst gebruiken om layoutproblemen op te lossen.

Header

Niet alleen de header van je website, maar ook headers van nieuwsberichten (denk aan de intro, eventuele social bookmarks etc.) krijgen dit element.

Nav

Het nav-element is bedoeld voor groepen links die bedoeld zijn als navigatie. Hieronder valt uiteraard het hoofd- en submenu, maar ook pagineringslinks.

Aside

In kranten zie je wel eens een kader met achtergrondinformatie of extra uitleg. Hier is een aside voor bedoeld. 

Footer

In de footer komt vaak copyrightinformatie en enkele footerlinks. Maar ook footers van bijvoorbeeld nieuwsberichten komen in dit element te staan. Denk hierbij aan een 'lees meer'-link.

Hgroup

Een nieuw element in HTML5 is hgroup. Met dit element kun je headings groeperen zonder dat daarmee een nieuwe section wordt gemaakt. Dit element pas je dus toe wanneer je een subtitel boven een artikel hebt.

Niet te vroeg juichen

Met de komst van HTML5, kun je je pagina's eindelijk meer semantiek meegeven. Door de nieuwe elementen maak je niet alleen een nette outline, maar zijn de onderdelen van je pagina ook duidelijker aan elkaar gerelateerd. Geen nietszeggende div's meer, maar elementen die zeggen waar het op staat. Een aside voor kaders met extra informatie en een header voor je header.

Dit is een flinke tegemoetkoming voor zoekmachines en mensen met een visuele handicap, die afhankelijker zijn van de HTML-code dan van de styling van je pagina's.

Echter, nog niet alle browsers ondersteunen deze nieuw expliciete manier van outlining, dus zorg er voor dat je nog steeds - geheel volgens de 'oude' principes - een nette nesting van headingelementen hebt en je niet steeds (o.a. met CSS) afhankelijk bent van nieuwe elementen die misschien niet goed herkend worden.
Zo zorg je er voor dat de impliciete outline nog steeds goed is, maar de expliciete outline zijn mannetje staat wanneer de browser deze helemaal goed interpreteert.

Zie ook:

• HTML5doctor: You can still use div - Over het gebruik van div's in HTML5
• vanseodesign: HTML5 content models - Het content model in de gehele context
• HTML5doctor: HTML5 outlines - Meer voorbeelden van hoe je een outline maakt

Reageer

Laat zien wie je bent met een Gravatar. Hiervoor dien je wel je e-mail adres in te voeren, deze zal echter nooit getoond worden. HTML is niet toegestaan. Een URL in je reactie toevoegen werkt wel.