Wat is een website header?

De header is de balk bovenaan je website. Meestal met je logo links, een menu, en rechts iets om contact op te nemen. Hij staat op elke pagina en is daarmee het onderdeel dat je bezoeker het vaakst ziet.

Let op: header betekent in webteksten twee dingen. Deze balk, en de koppen in je tekst die H1 en H2 heten. Dit stuk gaat over de balk.

Wat de header doet

De header beantwoordt in een halve seconde vier vragen. Waar ben ik. Wie is dit. Waar kan ik heen. Wat kan ik hier doen.

Neem iemand die via Google binnenkomt op een dienstpagina die hij nooit eerder zag. Hij weet niet of hij bij een groot bureau of bij een eenmanszaak is beland. Je logo en je menu vertellen dat in één oogopslag.

De header is bovendien het enige onderdeel dat identiek is op elke pagina van je site. Dat maakt hem het houvast van je bezoeker. Verandert hij per pagina van vorm of plek, dan moet iemand telkens opnieuw zoeken waar hij op moet klikken.

Hij is ook je uitweg. Wie op een pagina belandt die niet klopt, gebruikt je menu of je logo om verder te komen. Zonder die uitweg drukt hij op de terugknop en is hij weg.

Header of kop: hetzelfde woord, twee dingen

Zoek je op header, dan krijg je artikelen over twee onderwerpen door elkaar. De balk bovenaan je site, en de koptags in je tekst.

Koptags zijn de H1 tot en met H6 in je HTML. Ze geven de opbouw van je tekst aan: de H1 is de titel van de pagina, de H2's zijn de hoofdstukken, de H3's de onderdelen daarbinnen. Zoekmachines lezen die opbouw en schermlezers gebruiken hem om door een pagina te springen. Waar je je zoekwoorden in die koppen zet, staat in het artikel over zoekwoordplaatsing.

Verwarrend genoeg bestaat er in HTML ook een element dat letterlijk header heet, en dat is wel de balk. In e-mail en in het verkeer tussen browser en server betekent header weer iets anders: technische regels die je nooit ziet.

Wat erin hoort en wat eruit mag

De vier onderdelen

• Je logo, linksboven, met een link naar je startpagina. Mensen verwachten dat en klikken erop. Zet je bedrijfsnaam als alt-tekst bij de afbeelding, want dat is wat een schermlezer voorleest.
• Een menu met de belangrijkste pagina's. Vijf tot zeven items, niet meer.
• Eén duidelijke actie. Een knop met Contact, Offerte aanvragen of Bel ons. Dit is het onderdeel dat het meest wordt vergeten.
• Je telefoonnummer als bellen belangrijk is voor je bedrijf. Klikbaar, zodat het op een telefoon één tik is.

Bij een webshop komt daar een winkelmandje bij, rechtsboven, met het aantal artikelen erin. Bij een portaal of ledensite een inlogknop. Dat zijn de enige twee uitzonderingen die ik in de praktijk echt nodig vind.

Verder niets. Elk extra element maakt de rest minder zichtbaar.

Wat je weglaat

Sociale pictogrammen bovenaan. Die sturen je bezoekers weg van je site naar een plek waar je concurrent ook staat. Zet ze in de footer, waar ze staan voor wie ernaar zoekt.

Een zoekbalk, tenzij je een webshop of een grote kennisbank hebt. Op een gewone bedrijfssite van twaalf pagina's wordt hij nauwelijks gebruikt, en de zoekfunctie van WordPress levert bovendien matige resultaten.

Een taalkiezer als je maar één taal aanbiedt. Ik zie hem regelmatig staan op sites die alleen Nederlands zijn, als overblijfsel van een thema.

Een tweede knop naast je hoofdknop. Twee gelijkwaardige acties naast elkaar levert er meestal nul op, omdat de bezoeker moet kiezen in plaats van klikken.

En een balk boven je header met openingstijden, adres, telefoonnummer en drie pictogrammen. Die hoogte gaat af van je pagina en de inhoud hoort in je footer of op je contactpagina.

Het menu

Hier gaat het het vaakst mis. Een menu met twaalf items en drie uitklapniveaus is niet compleet maar onbruikbaar.

Noem items naar wat mensen zoeken, niet naar hoe je bedrijf is ingedeeld. "Prijzen" werkt beter dan "Investering", "Wat ik doe" beter dan "Portfolio". Je interne organisatie interesseert je bezoeker niet.

Zet je belangrijkste pagina links en je actieknop rechts. Wat in het midden staat wordt het minst aangeklikt.

Gebruik hooguit één uitklapniveau. Een submenu dat zelf weer een submenu opent, is met een muis al lastig en op een aanraakscherm niet te doen. Heb je echt veel pagina's, kies dan een megamenu dat in één keer opengaat met alles zichtbaar, in plaats van een cascade.

Markeer de pagina waar iemand op staat. Dat kost één regel opmaak en het scheelt je bezoeker het gevoel dat hij verdwaald is.

Hoe een header technisch in elkaar zit

In HTML zit je header in een header-element en je menu in een nav-element, met de menu-items als lijst met links. Die opbouw is niet cosmetisch: schermlezers en zoekmachines gebruiken hem om te bepalen wat navigatie is en wat inhoud.

In WordPress zit de header op één plek en niet op elke pagina apart. Bij een klassiek thema staat hij in het bestand header.php. Bij een blokthema bewerk je hem in de site-editor, die sinds WordPress 5.9 in januari 2022 beschikbaar is. Werk je met Beaver Builder of Elementor, dan maak je hem als globale koptekst in de themabouwer.

Staat je header op één plek, dan verandert een aanpassing overal tegelijk. Ik kom nog steeds sites tegen waarin hij per pagina is nagebouwd. Daar staat na een jaar op vier pagina's een oud telefoonnummer en op één pagina een menu-item dat allang is verwijderd.

Zet je een header met een paginabouwer in elkaar, controleer dan of het thema er niet zelf ook nog een toont. Twee headers boven elkaar is een klassieke uitkomst en de oplossing is de themaheader uitzetten, niet hem met opmaak wegdrukken.

Op een telefoon

Daar wordt je menu een hamburger: drie streepjes waar het menu achter zit. Dat werkt, mits je aan een paar dingen denkt.

Houd je actieknop zichtbaar naast de hamburger. Hem verstoppen in het uitklapmenu kost je aanvragen, want een deel van je bezoekers opent dat menu nooit.

Maak de tikvlakken groot genoeg, minstens 44 bij 44 pixels, met ruimte ertussen. Een vinger is geen muisaanwijzer.

Houd de balk laag. Een header van 140 pixels hoog eet op een telefoon een kwart van het scherm op nog voordat je iets hebt gelezen. Zet je logo op mobiel kleiner dan op desktop; dat is bij elke paginabouwer een aparte instelling.

Zorg dat het uitklapmenu te sluiten is met een kruisje op een plek waar je duim komt, en laat de pagina eronder niet meescrollen zolang het openstaat. Meer van dit soort details staat in het artikel over je website optimaliseren voor mobiel.

Meescrollen of niet

Een header die blijft staan tijdens het scrollen is handig op lange pagina's, want je actieknop blijft binnen bereik.

Op een telefoon is het een afweging: hij neemt permanent ruimte in. De prettigste oplossing is een balk die verdwijnt als je naar beneden scrollt en terugkomt zodra je omhoog gaat. Zo heb je hem als je hem nodig hebt en verder niet.

Wat je niet doet: een grote header die blijft staan en de helft van het scherm bezet houdt. Laat een meescrollende header krimpen zodra iemand begint te scrollen, met een kleiner logo en minder ruimte eromheen.

Let bij een meescrollende header op ankerlinks. Klik je op een link naar een kop verderop de pagina, dan springt de browser naar die kop en verdwijnt hij precies onder je balk. Dat los je op met een marge boven het aanknopingspunt, in CSS met scroll-margin-top. Dit is een van die fouten die niemand meldt en iedereen irritant vindt.

Snelheid

De header laadt op elke pagina als eerste, dus wat hier zwaar is vertraagt je hele site.

Houd je logo klein, in SVG als het kan. Een SVG is opgebouwd uit lijnen in plaats van pixels, blijft daardoor scherp op elk scherm en is vaak een paar kilobyte groot. Een logo als PNG van een paar honderd kilobyte kom ik vaker tegen dan me lief is. Hoe je afbeeldingen kleiner krijgt staat bij Shortpixel.

Gebruik geen grote achtergrondafbeelding in de balk zelf. Staat er wel een brede afbeelding direct onder je header, dan is dat vaak het grootste element op je scherm en bepaalt die de gemeten laadtijd van je pagina. Geef hem breedte en hoogte mee, dan reserveert de browser de ruimte en verspringt er niets tijdens het opbouwen.

Beperk je lettertypes tot wat je echt gebruikt. Elk extra gewicht is een apart bestand, en die bestanden worden opgehaald voordat er tekst in beeld komt.

Laad geen compleet pictogrammenpakket voor de drie tekens in je header. Zet die drie als losse SVG in je pagina; dat scheelt een bestand van honderden kilobytes.

De header en je merk

Je logo, je kleur en je lettertype staan hier op elke pagina. Voor de meeste bezoekers is dit het enige stukje huisstijl dat ze bewust zien.

Houd de header daarom stabiel. Dezelfde plek, dezelfde hoogte, dezelfde kleur op je hele site. Een header die op de homepage transparant over een foto ligt en elders wit is, is verdedigbaar, maar dan moet je logo in beide gevallen leesbaar blijven. Wit logo op een lichte lucht is de klassieke misser.

Contrast is hier geen detail. Grijze menu-items op een witte balk zien er in een ontwerp rustig uit en zijn op een telefoon in de zon niet te lezen.

Wat ik zelden nuttig vind: een slogan naast je logo. Er is te weinig ruimte voor iets zinnigs, en je belofte hoort in de kop van de pagina eronder.

Wat er direct onder de header staat

Het gebied direct onder de balk krijgt vaak de naam header of hero. Daar staat wat je doet, voor wie, en één knop.

Dat blok bepaalt of iemand blijft. Zet er één zin die uitlegt wat je aanbiedt in gewone woorden, en één actie. Als je eigen moeder na het lezen van die zin niet kan navertellen wat je verkoopt, is hij niet goed.

Een schuifshow met vier wisselende beelden werkt hier slecht. Mensen zien in de praktijk alleen het eerste beeld, de rest schuift voorbij terwijl ze al aan het scrollen zijn. Je zet vier boodschappen op de plek waar er één past.

Vermijd tekst die in de afbeelding zelf is gebakken. Die schaalt niet mee op een klein scherm en telt niet mee voor je vindbaarheid. Zet hem als tekst over de afbeelding heen.

Header en conversie

De header is de plek waar je het vaakst gezien wordt en dus de goedkoopste plek om iets aan te verbeteren.

De grootste winst zit bijna altijd in één knop toevoegen die er nog niet was. Wat daarin hoort te staan, staat in het artikel over de call-to-action: een werkwoord en een resultaat, geen "Meer informatie".

Geef die knop een kleur die verder nergens op je site voorkomt. Als je knopkleur ook je koptekstkleur en je linkkleur is, valt hij nergens op.

Bij een lokaal bedrijf is een klikbaar telefoonnummer vaak waardevoller dan een formulier. Zet het als link met tel: ervoor, dan belt een telefoon meteen.

En kijk of je knop op mobiel binnen het eerste scherm staat. Staat hij alleen in het hamburgermenu, dan bestaat hij voor een groot deel van je bezoek niet.

Wat de header met je vindbaarheid doet

Je menu is een set links die op elke pagina van je site staat. Daarmee bepaalt het welke pagina's het meeste interne linkgewicht krijgen.

Een pagina die in je hoofdmenu staat, wordt door zoekmachines dus als belangrijker gezien dan een pagina die alleen ergens in een tekst genoemd wordt. Staat je belangrijkste dienstpagina niet in je menu, dan geef je hem die voorsprong niet. Een menu met dertig items verdeelt datzelfde gewicht juist over dertig pagina's.

Gebruik in je menu de woorden waarop mensen zoeken. "Dakkapel plaatsen" is als menu-item duidelijker en beter vindbaar dan "Onze werkzaamheden".

Staat je site diep genoeg om kruimelpaden te rechtvaardigen, zet die dan direct onder je header. Hoe dat werkt staat bij breadcrumbs.

Toegankelijkheid

De header is het eerste dat een schermlezer tegenkomt en de plek waar toetsenbordgebruikers stranden.

• Een skip-link. Een verborgen link bovenaan die zichtbaar wordt zodra je met de tabtoets begint en direct naar de inhoud springt. Zonder die link moet iemand elke keer je hele menu doorlopen voordat hij bij de tekst is.
• Een zichtbare focus. Als je met tab door je menu loopt, moet je zien waar je bent. Veel thema's zetten die omlijning uit omdat hij lelijk zou zijn.
• De hamburger als echte knop. Een button met een toestand die aangeeft of het menu open of dicht is, geen plaatje met een klikfunctie eromheen.
• Uitklapmenu's die op klik werken. Een submenu dat alleen opengaat als je er met de muis overheen gaat, bestaat niet voor wie een toetsenbord of een aanraakscherm gebruikt.

Voor webwinkels en een aantal andere diensten is dit sinds 28 juni 2025 geen vrije keuze meer. De Europese toegankelijkheidsrichtlijn geldt vanaf die datum, met een uitzondering voor micro-ondernemingen met minder dan tien medewerkers en een omzet onder twee miljoen euro. Ook zonder die plicht is dit werk van een middag dat je site voor iedereen bruikbaarder maakt.

Wat er misgaat bij thema's en paginabouwers

• Het menu springt te vroeg in een hamburger. Veel thema's schakelen om bij 1024 pixels, waardoor tabletbezoekers een hamburger krijgen terwijl er ruimte zat is.
• Het logo wordt te groot op mobiel. Een logo dat op desktop 60 pixels hoog is en op mobiel meeschaalt naar 90, duwt je hele pagina naar beneden.
• De cookiebanner ligt over de header. Op een telefoon blokkeert hij dan je menu en je knop tegelijk.
• Een transparante header over een lichte afbeelding. Op de homepage getest met een donkere foto, en op de nieuwspagina staat er wit op wit.
• De header verspringt tijdens het laden. Meestal doordat het logo geen vaste hoogte heeft, of doordat een lettertype pas later binnenkomt en de menu-items breder maakt.

Loop na elke aanpassing aan je header de mobiele weergave na. Bij een paginabouwer is dat één knop, en het scheelt de helft van deze problemen.

Testen en bijstellen

Wat je test

Pak je telefoon en probeer vanaf je startpagina in twee tikken op je contactpagina te komen. Lukt dat niet, dan klopt er iets niet.

Kijk daarna op 320 pixels breed of je logo en je knop nog naast elkaar passen. Daar breekt het meestal, en die schermbreedte is nog steeds in gebruik.

Loop je header één keer met de tabtoets door, zonder muis. Kom je bij elk menu-item, zie je waar je bent, en kun je de hamburger openen met de enter- of spatietoets.

Laat iemand anders zoeken wat je aanbiedt. Geef hem een opdracht ("zoek uit wat het kost") en kijk toe zonder iets te zeggen. Als hij twijfelt bij je menu-items, zijn die niet duidelijk genoeg. Dit is de goedkoopste vorm van gebruikersonderzoek die er is, en er staat meer over in het artikel over gebruikerservaring.

Wanneer je hem aanpast

Herkenning is hier waardevol, dus verander niet elk kwartaal iets. Vaste klanten navigeren op geheugen.

Er zijn wel momenten waarop je hem tegen het licht houdt. Als je een dienst toevoegt of stopt. Als je uit je statistieken ziet dat een menu-item bijna nooit wordt aangeklikt. Als mensen je bellen met vragen waarvan het antwoord op een pagina staat die niet in je menu staat.

Verander dan één ding tegelijk, wacht een maand en kijk of je aanvragen anders lopen. Testen met twee versies naast elkaar klinkt verstandig en is bij weinig bezoek zinloos, omdat je te lang moet wachten op een betrouwbaar verschil. Bij een paar honderd bezoekers per maand vertrouw ik liever op een half uur meekijken bij vijf mensen.

Veelgestelde vragen over de website header

Wat hoort er in een website header?

Je logo linksboven met een link naar je startpagina, een menu met vijf tot zeven items, en rechts één duidelijke actieknop. Bij een lokaal bedrijf ook een klikbaar telefoonnummer, bij een webshop een winkelmandje. Twijfel je over een element, zet het dan in je footer en kijk of iemand het mist.

Wat is het verschil tussen een header en een H1?

De header is de balk bovenaan je site met je logo en je menu. De H1 is de belangrijkste kop in je tekst, meestal de titel van de pagina. Ze hebben niets met elkaar te maken behalve het woord.

In het Nederlands wordt "header" voor allebei gebruikt. Voor de koppen in je tekst is "kop" het duidelijkere woord.

Hoe hoog moet een header zijn?

Op desktop rond de 70 tot 90 pixels, op een telefoon lager. Vuistregel: je header mag op een telefoon niet meer dan ongeveer een tiende van het scherm innemen. Blijft hij meescrollen, dan is klein houden nog belangrijker, want die ruimte ben je bij elke schermpositie kwijt.

Moet mijn header meescrollen?

Op lange pagina's is dat handig, omdat je actieknop dan altijd bereikbaar blijft. Op korte pagina's voegt het weinig toe. De prettigste variant verdwijnt bij naar beneden scrollen en komt terug zodra iemand omhoog gaat.

Hoeveel menu-items mag ik hebben?

Vijf tot zeven werkt voor de meeste bedrijfssites. Boven de negen wordt het een lijst waarin mensen gaan lezen in plaats van kiezen.

Heb je meer pagina's, groepeer die dan onder één uitklapniveau of zet ze in je footer. Niet elke pagina hoeft in je menu te staan om gevonden te worden.

Waar hoort mijn logo in de header?

Linksboven, met een link naar je startpagina. Dat is waar vrijwel iedereen het verwacht en waar mensen klikken om terug te komen. Een logo in het midden kan bij een merk dat op uitstraling drijft, maar het kost je die vanzelfsprekendheid.

Horen social media pictogrammen in de header?

Nee. Bovenaan sturen ze bezoekers weg van je site, precies op het moment dat je ze binnen hebt. In je footer staan ze prima voor wie ze zoekt. De enige uitzondering is een bedrijf dat helemaal op één kanaal draait en waarvan de site vooral doorverwijst.

Moet er een zoekbalk in mijn header?

Alleen bij een webshop of een site met veel artikelen. Op een bedrijfssite van tien tot twintig pagina's wordt hij nauwelijks gebruikt en neemt hij ruimte in van je knop.

Zet je hem er wel in, controleer dan of de resultaten bruikbaar zijn. De standaardzoekfunctie van WordPress sorteert op datum in plaats van op relevantie, en dat valt tegen.

Hoe pas ik de header in WordPress aan?

Dat hangt af van je thema. Bij een blokthema doe je het in de site-editor onder Weergave, bij een klassiek thema via de customizer of in header.php. Werk je met een paginabouwer, dan zit de header in de themabouwer van die plugin. Verander hem altijd op één plek en niet per pagina.

Moet mijn telefoonnummer in de header staan?

Als bellen bij jou tot opdrachten leidt, ja. Voor een loodgieter of een garage is het vaak de belangrijkste knop van de hele site. Maak hem klikbaar met een tel-link, want een nummer dat je moet overtypen wordt op mobiel zelden gebeld.

Waarom verspringt mijn header tijdens het laden?

Meestal omdat het logo geen vaste hoogte heeft of omdat het lettertype later binnenkomt en de menu-items dan breder worden. De browser bouwt de balk eerst met een vervangend lettertype op en tekent hem daarna opnieuw.

Geef je logo breedte en hoogte mee en zorg dat je lettertype vroeg wordt geladen. Dat verspringen telt mee in de snelheidsmeting van Google.

Vertraagt een grote afbeelding in mijn header mijn site?

Ja, en dubbel zo hard omdat de header op elke pagina laadt. Een brede foto direct onder je balk is vaak het grootste element in beeld en bepaalt daarmee de gemeten laadtijd. Comprimeer hem, lever hem in WebP en geef hem afmetingen mee.

Mag de header per pagina verschillen?

De inhoud houd je gelijk. De vorm mag afwijken op één plek: een landingspagina uit een advertentie, waar je het menu weglaat zodat er maar één ding te doen is. Verder is elke afwijking verwarrend, want je bezoeker heeft de eerste pagina gebruikt om te leren waar alles staat.

Hoe maak ik mijn header toegankelijk?

Zorg voor een skip-link naar de inhoud, een zichtbare focus als je met de tabtoets navigeert, en een hamburger die een echte knop is met een aan- en uittoestand. Uitklapmenu's moeten op klik werken en niet alleen op muisaanwijzing.

Controleer daarnaast het contrast van je menutekst. Voor webwinkels en enkele andere diensten geldt sinds 28 juni 2025 de Europese toegankelijkheidsrichtlijn, met een uitzondering voor micro-ondernemingen.

Hoeveel mensen heb ik nodig om mijn menu te testen?

Vijf is genoeg om de grootste problemen te vinden. Daarboven zie je vooral dezelfde struikelblokken opnieuw.

Twijfelt iemand bij een menu-item of klikt hij op de verkeerde, dan ligt het aan het woord dat er staat en niet aan de bezoeker.