Momentan werden HTML-Dokumente meistens mittels div-Elementen strukturiert. Die Formatierung und Positionierung dieser Container erfolgt dann üblicherweise per CSS. Für Software wie Screenreader ist dieses Vorgehen natürlich nutzlos, da sie nicht erkennen können, welche Bedeutung bestimmte Inhalte haben. Das soll sich durch die neuen Strukturierungselemente ändern.
Zwei der wichtigsten neuen Elemente sind dabei section und article, die in diesem Tutorial im Fokus stehen.
Artikel kennzeichnen
Über das article-Element lassen sich Texte (Forenbeiträge, Zeitungsartikel usw.) als Artikel kennzeichnen. Das folgende Beispiel zeigt die Definition eines typischen Artikels.
<article> <h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1> <p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks. Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt ...</p> ... </article>
Dank des article-Elements könnt ihr eure Inhalte also semantisch strukturieren.
Wie so etwas aussehen kann, lässt sich sehr schön anhand eines Blogs zeigen.
<article>
<header>
<h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
<p>Veröffentlicht am: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks. Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt ...</p>
...
<footer>
<p><small>Copyright by PSD-Tutorials.de</small></p>
</footer>
</article>
In diesem Beispiel wird innerhalb des article-Elements die ganz typische Aufteilung in Kopf-, Haupt- und Fußbereich vorgenommen. Und eine solche Aufteilung ist sehr oft in Blogs anzutreffen.
Sektionen anlegen
Weiter geht es mit dem section-Element. Das Element section unterteilt die Seite in verschiedene Abschnitte. Dabei kann es sich beispielsweise um Sektionen, Kapitel, Reiter o. Ä. handeln. Durch section lassen sich zum Beispiel Bereiche wie Einleitung und aktuelle Meldungen logisch voneinander trennen.section dient der Unterteilung der Inhalte nach tatsächlich inhaltlichen Gesichtspunkten. Auf den Unterschied zwischen section und div komme ich dann übrigens noch einmal am Ende dieses Tutorials zu sprechen.
Das folgende Beispiel zeigt eine typische Blog-Struktur. Allerdings enthält diese Struktur noch etwas, was in vielen Blogs tatsächlich benötigt wird, nämlich einen Kommentarbereich. Dieser Kommentarbereich ist innerhalb eines section-Elements definiert. Die einzelnen Kommentare innerhalb des section-Bereichs wiederum werden in jeweils ein article-Element eingefasst.
<article>
<header>
<h1>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h1>
<p>Veröffentlicht am: <time pubdate="pubdate">24.05.2014</time></p>
</header>
<p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks. Auf „klassischen“ Webseiten wird jQuery daher bereits tausendfach eingesetzt...</p>
...
<section>
<h2>Kommentare</h2>
<article>
<header>
<h3>Kommentiert von: Newsfriend</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Vor einer Stunde</time></p>
</header>
<p>Danke für das Tutorial!</p>
</article>
<article>
<header>
<h3>Kommentiert von: Becker</h3>
<p><time pubdate datetime="2024-10-05T20:10-07:00">Vor zwei Stunden</time></p>
</header>
<p>Spitze! Das hilft mir weiter.</p>
</article>
</section>
</article>Hier noch einmal der Hinweis, dass ich auf die hier ebenfalls verwendeten Elemente wie header, footer usw. natürlich noch einmal ausführlich zu sprechen komme. An dieser Stelle nur so viel: Durch diese Elemente lassen sich die Inhalte in Kopf- und Fußbereich unterteilen, sie ermöglichen also eine weitere logische Strukturierung von Dokumenten.
Ein anderes Beispiel soll die Kombination von article- und section-Elementen noch weiter verdeutlichen. Tatsächlich kann man das section-Element nämlich dafür verwenden, einen Artikel in logische Inhaltsbereiche zu unterteilen, die jeweils eigene Überschriften besitzen.
<article>
<h1>App-Entwicklung</h1>
<p>Hier erfahrt ihr, wie sich Web-Apps erstellen lassen.</p>
<section>
<h2>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h2>
<p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks.</p>
</section>
<section>
<h2>Web-Apps erstellen (Teil 08): Der Schnelleinstieg in jQuery</h2>
<p>JavaScript ist für Webseiten eine feine Sache, schließlich lassen sich darüber allerlei interessante Dinge anstellen.</p>
</section>
</article>
Es ist übrigens ebenfalls möglich, innerhalb eines section-Elements article-Elemente zu definieren. Ein typisches Beispiel dafür kann ein Kommentarbereich sein, so wie das bereits gezeigt wurde. Denkbar ist aber auch die Unterteilung der Sektion in die Themengebiete, die im Blog behandelt werden.
Auch hierzu wieder ein entsprechendes Beispiel:
<section>
<h1>App-Entwicklung</h1>
<article>
<h2>Web-Apps erstellen (Teil 09): jQuery mobile (1)</h2>
<p>jQuery ist zweifellos eines der bekanntesten JavaScript-Frameworks.</p>
</article>
<article>
<h2>Web-Apps erstellen (Teil 08): Der Schnelleinstieg in jQuery</h2>
<p>JavaScript ist für Webseiten eine feine Sache, schließlich lassen sich darüber allerlei interessante Dinge anstellen.</p>
</article>
</section>
Zudem können in einem section-Element andere section-Elemente enthalten sein. Verschachtelungen sind also erlaubt. Auch hierzu ein Beispiel:
<section>
<h1>PSD-Tutorials.de</h1>
<section>
<h2>Willkommen</h2>
<p>Wir freuen uns...</p>
</section>
<section>
<h2>Tutorials</h2>
<P>Hier gibt es unsere neuesten Tutorials...</p>
</section>
<aside>
<p>Kontakt</p>
</aside>
</section>
<footer>
<p>(c) 2014 PSD-Tutorials.de</p>
</footer>
Diese section-Verschachtelung ergibt die folgende Struktur:
1. PSD-Tutorials.de
1.1 Willkommen
1.2 Tutorials
1.3 Kontakt
- (c) 2014 PSD-Tutorials.de
Solche Strukturierungen sind also ebenfalls möglich.
Der Unterschied zwischen div, article und section
Es ist zugegebenermaßen nicht ganz einfach, die Abgrenzung zwischen div, article und section zu verstehen. Tatsächlich wurde das article-Element in erster Linie für die Strukturierung von Blog-Posts definiert. Das section-Element ist eigentlich eine Ebene unterhalb von article angesiedelt. Innerhalb des section-Elements sollte zudem immer eine Überschrift definiert werden. Selbst wenn tatsächlich keine Überschrift definiert wird, sollte es zumindest theoretisch möglich sein, innerhalb des betreffenden Elements eine Überschrift anzugeben.
Selbstverständlich sind div-Elemente auch in HTML5 nicht verpönt, sondern sollen nach wie vor verwendet werden. Interessant sind diese beispielsweise immer dann, wenn es darum geht, Elemente zusammenzufassen.
Abschließend aber auch noch einmal der Hinweis hinsichtlich der optischen Auswirkungen der bislang vorgestellten Elemente. Tatsächlich benötigt ihr für eine entsprechende Formatierung CSS. Der normale Einsatz der gezeigten Elemente hat nämlich keinen Effekt im Browser. Ihr strukturiert hier ausschließlich Inhalte semantisch. All das, was mit der Optik zu tun hat, regelt ihr über Stylesheets.
