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>
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>