SEO Glossary: HTML Header

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, among other things, the title, logo, and navigation menu of a page. Thus, the header element is at the beginning of a web page 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 name, but differ significantly in function. The "header" element can be used several times on each web page, whereas "head" is used only once. In the following, the definition and distinction of both types of tags will be discussed.

 

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 retrievability of any web page, the page header will be discussed in more detail from the section after next.

 

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 performs on every website and every subpage of the website can be summarized in three key points.

 

  • Conveying information about the page: Each web page has a different title, content, and otherwise differs from the other subpages of a website. The heading contains the most important information about a page.
  • Explanation of the relationship with other pages: By including the navigation menu in 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.
  • Controls the display of content: To ensure that all desired elements are displayed in the correct order and style, the head element is required.

 

Except for the title tag, no content element of the heading is visible to users in the browser. By the way, 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 search engine rankings with their website and subpages should attach great importance to a well-maintained and technically correct page header.

 

Register now and receive regular tips from the experts. 

 

Set HTML header tag correctly - the most important tips

The head tag belongs to the types of tags that are composed of an opening and a closing tag. While the alt tag requires only an opening tag and no closing tag, the HTML header requires both tags. This is how it looks then:

 

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

 

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

 

It is important for a correct inclusion 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 web page 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.

 

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

 

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

Table of contents:

Table of Contents

Share the post

SEO Glossary

More glossary articles

Further contributions

Interesting blog articles

Specht GmbH: Your SEO & SEA specialists

Secure your free strategy meeting now