This article has been localized into German by the community.
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
