Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

3.2 Überschriften: h1 bis h6

Webseiten werden nach der Anzeige im Browserfenster meist nicht konzentriert Wort für Wort gelesen, sondern auf der Suche nach Relevantem flüchtig überflogen.

Durch den Einsatz von Überschriften, Absätzen und Listen lockern Sie die Webseite optisch auf und bieten dem Auge des Betrachters – bildlich gesprochen – beim Überfliegen des Textes Landeplätze an.

Benutzen Sie Überschriften

Auch wenn Sie im Deutschunterricht das Wort »Gliederung« nicht sonderlich anziehend fanden, sollten Sie auf Ihren Webseiten Überschriften einsetzen. Überschriften geben einer Webseite  Struktur und lockern den Text optisch auf.

Überschriften sind im Idealfall so geschrieben, dass der Leser den Inhalt der Webseite durch das Springen von Überschrift zu Überschrift erschließen kann. Ein Hörer kann seinem Screenreader zum Beispiel sagen, dass er nur die Überschriften einer Webseite vorlesen soll.

HTML kennt sechs verschiedene Elemente für Überschriften, von h1 bis h6. Das h steht für heading (»Überschrift«), die Zahl dahinter für die Gliederungsebene. h2 bedeutet nicht »die zweite  Überschrift im Text«, sondern »eine Überschrift der zweiten Gliederungsebene«. Es kann auf einer Webseite also durchaus mehrere h2-Überschriften geben.

Überschriftebene nicht aufgrund der Schriftgröße wählen

In den meisten Browsern werden die unterschiedlichen Überschriftebenen standardmäßig durch verschieden große Schriftarten dargestellt. Widerstehen Sie der Versuchung, eine bestimmte Überschriftebene aufgrund der Schriftgröße zu wählen:

  • Das Aussehen einer Überschrift und damit auch deren Schriftgröße gestalten Sie später mit CSS.
  • In HTML sagen Sie momentan nur, dass der markierte Text eine Überschrift ist und welche Gliederungsebene sie hat.

Im Klartext: Beginnen Sie Ihre Webseite nicht z. B. mit <h3>, nur weil Ihnen <h1> zu groß erscheint.

Alle Überschriften sind übrigens sogenannte Block-Elemente (siehe im Buch Seite 64): Sie werden  automatisch so breit, wie es geht, und haben einen integrierten Zeilenumbruch.

ToDo: Eine Überschrift für die Webseite erstellen
  1. Öffnen Sie ggf. die Startseite index.html im Editor.
  2. Setzen Sie den Cursor in den Kopfbereich.
  3. Ergänzen Sie den hervorgehobenen Quelltext:

    <div id="kopfbereich">
    <h1>Little Boxes</h1>
    </div>

  4. Speichern Sie die Seite und betrachten Sie sie in einem Browser.

Dick und fett prangt der Text im Browserfenster. Nicht hübsch, aber Überschrift.