Functie en mogelijkheden van de header elementen.

Bron: http://www.sceneone.nl/tekst/h1.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Bovenaan deze pagina kom je de term 'Padre Familias' tegen. Misschien denk je, ben ik die term niet eerder ergens tegengekomen? Dat kan kloppen, want die term heb ik inderdaad eerder gebruikt, namelijk op de pagina over het Document Object Model.
Ook daar is sprake van een duidelijke en strikte hiërarchie volgens welke html is opgebouwd en wordt geïnterpreteerd. En hier komen we die hiërarchie opnieuw tegen in een andere vorm.

Zes header elementen

Door gebruik te maken van de header elementen maak je een kop en eventueel verschillende tussenkopjes in je teksten. Je hebt de beschikking over 6 header elementen: <h1> (level-one-heading) t/m <h6> (level-six-heading)
De namen van deze elementen zijn niet toevallig, <h1> staat in de hiërarchie bovenaan en is de belangrijkste header. De <h1> is zogezegd de Padre Familias. Vanaf <h1> tellen we af tot we uitkomen bij <h6>, de minst belangrijke van alle headers.

Omdat de <h1> element het belangrijkste van je header elementen is hebben we afgesproken dat je de <h1> op iedere pagina maar 1 keer gebruikt. Bovenaan je pagina komt de kop van die pagina en daarvoor gebruik je de <h1>. Wil je vervolgens nog tussenkopjes maken dan gebruik je daarvoor de andere headers.
De level-two-heading t/m de level-six-heading mag je per pagina zo vaak gebruiken als je maar wilt.

Als je helemaal niets doet aan de opmaak van je headers zien ze er zo uit:

CSS: GEEN HTML: <h1>De belangrijkste header, de level-one-heading</h1>
<h2>De tweede in rij, de level-two-heading</h2>
<h3>level-three-heading</h3>
<h4>level-four-heading</h4>
<h5>level-five-heading</h5>
<h6>level-six-heading</h6>

bekijk het resultaat

Zoals je bij het resultaat van bovenstaande code kunt zien win je met die onopgemaakte header elementen geen schoonheidsprijzen. Vanzelfsprekend hebben we via css alle mogelijkheden die we ons maar kunnen wensen om tekst elementen op te maken:

CSS: h1{
font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color: #595999;
font-weight: bold;
font-size: 90%;
}
HTML: <h1>Dit is de belangrijkste kop van je pagina</h1>
<p>Daaronder volgt je eerste paragraaf.
Nu is je <h1> wel opgemaakt en dat ziet er meteen een stuk beter uit.</p>

bekijk het resultaat

naar het begin van de pagina