HTML-5-Struktur

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.

 

Das wäre das Grundgerüst:

 

 

<!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>

 

Das wäre die Struktur:

<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

Bewertung: 
5
Durchschnitt: 5 (3 Stimmen)

Kommentare

Hallo,

ja es ist korrekt, dass HTML 5 noch nicht eingeführt ist, aber seit Jahren gibt es bereits recht ausgereifte Entwürfe, über die in fachartikeln und Büchern bereits geschrieben wurde. Also neu ist das Thema nicht und um auf dem Laufenden zu bleiben muss man manchmal auch etwas vorausschauend sein und aktuelle Entwicklungen nach verfolgen.

Grüße

Peter

Hallo Anneke,

beides geht und kann sinnvoll sein.

section wird im Sinne von Kapiteln und Abschnitten eines großen Gesamtdokuments genutzt, article im Sinne von Beiträgen sind dann die abgeschlossenen inhaltstragenden Einheiten, die auch z.B. für RSS zur Verfügung stehen können. Es kann nun aber wiederum Sinn machen, diese Beiträge in einzelne sections aufzuteilen, wenn diese im Dokument gleichartig strukturiert sind z.B. immer einen Einleitungsteil, ein abstract (Zusammenfasung) oder Fazit haben.

Viele Grüße

Thomas Hagenhofer