[HTML] Semantiek mbt H1 t/m H6

[Booster]

Ik kom op het volgende -naar mijn idee vrij "domme"- punt bij het gebruik van de heading-tags. Ben benieuwd hoe jullie dit precies oplossen.

Bij de gemiddelde pagina die ik bouw, heeft een pagina een titel, maar deze titel is bijna nooit gelijk aan de eerste heading op de pagina. De titel is meer gericht op kort zijn, SEO, o.a.
Daarna begin ik meestal de pagina namelijk met een paragraaf of iets dat op de gebruiker gericht is ipv op "correcte formatting van het document". De eerste heading is daarom meestal een tussenkop, eigenlijk een H2.

Bij een pagina die ik nu aan het bouwen ben heeft het grafisch gezien, en voor de gebruiker, echt weinig nut om eerst de titel van de pagina nog eens te herhalen. Bv:

Paginatitel: Collectie
Eerste kop op de pagina: Informele chique die overal past

Maken jullie van deze eerste heading nou toch een H1? Zitten er nog SEO voor- en nadelen aan een andere inhoud van titel en H1? Ik zou van bovenstaande kop misschien toch een H2 maken ipv een H1, omdat de titel van de pagina voor mijn gevoel de H1 representeerd.

Wil je echt miereneuken dan kun je altijd een H1 verbergen in je source, maar ik ben niet op zoek naar rare oplossingen ik ben gewoon benieuwd hoe jullie dit aanpakken.

[ Voor 5% gewijzigd door Booster op 17-01-2011 13:25 ]

[Bosmonster]

Headers dienen in juiste volgorde en structuur op een pagina te staan. Direct beginnen met een H2 mag dus officieel niet (net als springen van h2 naar h4, etc)

Wat je eventueel wel kunt doen is gewoon je H1 hidden op iedere pagina zetten en afstemmen met je title. Dat is niet zo'n rare oplossing als je doet voorkomen. In ieder geval vele malen beter dan hem helemaal weglaten

[ Voor 25% gewijzigd door Bosmonster op 17-01-2011 13:41 ]

[crisp]

Bosmonster schreef op maandag 17 januari 2011 @ 13:35:
Headers dienen in juiste volgorde en structuur op een pagina te staan. Direct beginnen met een H2 mag dus officieel niet (net als springen van h2 naar h4, etc)

Dat is een mening die niet iedereen deelt. De HTML4 specificatie zegt er enkel dit over:

quote: http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.

In HTML5 is de term 'level' vervangen door 'rank' en zegt verder niets over volgorde of 'overslaan' van ranks:

quote: http://www.w3.org/TR/html...-h3-h4-h5-and-h6-elements

These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

[Bosmonster]

crisp schreef op maandag 17 januari 2011 @ 13:44:
[...]

Dat is een mening die niet iedereen deelt.

http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers

Content developers should not "skip" levels (e.g., H1 directly to H3).

Daar zijn ze zelf dan ook redelijk verdeeld over

Feit is dat het vooralsnog een eis is mbt de webrichtlijnen.

En in HTML5 zijn het dan wel "ranks", hetzelfde geldt nog steeds:

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

[ Voor 40% gewijzigd door Bosmonster op 17-01-2011 13:53 ]

[samo]

Misschien moet je niet het gebruik van de h1-tag overwegen maar het gebruik van de titel. En misschien is het h1-gebruik dan een stuk logischer. Gebruik je titel om het voor de bezoeker makkelijk herkenbaar te maken waar hij zit en welke informatie te zien is.

[Verwijderd]

Bosmonster schreef op maandag 17 januari 2011 @ 13:48:

Daar zijn ze zelf dan ook redelijk verdeeld over

Er staat niet dat je niet kunt beginnen met een h3 met daaronder een aantal h4 elementen

Ik vind het prima kunnen om te beginnen met een h3 als het om een bepaald subartikel gaat. Het is wel zo dat de hn elementen alleen gebruikt zouden moeten worden voor content, dus niet voor kopjes boven menu's en dergelijke.

[samo]

Verwijderd schreef op maandag 17 januari 2011 @ 16:16:
[...]

Er staat niet dat je niet kunt beginnen met een h3 met daaronder een aantal h4 elementen

Ik vind het prima kunnen om te beginnen met een h3 als het om een bepaald subartikel gaat. Het is wel zo dat de hn elementen alleen gebruikt zouden moeten worden voor content, dus niet voor kopjes boven menu's en dergelijke.

Binnen HTML5 blijft de header in de context van het element eromheen, en krijgt een h1 in een nav-element de semantieke waarde van een h1 in een nav-element. Dan is het dus makkelijk in ieder context-element (nav, header, hgroup, article, section) te beginnen met een h1. Op zich wel makkelijk denk ik zo.

[OkkE]

Ik gebruik altijd één H1 element, die de "naam" van de pagina bevat, dus bijv. "Contactinformatie" of "Product X". Indien nodig zet ik daar boven nog een P met extra informatie, maar nooit andere Hx elementen.

De titel van het document (de <title>) is altijd samengesteld uit de niveaus, een soort breadcrumb. Bijvoorbeeld iets als "Product X, Merk Y - Categorie Z - Webshop - Bedrijfsnaam ".

[Bosmonster]

Verwijderd schreef op maandag 17 januari 2011 @ 16:16:
[...]

Er staat niet dat je niet kunt beginnen met een h3 met daaronder een aantal h4 elementen

Ik vind het prima kunnen om te beginnen met een h3 als het om een bepaald subartikel gaat. Het is wel zo dat de hn elementen alleen gebruikt zouden moeten worden voor content, dus niet voor kopjes boven menu's en dergelijke.

Voor HTML5 is dat sowieso not done. Daar begin je elke section standaard weer met een h1.

Voor andere HTML-varianten (of als je HTML5 puur gebruikt voor doctype/render mode) staat er wel degelijk dat je niet mag beginnen met een h3. Er staat dat je geen headers mag skippen, en dat geldt dus ook niet van 0 naar 3

[Verwijderd]

Bosmonster schreef op maandag 17 januari 2011 @ 16:30:

Er staat dat je geen headers mag skippen, en dat geldt dus ook niet van 0 naar 3

Nee, dat staat er echt niet.

Maar ik denk dat deze discussie wel duidelijk maakt dat specificaties 100% eenduidig en helder moeten zijn. Ik voorspel nu alvast dat HTML5 en opvolgers exact hetzelfde probleem zullen kennen. Er zijn implementaties voordat de specificatie af is, wat eigenlijk een garantie is voor dit soort kwesties. Mensen moeten echt gaan afleren iets te vernieuwen zonder vast te leggen wat er vernieuwd moet worden en wat er voorheen is misgegaan.

Onduidelijke specificaties zijn een blauwdruk voor incompatibiliteit. Specificaties moeten zo duidelijk zijn dat de grootste debiel nog kan lezen wat de bedoeling is en wat niet.

Die hn elementen zuigen overigens om precies die reden. Waarom zijn er 6?

[Bosmonster]

Als jij beginnen met een H3 niet ziet als het skippen van header-levels dan houdt de discussie snel op idd.

Verder staat er overigens letterlijk:

For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc.

Wat betreft headers is er nauwelijks onduidelijkheid. Het enige waar geen zekerheid over is, is of je meerdere H1's zou moeten (mogen) gebruiken. Normaliter zou je meerdere kunnen gebruiken, maar aangezien je pagina zelf vaak al een hoofdstuk is (met de H1 als header), is dat niet heel logisch.

HTML5 maakt het gebruik wel een stuk eenduidiger met de indeling per sectie, ipv de focus op je complete website. Dat laatste is wel een beetje een stukje legacy.

Waarom 6? Tja, waarom meer?

[ Voor 93% gewijzigd door Bosmonster op 17-01-2011 16:43 ]

[Voutloos]

Bosmonster schreef op maandag 17 januari 2011 @ 16:38:
Verder staat er overigens letterlijk:
[...]

Er staat 'Content developers should not "skip" levels'. 'Should' is minder dringend dan 'must'.

[Bosmonster]

Het gaat dan ook om richtlijnen. Dat mag je sowieso aan je laars lappen, maar dat is niet waar de discussie over gaat

[Verwijderd]

Hoewel er geen echte regels zijn (het zijn immers richtlijnen) is dit wat ik persoonlijk aanhoud:

H1 - titel van website (zoals ook in de <title> tag)
H2 - titel van pagina (bijvoorbeeld "welkom", "blog", "contact")
H3 - subtitels (zoals titels van blog artikelen, of subtitel van pagina's)
H4 - mini headers (zoals koppen in sidebar)
H5/H6 - gebruik ik bijna nooit...

In HTML5 is het gemakkelijker om subtitels te maken dmv hgroup, maar uiteindelijk maakt het het er niet gemakkelijk op...

[crisp]

Bosmonster schreef op maandag 17 januari 2011 @ 13:48:
[...]
http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers
[...]
Daar zijn ze zelf dan ook redelijk verdeeld over

Wat vooral opvalt is dat WCAG daar geen rationale voor geeft

Feit is dat het vooralsnog een eis is mbt de webrichtlijnen.

Daar heb ik al eens discussie over gehad. Als ik de huidige richtlijnen doorlees dan vind ik daar de volgende rationale:

quote: http://www.webrichtlijnen...webrichtlijnen-1/r-pd-3-3

De W3C HTML 4.01 specificatie geeft geen regels tegen het overslaan van niveaus in de heading hiërarchie. ISO HTML daarentegen verbiedt het. Voor deze handleiding is, vanuit een praktisch oogpunt, besloten om het overslaan van niveaus te ontmoedigen, maar niet te verbieden.

Nu is in de eerste plaats ISO HTML volgens mij volledig irrelevant. Verder vind ik het opvallend dat hier gesproken wordt over een 'praktisch' oogpunt waar het volgens mij voornamelijk juist een puristisch oogpunt is. Vanuit praktisch oogpunt zijn er namelijk in mijn ogen real-world scenario's waar het vasthouden aan de 'niveaus' (terwijl geen enkele specificatie aangeeft dat het cijfertje daadwerkelijk letterlijk als een niveau gezien moet worden) technische complicaties met zich meebrengt; vooral bij het hergebruik van stukken markup in verschillende of onbekende context (mash-ups) en/of bij het gebruik van templates met meerdere doeleinden.

En in HTML5 zijn het dan wel "ranks", hetzelfde geldt nog steeds:
[...]

HTML5 maakt juist sectioning mogelijk om een hyarchische structuur aan te brengen met bijbehorende headings binnen een document waar puur vanuit de structuur al een outline kan worden bepaald. Je kan dus zeggen dat het cijfertje binnen een goed gestructureerd document zelfs nog onbelangrijker is geworden of soms zelfs helemaal geen betekenis meer heeft.

Kortom: ik ben dus een van de mensen die de (gangbare?) mening in deze niet deelt

[Bosmonster]

Ik deel je mening wel als het gaat om het feit dat het soms bijna onuitvoerbaar is. Ik heb echter ook regelmatig te maken met overheidsprojecten en het volgen van de richtlijnen en certificering. Helaas merk ik te vaak dat de richtlijnen te vaak als regels worden gelezen en men soms hun doel voorbij streeft. Grappig genoeg meestal de klant of een of andere specialist of consultant die zelf nog nooit een regel html heeft geschreven..

Desalniettemin vind ik het wel een discussie waard over goed gebruik van header-tags. Het is misschien niet iets waar een duidelijke goed voor te definieren is, maar iets dat wel regelmatig zeer fout wordt gedaan.

Waar je voornamelijk rekening mee moet houden is dat de headers dienen om structuur aan te brengen in je content. Niet alleen voor zoekmachines, maar voornamelijk met het oog op accessibility. Het is wel zo prettig voor een lezer om hier een fatsoenlijke structuur in te hebben, alsof hij of zij werkelijk een document leest.

Het is dus vooral een kwestie van goed verstand en structuur en een inconsistentie hier en daar is echt geen ramp.

H1 - titel van website (zoals ook in de <title> tag)
H2 - titel van pagina (bijvoorbeeld "welkom", "blog", "contact")

Dit zijn bijvoorbeeld dingen die je bij voorkeur wilt voorkomen. Op iedere pagina je sitenaam herhalen in een H1 is zinloos vanuit ieder oogpunt. Daarnaast mag ik hopen dat de paginanaam ook in je title voorkomt (en in je url).

Maar goed, om even terug te komen op de TS. Daarom vind ik het veel minder "raar" om dan maar een verborgen H1 te gebruiken met een goede pagina-identificatie, dan om hem maar helemaal weg te laten. Maar het beste is om in je design al rekening te houden met het feit dat je de richtlijnen wilt gaat aanhouden (als dat een wens of eis is) en daarbij te zorgen voor een redelijke structuur en pagina-identificatie

Het volgen van de richtlijnen is sowieso iets dat al begint in de designfase en niet iets dat je er alleen in de front-end even bijfrutseld. Er zijn ook richtlijnen m.b.t. kleurstelling en contrast bijvoorbeeld.

[ Voor 24% gewijzigd door Bosmonster op 17-01-2011 23:33 ]

[alex3305]

Bosmonster schreef op maandag 17 januari 2011 @ 23:22:
[...]


Dit zijn bijvoorbeeld dingen die je bij voorkeur wilt voorkomen. Op iedere pagina je sitenaam herhalen in een H1 is zinloos vanuit ieder oogpunt. Daarnaast mag ik hopen dat de paginanaam ook in je title voorkomt (en in je url).

Je kunt een H1 ook stijlen. Het GoT logo zou theoretisch gezien ook een H1 kunnen zijn, dan is het wel weer zinnig!

Persoonlijk gebruik ik de H1 voor de sitenaam of de paginanaam, ligt ook aan het ontwerp en hoe de navigatie in elkaar zit. Daarna gebruik ik H2 tot H6 voor paragraafkoppen waar nodig.

[crisp]

alex3305 schreef op maandag 17 januari 2011 @ 23:26:
[...]

Je kunt een H1 ook stijlen. Het GoT logo zou theoretisch gezien ook een H1 kunnen zijn, dan is het wel weer zinnig!

Vroeger was dat ook een H1, maar daar zijn we bewust van afgestapt. Headings dienen content te vergezellen (zoals hier ook al eerder werd opgemerkt), en de naam van je website beschrijft niet de content op een bepaalde pagina. De naam van je site kan je prima laten terugkomen als deel van je <title>, maar de hoogst-rankende heading op je pagina dient de content van die pagina te beschrijven.

[OkkE]

alex3305 schreef op maandag 17 januari 2011 @ 23:26:
Je kunt een H1 ook stijlen. Het GoT logo zou theoretisch gezien ook een H1 kunnen zijn, dan is het wel weer zinnig!

Dit verwoord wel goed hoe ik er ook over denk: http://csswizardry.com/20...ogo-is-an-image-not-a-h1/

[Booster]

Late reactie maar dank voor de input.

Ik zal er nog even over nadenken of ik iets wil veranderen aan de manier waarop ik het nu doe.

Even los van de semantiek, is er iemand iets opgevallen vanuit SEO oogpunt? Is er een manier die hier SEO-wise beter werkt dan de ander?