Einen Abschnitt (section) definieren im HTML5
Das Element section im HTML5
Das article-Element hat einen semantisch weniger spezifischen Cousin namens section – auch dies ist eine Neuerung in HTML5.
section wird in HTML5 so definiert:
Das section-Element repräsentiert einen generischen Bereich eines Dokuments oder einer Anwendung. Mit Bereich ist in diesem Kontext eine thematische Gruppierung von Inhalten gemeint, üblicherweise zusammen mit einer Überschrift.
Beispiele für solche Bereiche wären Kapitel, die verschiedenen, mit Reitern (Tabs) versehenen Seiten in einer Dialogbox mit Tabs oder die nummerierten Abschnitte einer Hausarbeit. Die Homepage einer Website kann in die Bereiche Einleitung, News und Kontaktinformationen aufgeteilt werden.
Die Elemente article und section sind sich recht ähnlich. Wenn Sie nicht ganz sicher sind, wie beide zu unterscheiden sind, lesen Sie im unteren Bereich Wie unterscheiden Sie zwischen article und section?.
Einen Abschnitt definieren
- Tippen Sie
<section>. - Geben Sie die Inhalte des Abschnitts ein – eine beliebige Anzahl von Elementen wie Absätze, Listen, Audio, Video, Fotos, Abbildungen usw.
- Tippen Sie
</section>.
Der Code ist der gleiche wie in dem Artikel erstellen im HTML5, außer dass ich beide Abschnitte des article, der auf die Einführung folgt, mit section eingefasst habe. Auch dieser Code wurde aus Platzgründen gekürzt.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
<nav role="navigation">
<ul>
<li><a href="#titel-html5">Der Titel im HTML5</a></li>
<li lang="de"><a href="#überschriften-html5">Überschriften im HTML5</a></li>
<li><a href="#textabsätze-html5">Textabsätze im HTML5</a></li>
</ul>
</nav>
</header>
<article>
<h1 id="html5-lernen">
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
</p>
<p>
Zunächst sehen wir uns aber an, wie wir mit den neuen <a href="#elementen">Elementen</a> von HTML5 unsere Seiten besser strukturieren können. In diesem Kapitel erforschen wie die folgenden neuen Elemente und Funktionen: Kopfzeilen, Fußzeilen und Navigationsmöglichkeiten. HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten.
</p>
<section>
<h2 id="elementen" lang="de">
Elementen
</h2>
<p>
Zunächst sehen wir uns aber an, wie wir mit den neuen <a href="#elementen">Elementen</a> von HTML5 unsere Seiten besser strukturieren können. In diesem Kapitel erforschen wie die folgenden neuen Elemente und Funktionen: Kopfzeilen, Fußzeilen und Navigationsmöglichkeiten. HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten.
</p>
</section>
<section>
<h2 id="spezifikation">
Spezifikation
</h2>
... [weitere Absätze] ...
</section>
</article>
</body>
</html>
Nun besitzt die Seite header-, nav-, article- und section-Elemente und auch die entsprechenden Inhalte dafür. Die Standarddarstellung ist genauso wie vor dem Einfügen der section-Elemente.
Die Elemente sind section, nav, article und aside eines der vier Elemente, die die Seite in Bereiche aufteilen kann.
Standardmäßig werden Sie sicher keinen Unterschied erkennen, wenn Sie eine Seite mit sections (bzw. articles) ansehen. Wichtig ist hier aber, dass Sie die Semantik Ihres Dokuments stärken, wenn Sie sie einsetzen. Natürlich können Sie die Elemente section und article nach Belieben mit CSS formatieren.
Behalten Sie im Hinterkopf, dass
section kein generischer Container wie div ist, weil section immer eine bestimmte Bedeutung vermittelt und div hingegen gar keine semantische Aussagekraft hat.
Es gibt mehrere Beispiele in diesem Kapitel, die Ihnen helfen, ein Gefühl dafür zu bekommen, wie man sowohl article als auch section auf vielerlei Art verwendet.
Wie unterscheiden Sie zwischen article und section?
Ich habe absichtlich die Definition von HTML5 von section und article zitiert in dem Artikel erstellen im HTML5, damit Sie die Abgrenzung nachvollziehen können, weil sie manchmal sehr subtil ist. Gehen Sie wie folgt vor: Ist Ihr Inhalt ein unabhängiges Stück Inhalt, das sich für eine Syndizierung eignet? Falls ja, nehmen Sie article. (Anderenfalls nehmen Sie in den meisten Fällen section.) Das bedeutet nicht, dass Sie eine Syndizierung vornehmen müssen oder Inhalte von article auf andere Weise zu veröffentlichen haben, sondern nur, dass sich der Inhalt dafür eignet.
Wenn Sie immer noch der Ansicht sind, dass sich article und section gelegentlich sehr ähneln – keine Sorge, das geht auch anderen so. Auch erfahrene Entwickler setzen diese beiden Elemente gelegentlich unterschiedlich ein.
Wie bereits erwähnt, gibt es nicht immer die eine richtige Wahl, wenn es um das Auszeichnen von Inhalten geht, sondern nur meist. Bei den anderen Gelegenheiten läuft es auf eine persönliche Entscheidung hinaus, welche HTML-Elemente Ihres Erachtens den Inhalt am besten beschreiben.
Also überlegen Sie sich gut, wenn Sie zwischen article und section wählen, aber zerbrechen Sie sich nicht jedes Mal den Kopf, ob Sie diese Elemente immer exakt richtig verwenden. Manchmal ist das auch eine subjektive Entscheidung und in jedem Fall wird Ihre Seite auch weiterhin funktionieren. Außerdem wird Sie niemand deswegen mitten in der Nacht herausklingeln.
Tja, ich vielleicht schon, aber dann auch nur, weil es draußen dunkel und unheimlich ist.
Ein Beispiel für section ohne article
Bisher haben Sie Beispiele kennengelernt, wo section in einem article verschachtelt war. Das ist nur eine Einsatzmöglichkeit für dieses Element. Das folgende Beispiel stammt leicht verändert aus der HTML5-Spezifikation: Hier wird section ohne article verwendet. Sie bekommen auch schon mal einen Eindruck von nummerierten Listen. Mehr über ol und die anderen Listenelemente lernen Sie in Geordnete und ungeordnete Listen im HTML5.)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<section>
<h2>
HTML Artikel gestalten
</h2>
<ol>
<li>HTML5 Info</li>
<li>HTML5 Text gestalten</li>
<li>HTML Multimedia</li>
<li>HTML Grafik</li>
<li>HTML5 Formulare</li>
</ol>
</section>
<section>
<h2>
HTML5 Artikel gestalten
</h2>
<ol>
<li>Wie alles begann mit HTML5</li>
<li>Textauszeichnungen im HTML5</li>
<li>Einbinden von Sounds und Videos</li>
<li>Verwendung von Grafiken im HTML</li>
<li>Definieren von Formularen im HTML</li>
</ol>
</section>
<body>
</html>
