Struktur der Seiteninhalte

Die grobe Strukturierung der Seiteninhalte kann mit den Elementen <header>, <nav>, <main> sowie <footer> gekennzeichnet werden. Das <main>-Element darf nur ein Mal in einem Dokument verwendet werden.

<header> – Kopfzeile
<nav> – Navigationselemente
<main> – Hauptbereich der Seite
<footer> – Fußzeile

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
 
  <body>
    <header>decocode - Wissenswertes über HTML5</header>
    <nav>
      <a href='index.htm'>Startseite</a>
      <a href='kontakt.htm'>Kontakt</a>
      <a href='impressum.htm'>Impressum</a>
    </nav>
    <main>
      <p>Dies ist ein HTML5-Dokument.</p>
    </main>
    <footer>Letzte Aktualisierung des Dokuments: 05. Februar 2015</footer>
  </body>

Die Elemente <article>, <section> und <aside> können verwendet werden, um die Gewichtung einzelner Inhaltsabschnitte zu kennzeichnen.

<article> – Container für einen eigenständigen Artikel
<section> – Abschnitt eines Artikels
<aside> – Block für Randbemerkungen

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
 
    <main>
      <article>
        <h1>Mein Artikel</h1>
        <p>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.</p>
        <section>
          <h2>1. Unterabschnitt</h2>
          <p>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.</p>
        </section>
        <aside>
          <p>Hier ist Platz für Randbemerkungen.</p>
        </aside>
      </article>
    </main>

Das <fieldset>-Element kennzeichnet ein Gruppenfeld, das um die Kindelemente üblicherweise einen Rahmen mit einer Überschrift erzeugt. Die Überschrift wird im <legend>-Element angegeben.

Sonstige Inhalte, die als Block zusammengefasst werden sollen, können mit dem <div>-Tag markiert werden, das keine semantische Bedeutung trägt.

Code auswählen
1
2
3
 
      <fieldset><legend>Ein Gruppenfeld</legend>
        <div>(Ein beliebiger Inhalt)</div>
      </fieldset>

Das <hr>-Element erzeugt eine Trennlinie.

Code auswählen
1
2
3
 
        <p>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.</p>
        <hr>
        <p>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.</p>