Überschriften in HTML
Auf Webseiten sind Überschriften vor allem wichtig, um die Struktur einer Seite festzulegen. Hierfür gibt es verschiedene Befehle, die für Überschriften mit den Ebenen 1 bis 6 verwendet werden können. Je nach Hierarchie der Überschriften sollten diese verwendet werden. Die Tags für die Überschriften werden auch H-Tags genannt, weil die Befehle mit einem H beginnen. Je nach Ebene hängt man nach dem H eine Nummer an. Die Ebene 1 stellt die höchste Ebene dar und Ebene 6 die niedrigste. Wie bei allen HTML-Befehlen werden diese in spitzen Klammern geschrieben. Es gibt jeweils einen öffnenden und einen schließenden H-Tag und innerhalb des Bereichs wird die Überschrift platziert. Nachfolgend sind die Codes für alle 6 Ebenen.
<h1>Überschrift Ebene 1</h1>
<h2>Überschrift Ebene 2</h2>
<h3>Überschrift Ebene 3</h3>
<h4>Überschrift Ebene 4</h4>
<h5>Überschrift Ebene 5</h5>
<h6>Überschrift Ebene 6</h6>Darstellung der Überschriften im Browser
In der Standardeinstellung werden die 6 verschiedenen Überschriften im Browser wie folgt dargestellt.
Strukturierung der Webseite mit Überschriften
Jede Seite einer Internetpräsenz sollte mindestens eine Überschrift der Ebene 1 besitzen und die Seiten sollten nach Möglichkeit auch mit der Überschrift beginnen. Wenn z.B. eine Seite mit einer Überschrift 3 beginnen würde, dann wäre das semantisch nicht richtig. Alle sonstigen Überschriften auf einer Seite hängen von der Struktur ab. Enthält die Seite ein Unterkapitel, kann man für das Kapitel z.B. die Überschrift 2 einfügen. Für ein Unterkapitel unterhalb der Ebene 2 kann man eine Überschrift 3 einfügen und nach dem System fortfahren. Bei sehr großen Seiten wären noch tiefere Kapitel und Überschriften denkbar. In der Praxis sieht es jedoch so aus, dass man kaum eine Überschrift tiefer als 3 Ebenen benötigt.
Schriftgröße, -art und -farbe der Überschriften ändern
Die standardmäßige Darstellung der Überschriften muss nicht so belassen werden. Wenn z.B. die Überschrift 1 zu groß, die Überschrift 3 zu klein empfunden wird, kann man über CSS-Stile die Schriftgröße, Farbe etc. ändern. Die Struktur geht dadurch nicht verloren. Eine Überschrift 1 kann durchaus ziemlich klein dargestellt werden und bleibt innerhalb Gliederungsstruktur trotzdem in der höchsten Ebene. Die Formatierung sollte jedoch so gewählt werden, dass sie der Gliederungsstruktur entspricht. Beispielsweise sollte die Schriftgröße für die Überschrift 3 nicht größer sein als für Überschrift 1.
CSS-Code, um die Schriftgröße der Überschrift 1 zu ändern
Der folgende Code kann z.B. im HEAD-Bereich der Seite eingefügt werden, um die Schriftgröße für Überschrift 1 auf 16px zu setzen. Der CSS-Code kann natürlich auch in eine CSS-Datei ausgelagert und auf der Seite eingebunden werden.
<style type="text/css">
h1 {
font-size: 16px;
}
</style>Daneben gibt es weitere Möglichkeiten, um über CSS-Stile die Überschriften zu formatieren, z.B. über Klassen. Mit folgenden Codezeilen wird die Klasse .ueberschrift-gross mit der Schriftgröße 16px definiert.
<style type="text/css">
.ueberschrift-gross {
font-size: 16px;
}
</style>Die Klasse könnte dann mit folgendem Code einer Überschrift zugewiesen werden.
<h1 class="ueberschrift-gross">Überschrift 1</h1>Solche Klassen können nicht nur bei Überschriften angewendet werden, sondern auch bei anderen Texten wie z.B. Absätzen. Diese beiden Beispiele sollten zunächst genügen. Neben diesen gibt es weitere Möglichkeiten für die Formatierung über CSS. Hierfür sollten die entsprechenden Dokumentationen durchgelesen werden.