header
umfasst den Kopfbereich eines Dokuments und kann typischerweise den Titel des Dokuments, Logos, ein Formular zur Schnellsuche oder ein Inhaltsverzeichnis enthalten.
nav
für Hauptnavigationsblöcke gedacht.
article
ist der Ort für die eigentlichen Inhalte der Seite. Die Verwendung soll so erfolgen, dass article-Blöcke, für sich genommen, alleinstehend sind, also beispielsweise auch unverändert als Inhalt eines Newsfeeds verwendet werden könnten. article-Blöcke können mit section in mehrere Abschnitte unterteilt werden und sind außerdem schachtelbar.
aside
beheimatet Abschnitte, die nicht unmittelbar mit dem eigentlichen Inhalt zusammenhängen – ein klassischer Fall für Sidebars, aber auch für inhaltliche Einschübe in einem article.
footer
beinhaltet das, was man üblicherweise im Fußbereich eines Dokuments findet: Autor- und Copyright-Informationen oder Querverweise. footer kann, aber muss nicht notwendigerweise am Ende eines Dokuments stehen.
section
Entsprechend der Spezifikation des <article> Elements steht für eine weitere Untergliederung der textuellen Inhalte innerhalb des <article> Elements das <section> Element zur Verfügung. Die einzelnen Abschnitte eines Artikels lassen sich somit semantisch korrekt strukturieren.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML5 Layout</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
...
</body>
</html>
<div id="doc">
<div id="doc"> <header id="header"> <h1>HTML5 Layout</h1> <nav> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </nav> </header> <section id="content"> <article> <h2>Artikel Überschrift</h2> <p>Lorum ipsum...</p> </article> </section> <aside> <h2>Sidebar</h2> <p>Lorum ipsum...</p> </aside> <footer> <a href="#">Impressum</a> </footer> </div>
Weiterführende Links
http://www.html-seminar.de/html-5-strukturierende-elemente.htm