Texte formatieren – Überschrift in HTML

HTML-TAGs für Überschriften stellen die grundlegendsten Gliederungsmöglichkeiten für Texte dar. Ein Text wird durch Einsatz der verschiedenen Überschriftengrade sauber strukturiert.

Anhand von Überschriften wird Text gegliedert und strukturiert. Dabei sind wie in einem Fachbuch verschiedene Hierarchien (Wichtigkeit) von Überschriften möglich, z.B. Kapitelüberschrift, Abschnittsüberschriften usw.

Wichtig ist der korrekte Einsatz der Überschriften! Wenn wir uns jetzt die einzelne HTML-Seite wie ein Buch vorstellen, so hat das Buch einen Titel auf dem Umschlag – vergleichbar mit der Hauptüberschrift h1 bei der HTML-Seite. Diese kommt pro Seite nur 1-mal vor (welches Buch hat mehr als einen Titel?). Der Text wird durch die verschiedenen Überschriftengrade strukturiert. Nach der Hauptüberschrift kommt eine Unterüberschrift h2 und ein Unterkapitel von h2 bekommt dann h3.

Negativbeispiel Überschriftenreihenfolge: man sieht oft den Fehler auf Internetseiten, dass lustig zwischen den Überschriften ohne Logik gesprungen wird. Manchmal fehlt komplett die <h1> - das darf nicht sein – jede HTML-Seite hat exakt 1-mal eine <h1>.

Manchmal sieht man Sprünge – nach dem Einsatz von <h2> folgt sofort die <h4>. Auch das darf nicht sein. Überschriften sind zum logischen Strukturieren. Warum manche „Homepagebastler“ diese Sprünge machen liegt daran, dass diese wegen der Ausgabegröße solche „Sünden“ begehen. Aber auch hier gilt der Satz: Design wird immer über CSS gemacht – sprich also über CSS wird die Ausgabegröße der Überschrift später bestimmt.

Diese TAGs sich einzuprägen ist weder falsch noch schwer.

Überschriften in HTML nutzen

Wie wird nun der HTML-TAG für Überschriften genutzt? Wie wir bereits bei Absätzen gesehen haben, werden um den Text, der die Überschrift darstellt, die entsprechenden HTML-TAGs gepackt.

Für Überschriften wird der TAG <hX> genutzt. Dabei steht das h für das engl. header = Überschrift. Das X wird durch die Wichtigkeit ersetzt. Dabei stehen für X 1 bis 6.

  • 1 ist die größte und wichtigste und sollte nur 1-mal pro HTML-Seite vorkommen
  • ...
  • 6 die kleinste und somit unwichtigste (aber immer noch wichtiger als normaler Text)

Im folgenden Quellcode sind alle 6 Überschriften untereinander, was in der Realität unüblich ist. Nach eine Überschrift kommt meistens ein Absatz (wenn nicht mehr). Aber das Beispiel soll auch das Aussehen der Überschriften bisher noch ohne Design zeigen.

<h1>Überschriften-Ebene 1</h1>
<h2>Überschriften-Ebene 2</h2>
<h3>Überschriften-Ebene 3</h3>
<h4>Überschriften-Ebene 4</h4>
<h5>Überschriften-Ebene 5</h5>
<h6>Überschriften-Ebene 6</h6>
<p>normaler Text in einem Absatz ...</p>

Nach der Überschrift (End-TAG) erfolgen automatisch ein Umbruch und ein Abstand zum nächsten Element.

Die Ausgabe im Browser sieht wie folgt aus:

Überschriften-Ebene 1

Überschriften-Ebene 2

Überschriften-Ebene 3

Überschriften-Ebene 4

Überschriften-Ebene 5
Überschriften-Ebene 6

normaler Text in einem Absatz ...

Negativbeispiel: Der Gedanke, dass man innerhalb eines Absatzes eine Überschrift packt und dann der Aufbau wie folgt aussieht ist falsch!

<p><h1>Überschrift</h1></p>

Das ist falsch – entweder macht man einen Absatz oder man macht eine Überschrift!

Richtig ist:

<h1>Überschrift</h1>

<p>normaler Absatz</p>

Hinweis zu den Größen der Überschriften

Die Größe der einzelnen Überschriften ist relativ zueinander. Je nach Browser können diese unterschiedlich ausfallen (siehe Relativität unter http://www.html-seminar.de/relativitaet.htm). Dabei sind die unwichtigeren Überschriften teilweise kleiner als der normale Text. Das ist OK so und kann wenn gewünscht über CSS geändert werden.

Übung: HTML-Seite mit Überschriften und Absätzen

Erstellen Sie folgende HTML-Seite: index.htm

Geben Sie folgenden Text exakt so in den Texteditor Notepad (oder anderen einfachen Texteditor) ein. Bitte auch die Leerzeichen und die Umbrüche

Erweitern Sie den Text um Überschriften und Absätze

Die Struktur des Textes ist:

  1. Überschrift 1. Ordnung: Herzlich ...
  2. Absatz: Hier finden ...
  3. Überschrift 2. Ordnung: Meine Hobbies
  4. Absatz: Sind so zahlreich ...
  5. Absatz: Ihr Mustermann
Herzlich willkommen auf
der meiner ersten HTML-Seite

Hier finden Sie meine erste Homepage zum
Lernen von HTML

Meine Hobbies

Sind so zahlreich, dass es demnächst
eine weitere Seite gibt

Ihr Mustermann

Nach der Eingabe speichern Sie die Datei unter dem Namen "index.htm". Ansehen in einem Internet Browser (z. B. Internet Explorer oder Firefox)

Hier können Sie die Lösung Übung "HTML-Seite mit Überschriften und Absätzen" ansehen.

vorheriges Kapitel: Lösung zur Übung
Lösung zur ÜbungSeitenanfangLösung Übung Überschriften
eBook HTML-Seminar.de
del.icio.usMister Wong         Lösung zur ÜbungSeitenanfangLösung Übung Überschriften
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 20.1.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de