Das hier oben ist das neue header-Element. Das W3C meint dazu in 4.4 Sections: A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.Link
Auf gut deutsch: header steht für einen wie auch immer gearteten, oben stehenden Bereich. Man kann dort das ebenfalls neue hgroup-Element unterbringen, aber auch ein Inhaltsverzeichnis (ich verstehe dies auch als Navigation), ein Suchfeld (weil dies heute vom Nutzer „irgendwo oben“ erwartet wird, oder aber auch Logos und ähnliche Grafiken (keine reinen Schmuck-Elemente).
Ein section-Element
Diese Unterzeile befindet sich in einem header-Tag.
Das section-Tag kennzeichnet generische Bereiche in einem Dokument oder einer App. In einem solchen Kontext ist section die Gruppe eines Themas, typischerweise mit einem eigenen heading, sprich, hgroup-Element. Beispielsweise könnten das sein:
Kapitel
Tabs in einer App oder einem Dialog
(nummerierte) Sektionen einer Diplomarbeit
Einleitung, Neuigkeiten und Kontakt auf einer Homepage (meint: einzelnen Seite)
Doch, sollten die Inhalte eher dazu geeignet sein, syndiziert zu werden (meint: in möglicherweise anderem Kontext mehrfach Verwendung finden), ist das article-Tag die bessere Wahl.
section 2: Eine H1 im Content
Danke der neuen Sektions-Elemente kann (und soll) nun endlich die Hirachie der Überschriften jeweils bei 1 anfangen. War man früher häufig eine H1 als exklusiven Seiten-Titel verwendet, oder gar eine ganze Website mit einer solch hoch gelagerten Überschrift übertitelt, können nun mehrere H1 auf „einer Seite“ vorkommen.
So kann jede Sektion – korrekterweise auch noch innerhalb ihres eigenen header-Bereichs – „bei 1 anfangen“.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
section 3: Eine H1 im Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS-Columns
Dieser Text befindet sich in einer weiteren Section. Sie ist mit dem neuen CSS3-Attribut Columns (hier nur Webkit) versehen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ein article-Element
Diese Unterzeile enthält das neue time-Element: . Beides (h1 und time) wiederum in einem header.
Das hier ist das neue article-Element. Das W3C meint dazu in 4.4 Sections, Sections: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.Link
Ein „Artikel“ meint also mit einem solchen Abschnitt einen Bereich, der (beispielsweise via Atom/RSS) für sich genommen abgeschlossen ist und (auch) anderswo verwendet werden könnte. Beispielsweise könnten das sein:
Blog-Posts
Magazin- und Zeitungsartikel
Kommentare (article können – und sollen – auch verschachtelt werden)