[Semantiek] Opbouw pagina h1,h2

[Vinzzz243]

Ik ben een artikel aan het schrijven zodat collega's intern h1,h2 etc hetzelfde gaan gebruiken (ivm CMS etc)

Een pagina heeft bij ons ruwweg meestal:
- een header met daarin utilities en een logo
- een menu
- een contentstuk met daarin een hoofdtitel en paragrafen met evt subtitels
- een footer met daarin wat tekst en disclaimer

Mijn idee:
H1 = huidige paginatitel of hoofdtitel (_niet_ dezelfde als in <title> staat)
H2 = subtitel (paragraaftitels) en evt nieuwstitels
H3 = naamgevingen voor divs, bv <h3>menu</h3>, <h3>utilities</h3> of <h3>footer</h3>. Deze worden meestal in de layout verborgen, maar kan een mindervalide bezoeker wellicht helpen een blok te identiferen

Hebben jullie hier andere ideeen over?

[Verwijderd]

gewoon hetzelfde als ze in word (zouden moeten) doen met heading 1, heading 2 (ook in de overview weergave)

het heeft dus te maken met nesting, belangrijkheid van de headings, alle headings samen zouden een correcte inhoudsopgave moeten opleveren

dus als jouw h3's onder h2's vallen is het goed, als ze op hetzelfde niveau staan dan niet

[ Voor 23% gewijzigd door Verwijderd op 13-07-2006 16:59 ]

[Rowanov]

Verwijderd schreef op donderdag 13 juli 2006 @ 16:57:
gewoon hetzelfde als ze in word (zouden moeten) doen met heading 1, heading 2 (ook in de overview weergave)

Dat doen ze bij mijn studie tot in het ziekelijke; ik doe een medische studie waarbij het product van je onderzoek altijd in verslagvorm komt. Hetzelfde voor subsidie aanvragen, sponsor werving en congresverslagen. Er wordt nagekeken of je overal styles gebruikt met zinvolle benamingen etc.

H1 lijkt me wenselijk om maar 1 keer op een pagina te gebruiken.

Je menu heeft neem ik aan niet echt de titel menu nodig, maar als je het er toch bij wilt plaatsen (net als footer en header overigens) dan moet je je afvragen of het wel een hx waard is. Feitelijk zullen je header, menu en footer in dezelfde presentatie-laag zitten; 1 laag onder h1 als je die als top-laag gebruikt.

Pagina
- Header
  * Pagina-Titel
    - Lijst met mogelijk sitemap, contact etc.
- Menu
  * Titel: 'Menu'
    - Lijst met links; mogelijk geneste lijsten
- Content
  * Titel: 'Hoofdtitel van je inhoudelijke tekst'
  * Mogelijk direct een alinea (p element gebruiken!)
    - Titel: 'Paragraaf titel'
    - Mogelijk direct een alinea (p element)
      * Titel: 'Alinea titel'
      * Alinea
- Footer
  * Gewone alinea (p), mogelijk address element als het op de tekst slaat

Waarbij ik er aan denk dat de titel in je header door een h1 zou kunnen worden weergegeven, de titels van je menu en de hoofdstuk titels van de content als h2, de titels van de paragrafen als h3 en de titels van de alinea's als h4.

Bij de dingen die ik in het schema als alinea aangeef, horen ook opsommingen (lijsten) die in de tekst voorkomen. Figuren en tabellen moet je zien als een aparte presentatielaag, met een eigen stijl die geldt voor het figuur/de tabel en het onderschrift.

Met als notities dat je de secties onder de pagina-laag met divs kan aangeven (en in de toekomst misschien met meer gepaste elementen) en dat een paragraaf (zie mophor's homepage, waar ik de exacte link naar het artikel van kwijt ben) ook door een div kan worden weergegeven.

[ Voor 9% gewijzigd door Rowanov op 13-07-2006 17:25 ]

[Boelie-Boelie]

TS gebruikt een h3 blijkbaar als sectieaanduiding, maar een sectie is van een hoger niveau dan een paragraaf. Een paragraaf krijgt van TS echter een h2. Andersom zou m.i. logischer zijn: sectietitel -> h2, paragraaftitel -> h3, zoals Rowanov volgens mij ook aangeeft. (toch?)
(aanvulling: Met sectie bedoel ik overigens zaken als menu en footer.)

Ook leuk om te lezen:
- Collylogic: question time using H tags (meningen van acht bekende webdesigners over headinggebruik)
- Jogin: Hierarchy (over hiërarchie in headings en de outline die het produceert)
- Webrichtlijnen.overheid.nl: kopregels (richtlijnen voor correct gebruik van headings op overheidssites)

[ Voor 9% gewijzigd door Boelie-Boelie op 13-07-2006 19:30 ]

[Rowanov]

Ik zie dat ik het nogal onduidelijk meldde:
• H1: Pagina-titel
• H2: Menu-titel en hoofdstuktitels
• H3: Paragraaf-kop
• H4: Alinea-kop

Het p element is daarentegen eerder een alinea dan wat de naam je doet vermoeden. Paragrafen kan je desgewenst met div's aangeven, of wachten op een beter element in html 5.

[Vinzzz243]

Rowanov schreef op donderdag 13 juli 2006 @ 19:17:
Ik zie dat ik het nogal onduidelijk meldde:
• H1: Pagina-titel
• H2: Menu-titel en hoofdstuktitels
• H3: Paragraaf-kop
• H4: Alinea-kop

Het p element is daarentegen eerder een alinea dan wat de naam je doet vermoeden. Paragrafen kan je desgewenst met div's aangeven, of wachten op een beter element in html 5.

Ik had dat idee van de overheid link ook een beetje. Je kunt moeilijk een h3 nemen voor de menu-titel, want dat impliceert dat er boven nog ergens een h2 komt, waaronder deze menu-titel ondergeschikt is. Echter mijn twijfel was groot en de beredenering dat h2 belangrijker is dan h3 won het, vandaar dat ik bedacht dat paragraafkoppen (of hoofdstuktitels van content, dat is in ons cms _ongeveer_ hetzelfde) een h2 moesten krijgen...

[Rowanov]

Als hoofdstuktitels eigenlijk een laag lager horen, omdat ze niet gelijk zijn aan het menu, dan kan dat ook nog. Gevolg is wel dat de paragraaf en alinea ook doorschuiven. Dit ligt toch eigenlijk wel aan de opbouw van je pagina en in dat geval moet je eigenlijk doen wat jezelf het meest logisch lijkt.