Beispiel 1: Strukturierung

Dieses Beispiel zeigt eine einfache Seitenstruktur mit <header>, <section> und <footer>.

Das mitgeladene tagnames.css macht alle HTML-Elemente sichtbar: jedes Tag erhält einen farbigen Label-Balken, damit die Struktur sofort erkennbar ist.

Das folgende Markup erzeugt die unten dargestellte Seite:

<body>

  <header>
    <nav>Pseudo-Navigation: Home | About | Contact</nav>
  </header>

  <section>
    <h1>Beispiel 1 Strukturierung</h1>
    Lorem ipsum dolor sit amet ...
  </section>

  <footer>
    <address>
      Zentrum für Schlüsselqualifikationen, Universitätsstraße 9, 79098 Freiburg
    </address>
  </footer>

</body>

Beispiel 1 Strukturierung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.