Semantische headers in HTML5
4 juni 2010
Een groot probleem waar we vaak tegenaan lopen bij het schrijven van HTML is het bewaren van semantiek met de huidige beschikbare elementen. Met de juiste semantiek wordt bedoelt dat de juiste elementen worden gebruikt voor de juiste datatypen. Zo horen menuitems vaak in een list thuis (en niet in floating divjes naast elkaar). Dit houdt de website toegankelijk, maar ook seo vriendelijk.
Het probleem met Headers
Een goed semantische website betekent ook dat de headers kloppen. De belangrijkste titel is <h1> en de volgende <h2> en <h3>. De volgende structuur is wordt veel gebruikt:
<body>
<h1>Titel van de website</h1>
<h2>Subtitel van de website</h2>
<h3>Titel van een artikel</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nunc nisl.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>Titel van een artikel</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nunc nisl.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>Het probleem met het bovenstaande stukje is dat de titels van de artikelen nu onderdeel zijn geworden van een grotere titel, de pagina, terwijl dit eigenlijk niet het geval is. De browser, of bot kan nooit goed detecteren welke header nu precies onderdeel is van welke header. Hij klopt puur semantisch gezien misschien wel, maar zonder te groeperen heeft die semantiek simpelweg heel weinig nut!
HTML5 lost dit op met een nieuw element, <hgroup>. De HTML wordt dan:
<body>
<hgroup>
<h1>Titel van de website</h1>
<h2>Subtitel van de website</h2>
</hgroup>
<h3>Titel van een artikel</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nunc nisl.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>Titel van een artikel</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at nunc nisl.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>Overigens is bovenstaand voorbeeld niet volledig semantisch, want ik ga voorbij aan de Article tag, maar het voorbeeld gaat alleen om de hgroup.
Een ander voordeel van de hgroup is het stylen van de website. Denk aan blogposts. Vaak willen we verschillende <h2> elementen op verschillende plekken anders stylen. Classes bieden dan de uitkomst, maar is eigenlijk niet zo netjes. Je kan een element erboven targetten, maar dat is ook niet altijd netjes. Door een hgroup een id te geven, kan de header erbinnen altijd getarget worden en zijn eigen stijl bevatten.
Het hgroup element mag logischerwijs slechts headers bevatten (<h1> t/m <h6>). Ga naar HTML Heading Group op de W3C site voor meer informatie.
[update] Bij het plaatsen van 1 enkele header, hoeft deze natuurlijk niet gegroepeerd te worden. Bedankt David en Matthias voor de snelle reactie.
Ben je het met me eens, of totaal niet? Heb je tips of advies? Ik ben benieuwd, laat hieronder jouw reactie achter
Andere artikelen uit de categorie XHTML en CSS
Interessant artikel? Abonneer op de RSS Feed en blijf op de hoogte!
6 Reacties op "Semantische headers in HTML5"
David Hund zei:
Hoi Michel, goede punten om aan te kaarten.
Een paar opmerkingen:
Natuurlijk is het gebruik van de juiste HTML elementen essentieel voor semantiek, maar wat je maar terzijde aanstipt is dat ‘semantische HTML’, naar mijn mening, voornamelijk betrekking heeft op de *betekenis* van het element. Het is, denk ik, meer een zaak van ‘betekenis’ dan een puur technische best-practice. Dat zal je uiteraard weten en bedoelen.
Semantische Markup is best lastig te omschrijven maar wat ik een aardige poging vind is om het te definieren als ‘zelf-beschrijvende elementen’: Een H1 element omschrijft precies de betekenis, anders dan een stuk tekst in simpelweg groter gestylede FONT tags.
Met HTML5 hebben we veel meer opties om semantiek mee te geven aan elementen zoals je inderdaad al aangaf: SECTION en ARTICLE elementen bijvoorbeeld. Wat je niet beschrijft is dat deze (en andere) elementen zgn. ‘sectioning content’ zijn: ze bepalen een eigen ‘outline’ en bevatten hun eigen heading-structuur: http://www.whatwg.org/specs/web-apps/current-work/#sectioning-content
Het grootste deel van je artikel gaat niet zozeer over de semantiek maar over de ‘outline’ en ‘sectioning content’.
Voor je verhaal rondom HGROUP is het eigenlijk belangrijk om dit ook even te beschrijven, denk ik.
Deze zaken (outline en secties) zijn de reden dat je in HTML5 b.v. meerdere H1 elementen kunt gebruiken in verschillende secties. De ‘outline’ van je document kan je vergelijken met een inhoudsopgave: elke opvolgende kop (Hn) bepaalt een nieuw niveau in de outline, maar een volgende sectie doet dat ook en begint met een eigen outline. In theorie zou je dus bijna alleen H1 elementen kunnen gebruiken in verschillende sectioning content (b.v. een SECTION of ARTICLE element):
- H1
– H1 in SECTION
— H1 in ARTICLE
Als je in bovenstaande structuur geen sectioning content (section, article) zou gebruiken dan zou de bedoelde structuur onduidelijk zijn:
- H1
- H1
- H1
.. De sectioning content maken dat de outline ‘klopt’, zelfs met dezelfde H1 elementen.
De reden voor het HGROUP element is dat je inderdaad vaak een ‘tagline’ van de kop wilt onderscheiden, idd. bv. met een H2. Dit zorgt (zonder HGROUP) echter voor problemen: de H2 zou namelijk een nieuw niveau in de outline introduceren terwijl de H2 juist bij de H1 hoort, hij zou gegroupeerd moeten worden.
- H1 Main heading
- – H2 tagline
‘Tagline’ is geen nieuwe sectie! Dus bovenstaande outline klopt niet.
Hiervoor is dus het HGROUP element bedacht. Een H1 + H2 in HGROUP tags worden in de outline gezien als 1 niveau!
[HGROUP]
- H1 Main heading
- H2 tagline
[HGROUP]
Een handige tool om je outline te checken vindt je hier: http://gsnedders.html5.org/outliner/
Waarom je HGROUP tags om je H3 elementen in je voorbeeld zet is mij onduidelijk. Daar is geen reden voor. Ik denk dat je in dat geval het HGROUP element verward met het (ook nieuwe) HEADER element. Als je alleen een extra element nodig hebt om te stylen zou ik kiezen voor het HEADER element. Maar het *hoeft* geen van beide.
In je voorbeeld is het HRGOUP element alleen(!) relevant bij de H1 + H2 groupering.
7 Jun 10, om 10:27 am
Mathias Bynens zei:
Het hgroup-element doet wat het zegt: meerdere headings groeperen. Als je maar 1 heading gebruikt, zoals in jouw voorbeeld:
<hgroup>
<h3>Titel van een artikel</h3>
</hgroup>…moet je het dus niet gebruiken.
7 Jun 10, om 10:43 am
Matijs zei:
Wat @mathias zegt en het zal je verbazen hoeveel tags je gaat gebruiken (en hoe weinig etc) zodra je met s gaat werken.
Misschien ook handig om nog iets over de outline uit te leggen?
7 Jun 10, om 11:08 am
Matijs zei:
Je gaat dus meer h1 tags gebruiken en steeds minder h2, h3, etc, zodra je de article tag gaat gebruiken.
7 Jun 10, om 11:12 am
Michel Kuik zei:
@Mathias Bynens en David Hund
Natuurlijk, jullie hebben gelijk. De h3 in de articles hoeven natuurlijk niet gegroepeerd te worden, aangezien het slechts 1 element bevat. Slordig, ik had eerst een ander voorbeeld gemaakt en was deze vergeten aan te passen.
Bedankt voor de snelle notice!
@David Hund
Bedankt voor de goeie toevoeging. Klopt als een bus.
7 Jun 10, om 1:27 pm
