Die folgenden Elemente werden für den Aufbau, d.h. zur
Strukturierung, einer Internetseite benötigt:
body, header, nav, main, article, section, footer,
aside, address, h1 .. h6
<body>...</body>: Das body-Element enthält den anzuzeigenden
Inhalt eines HTML-Dokumentes.
<header>...</header>: Das
header-Element enthält den sichtbaren Kopfbereich einer
Webseite oder eines Teils einer Seite. Dieser ist für
einleitende Inhalte gedacht wie etwa Firmenlogos.
<nav>...</nav>: Das nav-Element umschließt
Navigationsleisten.
<main>...</main>: Hier befindet sich der Hauptinhalt der
Seite.
<article>...</article>: Das
article-Element stellt in sich geschlossene Abschnitte eines
Dokuments dar, vergleichbar mit einem Zeitungsartikel. Es
ergibt deshalb Sinn, innerhalb von article-Elementen weitere
strukturierende Elemente wie header, section oder footer
unterzubringen.
<section>...</section>: Das
section-Element enthält laut Spezifikation eine thematische
Gruppierung von Inhalten typischerweise mit einer
Überschrift.
<footer>...</footer>: Das footer-Element
enthält alle Informationen, die in Webseiten am Ende stehen:
Autor, Hinweise zum Urheberrecht, ein Link zum Impressum.
Dabei kann ein footer letztes Element der Seite, aber auch
das Ende eines articles sein.
<aside>...</aside>: Mit diesem Befehl werden
Seitenleisten erstellt. Diese können links, rechts oder
unten plaziert werden. Im aside-Blöck sollen Informationen
zum Inhalt der Webseite stehem, die aber nicht Teil der
Webseite sind.
<address>...</address>: Ein
address-Element enthält Informationen, wie der Autor oder
inhaltlich Verantwortliche einer Seite oder eines
Abschnittes zu erreichen ist. Dies muss nicht zwangsläufig
eine E-Mail- oder Postadresse sein, sondern kann auch
einfach nur ein Link zu einer weiteren Seite mit
Kontaktinformationen sein.
<h1>...</h1>, <h6>...</h6>:
Eine Überschrift wird durch eines der Elemente h1..h6
realisiert.
header, nav, article, section, footer und
adress haben keinen Einfluss auf das Erscheinungsbild einer
Seite. Sie dienen nur zur besseren Lesbarkeit des
Quelltextes.
Eine Webseite kann in der Struktur deshalb wie folgt
gegliedert sein:
<!doctype html>
<html lang="de">
<head>
<meta
charset="utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
<title>HTML5-Seite mit Grundstruktur</title>
</head>
<body>
<header>
<h1>Titel</h1>
</header>
<main>
<article>
<h2>Titel</h2>
</article>
<aside>
<section>
<h2>Titel</h2>
</section>
<section>
<h2>Titel</h2>
</section>
</aside>
</main>
<footer>
<h6>Titel</h6>
</footer>
</body>
</html>
