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).
section Beschreibt einen thematisch zusammengehörigen Abschnitt in einer HTML-Seite.
article Ein article ist für in sich abgeschlossene Inhalte geeignet.
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 Leitfaden zur Strukturierung von HTML5-Dokumenten bietet umfassende Informationen und Best Practices. MDN Web Docs

  • W3C HTML-Spezifikation: Die offizielle Spezifikation des W3C liefert detaillierte Beschreibungen zu Überschriften und Sektionen in HTML. W3C HTML-Spezifikation

  • HTML5 Outliner: Mit diesem Tool können Sie die Struktur Ihres HTML-Dokuments analysieren und visualisieren. HTML5 Outliner

Anmerkung zum <main>-Element

Das <main>-Element wird häufig als Strukturelement verwendet, um den Hauptinhalt einer Seite zu kennzeichnen. Gemäß W3C-Spezifikation ist es jedoch nicht dafür vorgesehen, weitere Strukturelemente wie <section>, <article> oder <nav> zu enthalten. Stattdessen sollte <main> den primären Inhalt der Seite enthalten, aber ohne weitere Strukturelemente.