Koppen (headings)
Door gebruik van de juiste heading-elementen in een pagina is de structuur eenvoudiger uit de pagina af te leiden.'
Bezoekers krijgen met een eenvoudige zoekopdracht naar de headings op een pagina een snel overzicht van de inhoud. Dit ijkpunt zorgt voor een drempelvrij en seo-vriendelijk gebruik van de headings elementen. Met bepaalde hulpsoftware kan de bezoeker via de headings-koppen door een pagina lopen en bepalen welke informatie relevant is. Alle headings-elementen zijn vertegenwoordigt.
Voorbeelden
Titel van de webpagina
Subtitel van panel of een paragraaf op een webpagina
Subtitels in overzichtslijst
H1. Futura, 22 px, #DD0000, Bold
H2. Futura, 20 px, #DD0000, Bold
H3. Futura, 18 px, #333333, Bold
H4. Futura, 16 px, #333333, Bold
H5. Futura, 14 px, #333333, Bold
H2. Futura, 12 px, #333333, Bold
Body tekst
Het lettertype van de normale tekst is 'Arial' in 12 px met een interlinie van 18 px.
De standaard waarde voor "medium-text" font-weergave in elke moderne browser is 16px. En de
eerste stap om deze waarde te verlagen voor de hele website is door de body-tag te voorzien van
een font-size van 12 / 16 = 0.75 em. De standaard grootte verandert hiermee in 12px.
Er zijn 2 soorten paragraaf-titels:
- Artikel-paragraaf-titel op een zogenaamde detailpagina
- Onderwerp-paragraaf-titel op een zogenaamde onderwerppagina
Voorbeeld artikel-paragraaf-titel(detailpagina)
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Voorbeeld onderwerp-paragraaf-titel (onderwerppagina)
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non
metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
elit. Donec ullamcorper nulla non metus auctor fringilla.
Body tekst intro
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Lijsten
Codeer lijststructuur en lijstelementen met HTML-lijstelementen dl, ul en ol. Hierdoor zijn lijsten en lijstelementen inzichtelijker voor de lezer.
NOOT: gebruik deze alleen voor het maken van lijsten en niet voor formatteringseffecten, zoals inspringen.
Ongeordende lijsten
Gebruik voor een onafhanlijke volgorde een ongeordende (Unorderd list) lijstweergave.
- Ongeordende lijst item 1
-
Ongeordende lijst item 2
- Ongeordende lijst item 1
- Ongeordende lijst item 2
- Ongeordende lijst item 3
- Ongeordende lijst item 3
Geordende lijsten
Gebruik voor een hierarchische volgorde een geordende (Orderd list) lijstweergave.
- Geordende lijst item 1
- Geordende lijst item 2
- Geordende lijst item 3