Semantische Verschachtelung der Struktur

03.11.2016 07:30 Uhr

Die semantische Auszeichnung der Inhaltsstruktur ist eins der wesentlichen Ziele von HTML5. Die Struktur der Webseite soll möglichst vollständig beschrieben werden, um die konkreten Inhalte in einen korrekten Kontext zu setzen. So können mehrere Sektionen in einem Artikel zusammengefasst werden. Denkbar ist auch, dass eine Sektion mehrere Artikel aufweist. Sektionen wie Artikel können eigene Header und Footer beinhalten.

Bestimmend ist hier einzig der Content, also der darzustellende Inhalt. Nur anhand eines konkreten Inhalts kann eine Struktur sinnvoll definiert werden.


Beispiel

<article>
<header>Kulturerbe</header>
<h1>Kulturelles Erbe</h1>
<p>Das Kulturelle Erbe eines Landes ...</p>
<section>
<header>Anmerkung von M. Mustermann</header>
<p>Die Aufgabe der Wahrung des Kulturellen Erbes ...</p>
<footer>Die hier veröffentlichten Inhalte ...</footer>
</section>
<article>
<h1>Museum</h1>
<p>Die Aufgabe von Museen ...</p>
</article>
<article>
<h1>Archiv</h1><p>Die Aufgabe von Archiven ...</p>
</article>
…
<footer>Weitere Informationen zum Thema finden Sie ...</footer>
</article>

Um einzelne Bereiche ansprechbar zu machen, werden id-Attribute eingefügt:

<article>
<header id="headerGesamt" >Kulturerbe</header>
<h1>Kulturelles Erbe</h1>
<p>Das Kulturelle Erbe eines Landes ...</p>
<section>
<header>Anmerkung von M. Mustermann</header>
<p>Die Aufgabe der Wahrung des Kulturellen Erbes ...</p>
<footer id="footerArticleMustermann" class="footerArticle" > Die hier veröffentlichten Inhalte ...
</footer>
</section>
<article>
<h1>Museum</h1>
<p>Die Aufgabe von Museen ...</p>
</article>
<article>
<h1>Archiv</h1><p>Die Aufgabe von Archiven ...</p>
</article>
…
<footer>Weitere Informationen zum Thema finden Sie ...</footer>
</article>
Schlagwörter: