TAG 2 · HTML

HTML: Überschriften

Überschriften strukturieren eine HTML-Seite. Mit den Elementen <h1> bis <h6> kannst du verschiedene Ebenen von Überschriften erstellen.

1) Was sind Überschriften?

Überschriften zeigen dem Besucher, worum es in einem Abschnitt der Webseite geht.

Die wichtigste Überschrift ist <h1>. Danach folgen <h2>, <h3> und so weiter.

Wichtig:
Die Zahl beschreibt die Ebene der Überschrift und nicht einfach nur ihre Schriftgröße.

2) <h1> – der Haupttitel

<h1> ist die wichtigste Überschrift einer Seite. 

<h1>Meine erste Webseite</h1>
<h1>

Meine erste Webseite

Normalerweise sollte eine Seite einen klaren Haupttitel besitzen.

3) <h2> – Kapitel

<h2> wird für die wichtigsten Unterbereiche einer Seite verwendet. 

<h1>Meine Webseite</h1>

<h2>Über mich</h2>

<h2>Meine Hobbys</h2>
<h2>

Meine Hobbys

4) <h3> – Unterkapitel

Wenn ein Kapitel noch weiter unterteilt werden soll, kannst du <h3> verwenden. 

<h2>Meine Hobbys</h2>

<h3>Fußball</h3>

<h3>Gaming</h3>

<h3>Musik</h3>

5) <h4> bis <h6>

HTML besitzt insgesamt sechs Ebenen von Überschriften. 

<h1>Hauptüberschrift</h1>
<h2>Kapitel</h2>
<h3>Unterkapitel</h3>
<h4>Unter-Unterkapitel</h4>
<h5>Weitere Ebene</h5>
<h6>Kleinste Überschriftenebene</h6>
<h4>

Unter-Unterkapitel

<h5>
Weitere Ebene
<h6>
Kleinste Überschriftenebene

6) Die richtige Reihenfolge

Überschriften sollten logisch aufgebaut sein. Dadurch können Besucher leichter erkennen, wie die Inhalte zusammengehören.

h1 → Hauptthema

Der Titel der gesamten Webseite.

h2 → Kapitel

Große Bereiche innerhalb der Webseite.

h3 → Unterkapitel

Ein genauerer Bereich innerhalb eines Kapitels.

h4 → weitere Unterteilung

Für noch detailliertere Unterbereiche.

7) Komplettes Beispiel

So könnte die Struktur einer einfachen Webseite aussehen: 

<h1>Meine Webseite</h1>

<p>Willkommen auf meiner Webseite!</p>

<h2>Über mich</h2>

<p>Hier findest du Informationen über mich.</p>

<h2>Meine Hobbys</h2>

<h3>Sport</h3>

<p>Ich spiele gerne Fußball.</p>

<h3>Gaming</h3>

<p>In meiner Freizeit spiele ich gerne Computerspiele.</p>

8) Typische Fehler

  • Mehrere <h1> verwenden, obwohl eine klare Hauptüberschrift ausreicht.
  • Überschriften nur wegen ihrer Größe verwenden. Für die Schriftgröße ist CSS zuständig.
  • Die Reihenfolge ohne Grund überspringen, zum Beispiel direkt von <h2> zu <h5>.
  • Überschriften durch einfachen großen oder fetten Text ersetzen.

Merke

  • <h1> = Hauptüberschrift
  • <h2> = Kapitel
  • <h3> = Unterkapitel
  • <h4> bis <h6> = weitere Ebenen
  • Die Überschriften bilden eine Hierarchie.
  • Die Schriftgröße wird mit CSS verändert, nicht durch eine falsche Überschriftenebene.

9) Mini-Übung

Erstelle eine kleine Webseite über ein Thema deiner Wahl.

Verwende dabei:

  • eine <h1>-Überschrift
  • mindestens zwei <h2>-Überschriften
  • mindestens zwei <h3>-Überschriften
  • normalen Text mit <p>

Aufgabe: Achte darauf, dass die Überschriften logisch zueinander passen.

```