„header“ oder „head – das ist hier die Frage!

Die Elemente „header“ und „head“ ähneln einander von der Bezeichnung her, unterscheiden sich aber von der Funktion her deutlich voneinander. Das Element „header“ kann auf jeder Webseite mehrmals verwendet werden, wohingegen „head“ nur einmal zum Einsatz kommt. Im Folgenden wird auf die Definition und Unterscheidung beider Arten von Tags eingegangen.

 

Das Tag kurz und kompakt!

Mit dem Tag 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 .

 

Aufgrund der weitreichenden Bedeutung dieses Elements für die technisch korrekte Darstellung und Abrufbarkeit jeder Webseite wird im weiteren Verlauf des Beitrags näher auf den Page-Header eingegangen.

 

Das Tag

kurz und kompakt!

Die Inhalte inmitten der Tags

und 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

,

,

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

,

,

etc. stehen, muss man von einem zusätzlichen Header-Tag keinen Gebrauch machen, weil dies die Webseite nur unnötig aufblähen würde.

 

 

head: Ein Element mit mehreren wichtigen Funktionen

Die Funktionen, die das Heading-Element auf jeder Website und jeder Unterseite der Website erfüllt, lassen sich in drei Stichpunkten zusammenfassen.

 

• Übermittlung von Informationen zur Seite: Jede Webseite hat einen anderen Titel und Content und unterscheidet sich auch sonst von den anderen Unterseiten einer Website. Im Heading sind die wichtigsten Informationen zu einer Seite enthalten.
• Erklärung der Beziehung zu anderen Seiten: Durch die Einbindung des Navigationsmenüs in das head-Element wird klar, welche Beziehung die besuchte Seite zu den anderen Unterseiten der Website hat – also zum Beispiel, ob es sich um eine Kategorieseite oder eine in der Menüstruktur untergeordnete Webseite handelt.
• Steuerung der Darstellung von Inhalten: Damit alle gewünschten Elemente in der richtigen Reihenfolge und im richtigen Stil angezeigt werden, ist das head-Element erforderlich.

 

Bis auf das Title-Tag ist kein Inhaltselement des Headings für die User im Browser sichtbar. Jenes Title-Tag ist übrigens für die Suchmaschinenoptimierung (SEO), im Speziellen für die On-Page SEO und für die Technical SEO, von immenser Bedeutung:

 

Sämtliche Website-Betreiber, die mit ihrer Website und den Unterseiten gute Rankings in Suchmaschinen erzielen möchten, sollten großen Wert auf einen gepflegten und technisch korrekt gesetzten Page-Header legen.

 

 

HTML-Header-Tag richtig setzen – die wichtigsten Hinweise

Das head-Tag gehört zu den Arten von Tags, die sich aus einem öffnenden und einem schließenden Tag zusammensetzen. Während das Alt-Tag nur ein öffnendes und kein schließendes Tag benötigt, sind beim HTML-Header beide Tags erforderlich. So sieht es dann aus:

 

• Öffnend:
• Schließend:

 

Zwischen den beiden Tags wird der gewünschte Inhalt platziert. Beispiele für typische Header-Inhalte sind Überschriften, die Meta-Beschreibung sowie weitere Metadaten, Logos, die Navigation und andere einleitende Elemente. Zudem eignet sich der Header dazu, um innerhalb des Tags „style“ lokale CSS-Regeln zu setzen.

 

Wichtig für eine korrekte Einbindung des Heading-Elements ist, dass es in den Elementen „address“, „footer“ und „head“ nicht genutzt werden darf. Ein head-Tag im Heading selbst oder in den anderen beiden genannten Tags zu setzen, wäre ein technischer Fehler, der verhindern würde, dass die Webseite richtig ausgelesen werden kann.

 

Das Heading setzt als einleitendes Element direkt nach Beginn des HTML-Dokuments, also der Webseite, an – will meinen: Nach „“ kommt das öffnende Header-Tag „“. Auf dieses Heading folgt der Body-Teil, der einen öffnenden und schließenden Body-Tag enthält. Im Body werden beispielsweise der Content (öffnend „

“ und schließend „

“) der Seite und die Kontaktdaten des Autors bzw. Website-Betreibers (öffnend „

“ und schließend „

“) hinterlegt.