article / section / address

Das article-Element steht für einen Inhalt, der völlig unabhängig und für sich allein stehend sinnvoll ist. Wenn man diesen Inhalt aus der Webseite heraustrennen und in einem Newsletter, einem RSS-Feed oder auf einer anderen Seite veröffentlichen würde, müsste er immer noch komplett verständlich sein.

• Typische Anwendungsfälle: Ein Blogbeitrag, ein Zeitungsartikel, ein Forenpost, eine Produktkarte in einem Online-Shop oder ein einzelner User-Kommentar.
• Wichtig: Ein article sollte im Regelfall immer eine eigene Überschrift (<h1> - <h6>) haben.

article Elemente sind gedacht für Blog Artikel, Forum Postings, Magazin Artikel, Statusmeldungen oder auch Benutzerkommentare in Blog Artikeln. article - Elemente können verschachtelt werden. Man kann auch andere Html Elemente wie section, header, footer innerhalb eines article - Elements einfügen, um dieses zu strukturieren. In einem Artikel stehen isolierte Beiträge oder anders ausgedrückt Inhalte, die auch ohne den Rest der Seite Sinn machen.

Im Gegensatz zu section erscheint in einem article Text, der auch für sich allein genommen Sinn macht.

Ein Section innerhalb eines articles hätte die Bedeutung eines Kapitels. Sofern man mehrere articles zu einem bestimmten Thema erzeugen möchte, macht es Sinn, diese in einem section Element zu setzen.

Eine section gruppiert Inhalte, die thematisch zusammengehören, aber für sich allein genommen keinen Sinn ergeben. Es ist ein Kapitel oder ein Unterpunkt eines größeren Ganzen.

• Wichtigste Regel: Nutze section niemals nur für das Design (z. B. um einen farbigen Hintergrund zu erstellen). Dafür ist weiterhin das bedeutungslose <div> da. Eine section teilt ein Dokument logisch auf.
• Wichtig: Auch eine section sollte fast immer eine Überschrift haben, die erklärt, worum es in diesem Abschnitt geht.

section ist ein weiteres semantisches HTML5 Element. Hiermit werden Abschnitte nach inhaltlichen Gesichtspunkten getrennt. Wenn es darum geht einen Designbereich zu definieren, nimmt man stattdessen ein div Element.

Das Zusammenspiel: Wer verschachtelt wen?

Beide Richtungen sind erlaubt, bedeuten aber etwas völlig Anderes:

• section innerhalb von article: Ein langer Blogbeitrag (<article>) wird in mehrere Kapitel (z. B. "Einleitung", "Hauptteil", "Fazit") unterteilt. Jedes dieser Kapitel ist eine <section>.
• article innerhalb von section: Eine Nachrichtenseite hat einen Abschnitt für "Sport-News" (<section>). Innerhalb dieser Sektion befinden sich mehrere eigenständige Kurznachrichten (jeweils ein <article>).

Dieses Element wird oft missverstanden. Es ist nicht dafür da, eine beliebige Postadresse (z. B. die Adresse eines Hotels in einem Reiseblog) auszuzeichnen! Es dient ausschließlich dazu, die Kontaktmöglichkeiten des Autors oder Eigentümers des Dokuments (oder des aktuellen article) bereitzustellen.

• Inhalt: Name des Autors, Link zur Website, E-Mail-Adresse, Telefonnummer oder die physische Adresse der Redaktion/Firma.
• Platzierung: Meistens im <footer> der gesamten Webseite oder im <footer> eines bestimmten Artikels.

Sie stehen am Ende eines Bereiches und sind sozusagen die Credits im Abspann. Man sollte keine anderen Elemente für Webseiten Bereiche innerhalb eines address Elementes einfügen wie header, footer, article