Wat is een header?
In webdesign heeft de term ‘header’ twee belangrijke betekenissen. Meestal verwijst het naar de visuele balk bovenaan uw website (met uw logo en menu). Het kan echter ook verwijzen naar het onzichtbare <head>-gedeelte van de code, dat cruciaal is voor SEO en scripts.
Beide zijn essentieel voor een goede website, maar ze hebben totaal verschillende functies. Laten we ze een voor een bekijken.
1. De Visuele Header (Wat u ziet)
Dit is wat de meeste mensen bedoelen met ‘de header’. Het is het consistente blok dat u bovenaan elke pagina van een website terugvindt. Het is het belangrijkste navigatie-instrument en het ‘visitekaartje’ van de site.
Een goede visuele header bevat doorgaans:
- Uw Logo: Zorgt voor directe merkherkenning en linkt bijna altijd terug naar de homepage.
- Het Navigatiemenu: De ‘kaart’ van uw website die bezoekers helpt om belangrijke pagina’s (Diensten, Over Ons, Contact) te vinden.
- Een Call-to-Action (CTA): Vaak een opvallende knop (bv. “Vraag offerte aan”) die de belangrijkste actie promoot.
- Optioneel: Een zoekbalk, contactgegevens of een taalkiezer (voor een meertalige site).
Het doel van de visuele header is branding en gebruikerservaring (UX). Het maakt uw site herkenbaar en makkelijk te navigeren.
2. De Technische <head> (Wat u niet ziet)
Dit is de ‘header’ voor ontwikkelaars en zoekmachines. Elke webpagina is opgebouwd uit twee delen code: de <body> (alles wat u ziet) en de <head> (een onzichtbaar instructieblok).
De <head>-sectie is een cruciaal, onzichtbaar deel van de code aan het begin van een HTML-document. Hoewel u het niet ziet, vertelt het de browser en zoekmachines belangrijke informatie over de pagina.
Hierin staan onder andere:
- De Paginatitel (Meta Title): De titel die u bovenaan in uw browsertabblad ziet en de blauwe link in Google-zoekresultaten.
- De Meta Description: De omschrijving van de pagina die Google onder de titel toont.
- Links naar Stylesheets (CSS): Instructies die de browser vertellen hoe de pagina eruit moet zien (kleuren, lettertypes).
- Scripts: Stukjes code voor functionaliteiten zoals Google Analytics, of tracking pixels voor Meta Ads en Google Ads.
Het doel van de technische <head> is SEO, functionaliteit en styling.
Header vs. Footer
Waar de header bovenaan staat met de hoofdnavigatie (“Waar kan ik heen?”), staat de footer onderaan de pagina. De footer bevat meestal secundaire informatie zoals gedetailleerde contactgegevens, links naar sociale media en juridische pagina’s (privacybeleid, algemene voorwaarden).
Beide, zowel de visuele header als de technische <head>, zijn fundamenteel voor een professionele en vindbare website.