Meerdere H1 per pagina
Sinds HTML5 dacht ik dat het mogelijk was om meerdere H1 elementen te gebruiken op 1 pagina. Bijvoorbeeld op de volgende manier:
Elke H1 zou dan gekoppeld zijn aan het sectioning element waar ze in zitten.
Maar wanneer ik dit probeer te valideren, geeft de W3C validator alsnog een waarschuwing.
Is dit niet (meer) de goede manier, en moet een van de H1 elementen een H2 element worden, of is de validator outdated?
Kan iemand me dit uitleggen?
Alvast bedankt!
Gelukkig, ik vind een H1 per sectioning element namelijk veel handiger en overzichtelijk. Bedankt!
Ik vind het niet meer dan normaal dat een pagina maar één <h1> heeft. Zowel qua code-semantiek als qua esthetische vormgeving. De overige <h>-tags kunnen wel meerdere keren voorkomen. Ik hou in deze dus de validatorregels wel aan.
Frank, kun je dat misschien nader verklaren? (na het lezen van het artikel waar ik naar linkte?)
Frank Conijn op 01/12/2014 11:01:16:
Ik vind het niet meer dan normaal dat ... Ik hou in deze dus de validatorregels wel aan.
Dat is natuurlijk helemaal je eigen keuze, maar wel achterhaald. Met de komst van HTML5 worden meerdere h1 tags per pagina gebruikt.
1. Ik vind het hetzelfde als de titel van een hoofdstuk, uitgaande van dat op internet een hoofdstuk op één pagina staat. Daar zou je er ook maar één van moeten hebben.
2. Het is zelden of nooit nodig om <h1> meerdere keren te gebruiken. We hebben ook nog <h2> t/m <h6>, die je met CSS elke grootte kunt geven die je wilt.
3. Ik zou denken dat zoekmachines meerdere <h1>s beschouwen als slechte semantiek, dus niet goed voor je SEO.
4. Validatie middels de W3C-validator is een verkoopargument, en klanten weten niet het verschil tussen de ene en de andere afkeuringsregel. Klanten moeten gewoon een goedkeuring zien.
Gewijzigd op 02/12/2014 19:27:57 door Frank Conijn
Frank Conijn op 02/12/2014 19:14:24:
1. Ik vind het hetzelfde als de titel van een hoofdstuk, uitgaande van dat op internet een hoofdstuk op één pagina staat. Daar zou je er ook maar één van moeten hebben.
Je hebt echter niet alleen maar leesboeken. Er zijn ook boeken met kortere artikelen, waarvan er soms wel drie op een pagina passen. En in die context is het volledig logisch en valide om meerdere hoofdstuktitels op één pagina te gebruiken. Hetzelfde geldt voor webpagina's.
Header-tags worden gebruikt op een hiërarchie aan te geven. En er zijn best situaties denkbaar waarin het volkomen verdedigbaar is om een hiërarchie met meerdere top-nodes te hebben en dus meerdere h1-tags te gebruiken.
Quote:
2. Het is zelden of nooit nodig om <h1> meerdere keren te gebruiken. We hebben ook nog <h2> t/m <h6>, die je met CSS elke grootte kunt geven die je wilt.
Ja, lekker. Dus om niet meerdere h1-tags te gebruiken, misbruik je h2 maar voor dat doel. Over verkeerde semantiek gesproken...
Quote:
3. Ik zou denken dat zoekmachines meerdere <h1>s beschouwen als slechte semantiek, dus niet goed voor je SEO.
Google kijkt hier niet naar. Tenminste, zolang je niet de h1-tag gaat misbruiken. De algoritmes van Google prikken daar doorheen. Dit is overigens verklaard door Matt Cutts, hoofd van het webspam-team van Google.
Van Bing weet ik dat die moeilijker doet over meerdere h1-tags op een pagina. Maar wie gebruikt dat? Zelf ken ik meer mensen die duckduckgo als searchengine gebruiken, en dat is er ook maar 1. ;-)
Quote:
4. Validatie middels de W3C-validator is een verkoopargument, en klanten weten niet het verschil tussen de ene en de andere afkeuringsregel. Klanten moeten gewoon een goedkeuring zien.
Als je naar de HTML-specs kijkt, dan wordt er nergens gesteld dat er slechts één h1-tag in een document mag voorkomen. De W3C-validator (zowel HTML 4.01 Strict als XHTML 1.0 Strict) geeft niet eens een warning als je meerdere h1-tags hebt...
Gewijzigd op 02/12/2014 21:01:40 door Willem vp
Jouw opmerking 1 t/m 3 is hoe het was in de oude situatie. Alles wat jij daarover zegt is nu niet meer van toepassing. Wat betreft opmerking 4. Jij moet een goed werkende site opleveren en je daarbij niet laten lijden door een validator die verouderd is. Dat kun je ook gewoon aan een klant uitleggen.
Frank, jouw rede 2 slaat natuurlijk niet echt de spijker... We hebben ook nog de b, strong, smaller, big, header, body, html tags die we kunnen (mis/ge)bruiken voor dit doel.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<h1>Eerst titel</h1>
<p>Tekst.</p>
<h1>Tweede titel</h1>
<p>Tekst.</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<h1>Eerst titel</h1>
<p>Tekst.</p>
<h1>Tweede titel</h1>
<p>Tekst.</p>
</body>
</html>
Maar dat blijkt helemaal niet het geval te zijn -- het wordt gewoon goedgekeurd. Dus waarom je nou stelde dat de W3C-validator outdated is?
Mijn vierde punt komt hiermee evenwel te vervallen. En daarmee mijn belangrijkste punt (want ik wil vermijden dat ik de klant moet gaan uitleggen waarom een site niet door de validator komt, zoals ik al beargumenteerde). En ik het kielzog daarvan punt 3, want dat koppelde ik aan de vermeende nonvalidatie bij meerdere <h1>s.
De andere twee punten zijn subjectief, dus daarover heeft het weinig zin om verder te gaan discussiëren. Ik heb ze slechts gegeven omdat je naar de reden waarom vroeg.
Gewijzigd op 03/12/2014 05:11:58 door Frank Conijn