HTML5 - Allgemeine Neuerungen - Semantik - Beispiele

1. Eine mögliche Dokumentstruktur

... könnte bei der klassischen 3-3-Variante zum Beispiel so aussehen.


<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Formulare</title>
  <link rel="stylesheet" type="text/css" href="screen.css">
</head>
<body>
  <header>
    [Logo]
    <nav><ul class="topnav">...</ul></nav>
  </header>
  <div class="main">
    <nav><ul class="leftnav">...</ul></nav>
    <div class="content">[Inhalt]</div>
    <aside>[Infobereich]</aside>
  </div>
  <footer>
    <nav><ul class="bottomnav">...</ul></nav>
    <p>[Copyright-Hinweis]</p>
  </footer>
</body>
</html>

Erläuerung

Der grundsätzliche Aufbau in Kopf-, Haupt- und Fußbereich ist heute gängiger Standard. Darum auch die Unterteilung in <header>, <div class="main"> und <footer>. Jedes dieser Hauptelemente kann eine beliebige Anzahl an Unterelementen beinhalten. Sehr gerne wird der Hauptbereich (<div class="main">) dann auch noch mal gedrittelt in eine linke Navigation, den Inhaltsbereich sowie einem rechten Abschnitt für zusätzlichen Informationen. Ihr seht also, dass man die guten alten <div>-Origien deutlich reduzieren kann.

2. Eine mögliche Inhaltstruktur

Nehmen wir als Beispiel mal einen Blog, in dem mehrere Einträge plus Kommentare angezeigt werden.


<section>
  <article>
    <header>
      <h2>Blog A</h2>
      <time datetime="2009-09-15" pubdate>15.9.</time>:
    </header>
    <div class="blog">
      <p>Der Blogeintrag</p>
    </div>
    <footer>
      <p>Kommentar verfassen</p>
    </footer>
  </article>
  <article>
    <header>
      <h2>Kommentator !</h2>
      <time datetime="2009-09-15" pubdate>15.9.</time>:
    </header>
    <div class="kommentar">
      <p>Ein Kommentar</p>
    </div>
    <footer>
      <p>Auf Kommentar antworten</p>
    </footer>
  </article>
  <article>
    <header>
      <h2>Kommentator 2</h2>
      <time datetime="2009-09-20" pubdate>20.9.</time>:
    </header>
    <div class="kommentar">
      <p>Noch ein Kommentar</p>
    </div>
    <footer>
      <p>Auf Kommentar antworten</p>
    </footer>
  </article>
</section>
<section>
  ... Block B ...
  ... der übliche Rest, siehe oben ...
</section>

Erläuterung

Die einzelnen Blogs werden durch <section> voneinander getrennt. Der Beitrag sowie die Kommentare werden jeweils in einem <article> gebündelt.

Jeder "Artikel" ist dann in den Kopf-, Haupt- und Fußbereich aufgeteilt. Der <header> besteht aus einer Überschrift und dem Veröffentlichungsdatum. Dank des fehlenden <content>-Elements müssen wir den Inhalt wieder in ein <div> packen. Der <footer> beinhaltet dann Zusatzfunktionalitäten.

3. Eine Anmerkung

Bei beiden Beispielen geht es nur um grundsätzliche Möglichkeiten, die man auch hätte anders machen können. Außerdem handelt es sich hier mehr oder weniger um Dummy-Code. Weil es (mal wieder) nur ums Prinzip geht. Aber das solltet ihr ja mittlerweile wissen.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt