Nachdem wir im zweiten Teil unserer HTML5-Serie einen Blick auf die Elemente geworfen haben, die das "Drumrum" der Seite vom eigentlichen Inhalt trennen, wollen wir in diesem Beitrag auf die Strukturierung des Inhaltes einer Internetseite eingehen.

Nachdem wir im zweiten Teil unserer HTML5-Serie einen Blick auf die Elemente geworfen haben, die das "Drumrum" der Seite vom eigentlichen Inhalt trennen, wollen wir in diesem Beitrag auf die Strukturierung des Inhaltes einer Internetseite eingehen.

Das section-Element

Allgemeine Inhaltsbereiche eines Dokuments werden durch section-Elemente dargestellt. Laut Spezifikation handelt es sich um eine thematische Gruppierung von Inhalten typischerweise mit einer Überschrift. So sollten sie verwendet werden, wenn es auf einer Seite tatsächlich verschiedene Themenbereiche gibt, die sich zusammenfassen lassen. Wenn Sie also überlegen, ob Sie die Inhalte besser auf zwei verschiedene Dokumente verteilen oder in einem lassen sollen, ist die Verwendung eines section-Elements angebracht, falls Sie sich für die Darstellung in einem gemeinsamen Dokument entscheiden.

Codebeispiel

<section>
  <h1>Championsleague</h1>
  <p>Im Verlauf der Saison ...</p>
  ...
</section>
<section>
  <h1>Bundesliga</h1>
  <p>Bereits von Anfang an ließ der deutsche Meister ...</p>
  ...
</section>

section ist also für eine grobe thematische Unterteilung einer Seite in Abschnitte gedacht. Dies ist auch genau die Bedeutung des Wortes "section" (engl. Abschnitt oder Kapitel).

Das article-Element

article-Elemente stellen in sich geschlossene Abschnitte eines Dokuments dar, vergleichbar mit einem Zeitungsartikel. Es ergibt deshalb Sinn, innerhalb von article-Elementen weitere strukturierende Elemente wie header oder footer unterzubringen. Prominentes Beispiel für solche Anwendungen sind etwa Weblogs. Der Beitrag selbst wäre als ein article-Element angelegt, die Kommentare könnten ebenfalls in article-Elementen strukturiert sein. Daher hat das Element auch seinen Namen bekommen, es kennzeichnet eben eine journalistische Arbeit, einen Artikel.

Codebeispiel

<article>
  <header>
    <address>Autor: <a href="...">Max Mustermann</a></address>
    <h1>Warum soll ich bloggen?</h1>
  </header>
  <p>Früher, als die Weblogs noch Internet-Tagebücher hießen, ...</p>
</article>
<article class="comment">
<h1>Kommentar von Mario</h1>
<p>Gutes Argument. Es muss nicht jeder alles wissen.</p>
</article>

article als Kind-Element von section

Die Kommentare hingegen könnten gemeinsam in einem section-Element untergebracht werden, denn sie unterscheiden sich thematisch ja vom Beitrag, es sind gewissermaßen Antworten, die nicht unbedingt die Meinung des Autors widerspiegeln, ja völlig gegenteilig sein können.

Codebeispiel

<article>
  <header>
    <address>Autor: <a href="...">Max Mustermann</a></address>
    <h1>Warum soll ich bloggen?</h1>
  </header>
  <p>Früher, als die Weblogs noch Internet-Tagebücher hießen, ...</p>
</article>
<section>
<article>
<h1>Kommentar von Mario</h1>
<p>Gutes Argument. Es muss nicht jeder alles wissen.</p>
</article>
</section>

Wie die Beispiele zeigen, ist es nicht zwingend notwendig, article-Elemente innerhalb von section zu notieren, denn nicht auf jeder Seite wird es verschiedene Themenbereiche geben, vor allem weil Webautoren bestrebt sein könnten, für verschiedene Themenbereiche eigene Seiten im Webangebot zu erstellen.

Ebenso ist die hier vorgeschlagene Struktur für ein Weblog nur als einer von mehreren semantisch korrekten Vorschlägen zu sehen. Gleichermaßen wäre es möglich, die Kommentare als geordnete und ggf. geschachtelte Liste aufzufassen. Für eine Seite, welche genau einen Blogbeitrag enthält, ist folgende Struktur geeignet:

Codebeispiel

<article>
  <!-- der Blogartikel -->
</article>
<section>
  <h2>Kommentare</h2>
  <ol id="commentlist">
    <!-- die Kommentare -->
  </ol>
  <form id="respond">
    <!-- das Antwortformular -->
  </form>
</section>

div ist besser!

Das section-Element könnte hier auch - ohne dass deshalb die Seite unsemantisch werden würde - durch ein div-Element ersetzt werden, denn genau zu diesem Zweck sind die Divs einst erfunden worden: Sie gruppieren zusammengehörende Inhalte, die allein durch die Gruppierung keine zusätzliche Bedeutung erhalten sollen. Mit der Argumentation, dass sich sowohl Blogartikel als auch die Kommentare mit ein und demselben Thema auseinandersetzen, wäre die Verwendung eines div-Elementes einem section-Element sogar vorzuziehen, denn section-Elemente sind keine generischen Container und sollten deshalb ausschließlich zur Beschreibung der Struktur einer Seite verwendet werden.

section als Kind-Element von article

Wer zum einen die bisherigen Ausführungen aufmerksam gelesen und zum anderen einen umfangreichen Zeitungsartikel vor Augen hat, wird nun zu Recht anmerken, dass es auch in Artikeln thematische Gruppierungen von Inhalten typischerweise mit einer Überschrift gibt. Für solche Fälle sind ebenfalls section-Elemente die richtige Wahl:

Codebeispiel

<article>
  <h1>Doping: Ben Johnson täuscht die ganze Welt</h1>
  <p>Ben Johnson, der kanadische ...</p>
  <section>
    <h2>Seoul 1988</h2>
    <p>Am 24. September 1988 gelang Ben Johnson ein unglaublicher ...</p>
    <p>2 Tage später wurde in seinem Urin ...</p>
  </section>
  <section>
    <h2>Comeback und Comeback</h2>
    <p>Nach seiner vierjährigen Sperre ...</p>
    <p>In Montreal wurde er erneut positiv auf ...</p>
  </section>
</article>

Das aside-Element

In manchen Fachbüchern ist die Seiteneinteilung durch unterschiedlich breite Ränder gekennzeichnet. Der breitere der beiden Ränder umfasst etwa ein Fünftel der Gesamtbreite, ist also eine kleine, am Rand liegende Spalte und wird deshalb Marginalspalte genannt. "marginal" hat aber auch die Bedeutung "nebensächlich"; was liegt näher, in der Marginalspalte zusätzliche Informationen, die zwar nicht unwichtig sind, aber nur am Rande mit dem eigentlichen Thema zu tun haben, unterzubringen? Dies können Tipps, Hinweise, alternative Sprech- oder Schreibweisen oder veranschaulichende Skizzen sein. Es war nur folgerichtig, dass dieses Designelement den Weg vom Printmedium ins Internet fand, vor allem, wenn man bedenkt, dass die meisten Leute Internetseiten wohl in einem Querformat betrachten werden, auch wenn deren Anteil aufgrund immer größer werdenden Monitore sinkt.

Viele Webseiten haben heutzutage ein mehrspaltiges Layout, eine entsprechende Breite des Ausgabemediums vorausgesetzt. Eine Marginalspalte wird durch das aside-Element repräsentiert. In der Spezifikation heißt es sinngemäß, das aside-Element umschließt Abschnitte einer Seite, deren Inhalt nur in einem indirekten Zusammenhang mit dem umgebenden Inhalt stehen. Damit ist natürlich auch klar, dass aside-Elemente keinesfalls zwingend in einer Randspalte stehen müssen, auch wenn Name und Namensherkunft dies suggerieren. Wie immer ist die Präsentation des Inhaltes der Bedeutung desselben untergeordnet.

Obwohl bzw. weil der Inhalt eines aside-Elements keinen direkten Bezug zum Hauptinhalt hat, sollten aside-Inhalte in sich abgeschlossen und auch ohne den Hauptinhalt der Seite verständlich bleiben.

Codebeispiel

<article>
 <h1>Unser Sonnensystem</h1>
  <p>Das Planetensystem besteht aus 8 Planeten, ... </p>
  <aside>
    <h1>Pluto</h1>
    <p>Gegen Ende des 20. Jahrhunderts wurde innerhalb kurzer Zeit
      eine Vielzahl plutoähnlicher Objekte entdeckt. Korrekterweise
      hätten diese alle als Planeten klassifiziert werden müssen. </p>
  </aside>
<article>

Ebenso ist es legitim, sämtliche Teile einer Seite, die nicht der eigentliche Inhalt sind, in aside-Elemente auszulagern. Sehr häufig findet man etwa in Weblogs Links zu archivierten Artikeln, zu Internetseiten befreundeter Blogger oder zu den eigenen Auftritten in sozialen Netzwerken.

Codebeispiel

<aside>
  <nav>
    <h1>archivierte Beiträge</h1>
    <ol> ... </ol>
  <nav>
</aside>

Mit den hier vorgestellten Elementen lassen sich die Inhalte einer Internetseite semantisch strukturieren, aber was haben Sie davon? Als Besucher einer Website sehen Sie natürlich nichts vom zugrunde liegenden Unterbau, die heutigen Browser stellen unsemantisches HTML genau so ordentlich dar, wie perfekt ausgezeichnetes Markup; ja sogar fehlerhafte Quelltexte werden korrigiert. Die Semantik dient also vordergründig den Suchmaschinen und genau an dieser Stelle profitieren auch Sie als Nutzer von semantisch korrekt umgesetzten Internetseiten, denn so können Ihnen die Suchmaschinen Seiten empfehlen, die Ihren Suchbegriffen besser entsprechen. In einem Kommentar zum ersten Teil der HTML5-Serie wurde es treffend formuliert: Semantik hat somit Auswirkungen auf die Ergebnisqualität von Suchmaschinen und damit auch auf das Frustlevel der Besucher.