Wanneer iemand voor het eerst met websites aan de slag gaat, komt vaak de vraag naar boven: wat is een header? Kort gezegd is de header het bovenste gedeelte van een website dat je altijd als eerste ziet. Het zet de toon, laat direct zien waar je bent en helpt je om verder te gaan. In dit artikel leggen we stap voor stap uit wat een header is, waarom hij belangrijk is en hoe je er een maakt die duidelijk en prettig werkt.
Wat is een header precies?
De header is het vaste, bovenste deel van elke webpagina. Meestal zie je hier de branding van de site, zoals het logo of de sitenaam, het hoofdmenu voor navigatie en soms extra functies, zoals een zoekbalk, taalkeuze of contactknop. De header is op bijna alle pagina’s hetzelfde, zodat bezoekers houvast hebben. Soms “plakt” de header bovenaan het scherm terwijl je scrolt, soms blijft hij alleen bovenaan de pagina staan. Beide varianten hebben hetzelfde doel, snel overzicht en makkelijke navigatie.
Waarom is een header belangrijk?
Een goede header geeft meteen duidelijkheid. Bezoekers herkennen het merk, vinden snel het menu en kunnen zonder zoekwerk naar een volgende pagina. Een onduidelijke header zorgt voor twijfel en afhaken. Met een heldere header laat je professionaliteit zien, verbeter je de gebruikservaring en vergroot je de kans dat bezoekers blijven.
Belangrijke onderdelen van een header
Logo of branding
Het logo staat vaak linksboven. Het bevestigt dat iemand op de juiste site is. Vrijwel altijd linkt het logo terug naar de homepage, omdat dit voor veel gebruikers vertrouwd is.
Het hoofdmenu is de snelste route naar de belangrijkste pagina’s. Beperk het aantal menu-items en orden ze logisch. Bij een webshop gebruik je vaak productcategorieën. Een submenu kan, maar houd het rustig en voorspelbaar.
Zoekfunctie
Met een zoekbalk vinden bezoekers direct specifieke informatie of producten. Plaats die op een vaste plek, meestal rechtsboven.
Primaire call-to-action, bijvoorbeeld contact of offerte
Een duidelijke knop in de header helpt bezoekers die meteen actie willen nemen. Denk aan ‘Contact’, ‘Offerte aanvragen’ of ‘Afspraak plannen’.
Winkelwagen en account, bij webshops
Toon de winkelwagen en een accountknop consequent in de header, zodat afronden en inloggen altijd dichtbij zijn.
Breadcrumbs of kruimelpad, optioneel
Op grotere sites helpen breadcrumbs om te zien waar je bent binnen de structuur en snel terug te klikken. Daarnaast dragen breadcrumbs bij aan SEO omdat zoekmachines beter begrijpen hoe de pagina’s met elkaar verbonden zijn. In de praktijk zie je dat breadcrumbs meestal net onder de header worden geplaatst, dus niet er direct in. Dat maakt het overzichtelijker voor bezoekers. Soms worden ze wel in de header verwerkt, maar dat is minder gebruikelijk. Wil je meer weten over zoekmachineoptimalisatie in het algemeen, lees dan ook ons artikel over Wat is SEO? voor een uitgebreide uitleg.
Daarnaast kun je ook de officiële richtlijnen lezen via Google Search Central voor extra achtergrondinformatie over breadcrumbs.
Soorten headers en gedrag bij scrollen
Een vaste header blijft bovenaan de pagina staan. Een sticky header blijft zichtbaar terwijl je scrolt en kan compacter worden om ruimte te besparen. Op mobiel is een compacte, duidelijke header extra belangrijk, met een goed herkenbare menuknop en genoeg aanraakruimte.
Best practices voor een sterke header
- Houd de header laag in hoogte zodat de content snel zichtbaar is.
- Zorg voor voldoende contrast en goede leesbaarheid.
- Maak het logo klikbaar naar de homepage.
- Plaats het hoofdmenu op een voorspelbare plek en gebruik duidelijke woorden.
- Toon één primaire call-to-action en vermijd dat je er te veel tegelijk in de header plaatst.
- Test de header op mobiel, tablet en desktop en voorkom dat elementen over elkaar heen vallen.
- Maak de header toegankelijk, met duidelijke linkteksten en toetsenbordnavigatie.
Veelgemaakte fouten in headers
- Te veel menu-items, waardoor bezoekers moeten zoeken.
- Slecht contrast, waardoor de tekst moeilijk leesbaar is.
- Een enorme header die te veel ruimte inneemt.
- Belangrijke knoppen verstopt achter meerdere kliks.
- Geen duidelijke visuele feedback bij hover of focus.
Verschil tussen header, head en hero
De header is het zichtbare bovenste deel van de pagina met logo, menu en knoppen. De head is code in de HTML tussen en is bedoeld voor zaken zoals de paginatitel, meta-informatie en scripts. De hero-sectie is het grote visuele blok direct onder de header, met bijvoorbeeld een afbeelding, titel en korte tekst. Die hero hoort bij de content, niet bij de header zelf.
Waar vind je de header op een website?
De header staat meestal bovenaan elke pagina en ziet er op de meeste pagina’s hetzelfde uit. Dat geeft rust en herkenning. Soms wordt de header gecombineerd met of zelfs onder de hero-sectie geplaatst, afhankelijk van het ontwerp van de site. Als je nog steeds denkt, wat is een header, onthoud dan: het is het vaste deel dat je helpt oriënteren en navigeren.
conclusie
De vraag wat is een header lijkt simpel, maar de impact is groot. Met een duidelijke, lichte en voorspelbare header maken we de website begrijpelijk en prettig in gebruik. Door te kiezen voor een heldere opbouw, een logisch menu en één duidelijke actieknop, helpen we bezoekers snel verder en vergroten we de kans op resultaat.
Wil je daarnaast meer weten over het onderste gedeelte van een website? Lees dan ook ons artikel over Wat is een footer?. Samen geven deze artikelen een compleet beeld van hoe zowel de bovenkant als de onderkant van een website bijdragen aan gebruiksvriendelijkheid en SEO.
Veelgestelde vragen
1. Wat is het verschil tussen een header en een head?
De header is zichtbaar voor bezoekers en bevat logo, menu en knoppen. De head staat in de HTML-code en bevat informatie voor zoekmachines, scripts en instellingen. Bezoekers zien de head niet.
De header staat bovenaan en helpt met oriënteren en navigeren. De footer staat onderaan en bevat vaak contactgegevens, aanvullende links of juridische informatie.
3. Is een sticky header altijd beter?
Niet altijd. Een sticky header is handig bij lange pagina’s, maar maak hem compact zodat hij niet te veel ruimte inneemt. Test op mobiel of hij niet in de weg zit.
4. Hoe groot mag een header zijn?
Houd hem zo klein als kan en zo groot als nodig. Het logo en menu moeten leesbaar zijn, maar de content moet snel in beeld komen.
5. Kunnen we per pagina een andere header gebruiken?
Dat kan, bijvoorbeeld een eenvoudige header op landingspagina’s en een volledige header op de rest. Houd wel de basis hetzelfde voor herkenning.
6. Hoort het logo altijd in de header?
In bijna alle gevallen wel. Het helpt bij herkenning en het logo fungeert als snelle route terug naar de homepage.