HTML5 Strukturierende Elemente

Eine große Anzahl der neuen Elemente im HTML5 Standard sind sogenannte Strukturierende Elemente. Hierzu zählen:

• section
• nav
• article
• aside
• header
• footer

Die Aufnahme dieser Elemente geht davon aus, dass sich grundsätzliche Strukturen beim Aufbau einer Website wiederholen: Es gibt einen Kopf- und einen Fussbereich, eine Leiste mit Links bzw. Zusatzinformationen am linken oder rechten Rand und einen Bereich für den Hauptartikel. Alle diese unterschiedlichen Bereiche wurde bisher durch durch div-Tags mit entsprechender ID markiert. Der Grundaufbau einer Website sah eventuell so aus:

<div id="wrapper">
    <div id="head">
    </div><!-- Ende head -->
    <div id="navigation">
    </div><!-- Ende navigation -->
    <div id="center">
		<div id="content">
		</div><!-- Ende content -->
		<div id="sidebar">
		</div><!-- Ende sidebar -->
    </div><!-- Ende center -->
    <div id="footer">
    </div><!-- Ende footer -->
</div><!-- Ende wrapper -->

Dazu kamen dann mit großer Wahrscheinlichkeit noch weitere div-Elemente. Der HTML-Code wurde sehr schnell unübersichtlich. Mit Hilfe der strukturierenden Elemente von HTML5 kann man dieses Code-Grundgerüst nun so darstellen:

<div id="wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <section>
		<article>
		</article>
		<aside>
		</aside>
    </section>
    <footer>
    </footer>
</div><!-- Ende wrapper -->

Dieser Code ist nicht nur einfacher zu lesen, auch Suchmaschinen können die einzelnen Elemente der Website leichter identifizieren. Außerdem wirkt sich diese Form der Codestrukturierung auch auf andere HTML-Tags, z.B. Überschriften aus. So ist jetzt z.B. eine h1-Überschrift in <section> einer h1-Überschrift in body untergeordnet.