4.2.3 HTML Seitenstruktur im Überblick

Es gibt noch weitere Elemente, die für die Strukturierung der Seite verwendet werden können. In der Tabelle werden alle HTML Strukturelemente erläutert. Die Strukturierung wird auch als "Outline" bezeichnet.

Element Beschreibung
header Beschreibt den Header einer HTML-Seite oder eines Bereichs (z. B. von article).
footer Beschreibt den Footer einer HTML-Seite oder eines Bereichs (z. B. von article).
article Ein article ist für in sich abgeschlossene Inhalte geeignet.
section Beschreibt einen thematisch zusammengehörigen Abschnitt in einer HTML-Seite oder einer section.
nav Für die Seitennavigation.
aside Ein Bereich für thematisch ungebundene Inhalte.
address Für Kontaktinformationen des Autors.
h1-h6 Überschriften mit sechs Hierarchieebenen.
hgroup Gruppiert mehrere h1-h6 Elemente als gemeinsame Überschriftengruppe.

Die Überschriften <h1>...<h6> zählen zu den Strukturelementen und sollen zur Strukturierung des Textes eingesetzt werden. Es sind die einzigen Strukturelemente der Tabelle, die in Browsern anders formatiert werden. Aber von der Formatierung sollten Sie sich nicht beeinflussen lassen.

Die Elemente header, section, und article eignen sich gut zur Strukturierung mit Überschriften.

Beispiel mit Überschriften und Section

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<article>
 <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 <section>
  <h3>Red Delicious</h3>
  <p>These bright red apples are the most common found in many supermarkets.</p>
 </section>
 <section>
  <h3>Granny Smith</h3>
  <p>These juicy, green apples make a great filling for apple pies.</p>
 </section>
</article>

Weitere Literaturhinweise zur HTML5-Strukturierung

Für eine fundierte Einführung in die Strukturierung von HTML5-Dokumenten empfehle ich folgende Ressourcen:

  • MDN Web Docs: Der Lernartikel zur Strukturierung von Dokumenten erläutert den Einsatz der HTML-Strukturelemente an Beispielen. MDN: Strukturierung von Dokumenten

  • HTML Standard (WHATWG): Die offizielle Spezifikation liefert detaillierte Beschreibungen zu Überschriften und zur Gliederung in HTML. HTML Standard: Headings and outlines

  • Nu Html Checker (W3C): Mit der Option „outline“ zeigt der Validator die Überschriftengliederung Ihres HTML-Dokuments an. Nu Html Checker

Anmerkung zum <main>-Element

Das <main>-Element kennzeichnet den Hauptinhalt einer Seite und darf selbst weitere Strukturelemente wie <section>, <article> oder <nav> enthalten. Laut HTML Standard darf es aber nicht innerhalb von <article>, <aside>, <header>, <footer> oder <nav> stehen, und eine Seite darf nur ein sichtbares <main>-Element enthalten.