Wat is een HTML-header? Definitie en toepassing

In een notendop: Wat is een HTML-header?

De HTML-taal wordt gebruikt om tekst en andere elementen te structureren en correct weer te geven. Het header-element is een inleidend element dat onder andere de titel, het logo en het navigatiemenu van een pagina kan bevatten. De HTML-header staat daarom aan het begin van een website en vóór het body-element met de inhoud van de pagina.

"Kop" of "hoofd" - dat is hier de vraag!

De elementen "header" en "head" lijken qua naam op elkaar, maar verschillen aanzienlijk qua functie. Het element "header" kan op elke webpagina meerdere keren worden gebruikt, terwijl "head" maar één keer wordt gebruikt. De definitie en het onderscheid tussen de twee soorten tags wordt hieronder uitgelegd.

Das Tag <head> kurz und kompakt!

Mit dem Tag <head> wird der obere Bereich einer Webseite eröffnet.

In diesem Tag sind zahlreiche Informationen enthalten, von denen der Großteil für die Website-Besucher nicht einsehbar ist. Doch für die Algorithmen der Suchmaschinen (z. B. Googlebot) und für die Browser ist nahezu jede im Page-Header enthaltene Information unverzichtbar. Geschlossen wird dieses Header-Element mit dem Tag </head>.

Vanwege het verregaande belang van dit element voor de technisch correcte weergave en toegankelijkheid van elke website, wordt de paginakop later in dit artikel uitgebreider besproken.

Das Tag <header> kurz und kompakt!

Die Inhalte inmitten der Tags <header> und </header> sind für Website-Besucher sichtbar. Zum Einsatz kommen diese Tags sowohl in den sichtbaren Kopf-Bereichen einer Webseite als auch zwischendurch auf der Webseite.

Man kann sich merken, dass überall dort, wo nicht nur die Überschriften <h1>, <h2>, <h3> etc. stehen, sondern auch Bilder, Videos oder besondere Visualisierungen in Kombination mit diesen Überschriften genutzt werden, ein zusätzliches Header-Tag zum Einsatz kommen kann.

Dort hingegen, wo nur die Überschriften <h1>, <h2>, <h3> etc. stehen, muss man von einem zusätzlichen Header-Tag keinen Gebrauch machen, weil dies die Webseite nur unnötig aufblähen würde.

Tijdens een gratis SEO strategie consult ontdekken we onbenut potentieel en ontwikkelen we een strategie om je succesvoller te maken op Google.

hoofd: Een element met verschillende belangrijke functies

De functies die het heading-element op elke website en elke subpagina van de website vervult, kunnen worden samengevat in drie belangrijke punten.

Overdracht van informatie over de pagina: Elke webpagina heeft een andere titel en inhoud en verschilt ook op andere manieren van de andere subpagina's van een website. De titel bevat de belangrijkste informatie over een pagina.
Uitleg van de relatie tot andere pagina's: Door het navigatiemenu in het head-element te integreren, wordt duidelijk welke relatie de bezochte pagina heeft tot de andere subpagina's van de website - bijvoorbeeld of het een categoriepagina is of een ondergeschikte webpagina in de menustructuur.
De weergave van inhoud regelen: Het head-element is nodig om ervoor te zorgen dat alle gewenste elementen in de juiste volgorde en stijl worden weergegeven.

Afgezien van de title-tag is geen enkel inhoudselement van de heading zichtbaar voor de gebruiker in de browser. Overigens is deze title-tag van immens belang voor zoekmachineoptimalisatie (SEO), vooral voor on-page SEO en technische SEO:

Alle websitebeheerders die met hun website en subpagina's goed willen scoren in zoekmachines, moeten veel belang hechten aan een goed onderhouden en technisch correcte paginakop.

Ik ben bekend van grote media zoals Stern, GoDaddy, Onpulson & ontbijttelevisie en heb al gewerkt met meer dan 100+ bekende klanten succesvol op Google.

Google-beoordeling

Gebaseerd op 185 beoordelingen

Trustpilot beoordeling

Gebaseerd op 100 beoordelingen

De HTML-headertag correct instellen - de belangrijkste tips

De head tag is een van de typen tags die bestaan uit een openings- en een sluitingstag. Terwijl de alt-tag alleen een openingstag en geen sluitingstag vereist, zijn beide tags vereist voor de HTML-header. Zo ziet het eruit:

Öffnend: <head>
Schließend: </head>

De gewenste inhoud wordt tussen de twee tags geplaatst. Voorbeelden van typische header-inhoud zijn koppen, de meta description en andere metadata, logo's, navigatie en andere inleidende elementen. De header is ook geschikt voor het instellen van lokale CSS-regels binnen de "style" tag.

Voor een correcte integratie van het heading-element is het belangrijk dat het niet wordt gebruikt in de elementen "adres", "footer" en "head". Het plaatsen van een head-tag in de heading zelf of in de andere twee genoemde tags zou een technische fout zijn waardoor de website niet correct kan worden gelezen.

Das Heading setzt als einleitendes Element direkt nach Beginn des HTML-Dokuments, also der Webseite, an – will meinen: Nach „<html>“ kommt das öffnende Header-Tag „<head>“. Auf dieses Heading folgt der Body-Teil, der einen öffnenden und schließenden Body-Tag enthält. Im Body werden beispielsweise der Content (öffnend „<article>“ und schließend „</article>“) der Seite und die Kontaktdaten des Autors bzw. Website-Betreibers (öffnend „<address>“ und schließend „</address>“) hinterlegt.

Conclusie: Wat is een HTML-header?

Der Begriff HTML-Header wird fälschlicherweise für zwei verschiedene Elemente genutzt: für <head> und <header>.

Die Unterscheidung beider Elemente ist jedoch essenziell, denn vor allem das Element <head> erfüllt eine unverzichtbare Funktion: Es sollte immer am Anfang des HTML-Dokuments genutzt werden und mit dem Title, den Metadaten sowie weiteren Angaben die wichtigsten Informationen über die Seite liefern.

Anders ist es mit den <header>-Elementen, die mehrmals verwendet werden können und die Überschriften-Bereiche rund um die <h1>, <h2>, <h3> und weitere Überschriften definieren.