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>

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.

Siehe auch selfhtml - nav

Das Element <nav> umschliesst die Navigation unseres Webauftritts. Es wird häufig innerhalb von <header> platziert.

<main>

Siehe auch selfhtml - main

Der Inhalt unserer Webseite wird innerhalb von <main> geschrieben. Dieser Bereich kann durch <article> und <section> weiter unterteilt werden.

<article>

Siehe auch selfhtml - article

Ein Artikel stellt einen in sich geschlossenen Teil des Inhalts dar. Dieser kann aus mehreren Abschnitten (<section>) bestehen.

<section>

Siehe auch selfhtml - section

Das Element <section> bezeichnet einen Abschnitt innerhalb eines Artikels.


Kevin Maurizi, Marcel Suter