LU02a - Inhalt strukturieren

Eine saubere Struktur der Inhalte … Sie lernen die Elemente <nav>, <main>, <header>, <footer>, <section> und <article> kennen.

Erweitertes Gerüst

Im Abschnitt LU01d - HTML Grundgerüst haben Sie eine sehr rudimentäres Gerüst kennen gelernt. Dieses Gerüst wollen wir um einige Elemente mit der Struktur für die späteren Inhalte erweitern.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>HTML5-Seite mit Grundstruktur</title>
</head>
 
<body>
  <header>
    <nav>
    </nav>
  </header>
 
  <main>
    <article>
      <section>
      </section>
      <section>
      </section>
    </article>
  </main>
 
  <footer>
  </footer>
</body>
</html>

<header> und <footer>

Siehe auch selfhtml - header und footer

Wie ein Worddokument haben auch Webseiten in der Regel eine Kopf- und Fusszeile. Diese enthalten Logos, Name der Seite, Copyright, … Besonders bei einem Webauftritt mit mehreren Seiten helfen einheitliche Kopf- und Fusszeilen dem Betrachter bei der Orientierung.

Auch wenn der Tag sehr ähnlich heisst, ist <head> etwas völlig anderes als <header>. Im Bereich <head> befinden sich Metainformationen, die nicht Teil der sichtbaren Webseite sind.