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.

Erstelle das Verzeichnis ./ueberschrift.

Erstelle die Datei ./ueberschrift.htm und erstelle wie im Beispiel 6 Überschriften deiner Wahl. Beginne mit h1.

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>

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

Erstelle die Datei ./ueberschrift2.htm

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

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: Informatik macht Spass

Herzlich willkommen auf meiner Seite

Hier findest du meine erste Homepage zum Lernen von HTML

Meine Hobbies

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

Informatik macht Spaß

Nun wirds spannend. Ansehen in einem Internet Browser (z. B. Internet Explorer oder Firefox).

Beide Überschriften da? Absaätze auch? Nein – dann gehe in den Code und korrigiere! (Abspeichern – F5)