TOC

This article has been localized into German by the community.

Sematische HTML5 Sektions-Tags:

Das header Tag

Das <header> Element ist ein wenig mehrdeutig, kann also für verschiedene Dinge eigesetzt werden. Zuerst einmal sollte man aber wissen, dass das <header> Element keinen neuen Abschnitt eröffnet - es ist der Kopf eines bestehenden Abschnitts. Zweitens darf man es nicht mit dem <head> Element verwechseln - es sind zwei komplett verschiedene Elemente!

Und so sieht es aus:

<header>...</header>

Kann man denn zwei <header> Elemente auf einer Seite haben? Natürlich kann man! Stellt euch vor wir haben drei Blog-Einträge auf einer einzigen Seite. Jeder davon kann einen eigenen <header> Abschnitt haben. Bei mehreren Artikeln auf einer Seite bekommt jeder sein eigenes <header> Element.

Wenn man wieder unseren Mehl-Artikle hinzuzieht heißt das nun, das das <div> Element was wir genutzt haben um Überschrift und Author vom restlichen Inhalt zu trennen, nun mit einem <header> Element ersetzt werden kann.

<article>
	<header>
		<h1>All About Flour</h1>
		<p class="teaser">Wheat flour is the backbone of the baked goods we love.</p>
		<p class="byline">by Jane Doe</p> 
	</header>

	<div id="content">
		<h2>The Two Types of Wheat</h2>
…

Wenn man das <header> Element verwendet sollte man immer mindestens eine Überschrift (in der Form <h1> - <h6>) verwenden, aber man kann auch mehrere verwenden. Man kann auch das <hgroup> Element verwenden, was ich später noch erklären werde. Zuletzt kann man auch noch weiteren "header" / Überschriften-relevanten Inhalt wie eine byline, das Veröffentlichungsdatum, ein Inhaltsverzeichnis etc. im header unterbringen.

Was wir gelernt haben

  • <header> ist ein neues semantisches HTML5 Element
  • Der <header> wird innerhalb eines Abschnitts genutzt (und nicht zwangsweise die Überschrift des gesamten Dokumentes)
  • Man kann in einem Dokument mehrere <header> benutzen
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!