What is an HTML header? Definition and application

In a nutshell: What is an HTML header?

The HTML language is used to structure and correctly display text and other elements. The header element is an introductory element that can contain the title, logo and navigation menu of a page, among other things. The HTML header is therefore at the beginning of a website and before the body element with the content of the page.

"header" or "head" - that is the question here!

The "header" and "head" elements are similar in terms of their names, but differ significantly in terms of their function. The " header" element can be used several times on each web page, whereas "head" is only used once. The definition and distinction between the two types of tags is explained below.

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

Due to the far-reaching importance of this element for the technically correct display and accessibility of every website, the page header will be discussed in more detail later in this article.

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.

In a free SEO strategy talk, we uncover untapped potential and develop a strategy to help you become more successful on Google.

head: One element with several important functions

The functions that the heading element fulfills on every website and every subpage of the website can be summarized in three key points.

Transmission of information about the page: Each web page has a different title and content and also differs from the other subpages of a website in other ways. The heading contains the most important information about a page.
Explanation of the relationship to other pages: By integrating the navigation menu into the head element, it becomes clear what relationship the visited page has to the other subpages of the website - for example, whether it is a category page or a subordinate web page in the menu structure.
Control the display of content: The head element is required to ensure that all desired elements are displayed in the correct order and style.

Apart from the title tag, no content element of the heading is visible to the user in the browser. Incidentally, this title tag is of immense importance for search engine optimization (SEO), especially for on-page SEO and technical SEO:

All website operators who want to achieve good rankings in search engines with their website and subpages should attach great importance to a well-maintained and technically correct page header.

I am known from big media such as Stern, GoDaddy, Onpulson & breakfast television and have already worked with over 100+ well-known clients successful on Google.

Google rating

Based on 185 reviews

Trustpilot rating

Based on 100 reviews

Set HTML header tag correctly - the most important tips

The head tag is one of the types of tags that consist of an opening and a closing tag. While the alt tag only requires an opening tag and no closing tag, both tags are required for the HTML header. This is what it looks like:

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

The desired content is placed between the two tags. Examples of typical header content include headings, the meta description and other metadata, logos, navigation and other introductory elements. The header is also suitable for setting local CSS rules within the "style" tag.

It is important for the correct integration of the heading element that it must not be used in the "address", "footer" and "head" elements. Placing a head tag in the heading itself or in the other two tags mentioned would be a technical error that would prevent the website from being read correctly.

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.

Conclusion: What is an 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.