Natürlich will man den Textinhalt seiner Website meist mittels Überschriften strukturieren – dank CSS stehen einem hierbei fast unbegrenzte Möglichkeiten des Stylings zur Verfügung. In diesem Tutorial stelle ich die für Überschriften zuständigen h-Tags nicht nur vor, sondern ich möchte auch auf einige häufig gemachte Fehler hinweisen.
häufige Fehler
Immer wieder stößt man auf Websiten, bei denen die Überschriften durch einen Div-, Span- oder p-Tag formatiert werden. Zweifelsohne ist es möglich, einen Titel als Absatz (<p>) zu verpacken, ihn via Span zu formatieren oder ihn in einen eigenen Div zu setzen.
Aber dieses Vorgehen erzeugt nicht nur unnötigen Code (da man einem als Überschrift eingesetzten p-Tag ja zumindest eine Klasse zuweisen muss), sondern sie missachtet auch die in HTML vorgesehene Syntax und führt zudem zu einer schlechteren Platzierung einer Seite in Suchmaschinen wie etwa Google.
Aber der Reihe nach :-).
die h-Tags
HTML wartet für Überschriften mit einem eigenen Tag auf: dem h-Tag, genauer gesagt: den h-Tags. Es gibt nämlich sechs verschiedene, von h1 bis h6, wobei h1 für die erste Überschrift vorgesehen ist, h2 für den Untertitel, h für die nächstkleinere und so weiter.
Den Titel schreibt man also so:
<h1>Überschrift</h1>
Überschriften stylen
Standardmäßig sind diese h-Tags schon vorformatiert, d.h., auch wenn man sie nicht selber via CSS modifiziert, weisen sie bereits bestimmte Eigenschaften wie etwa eine verhältnismäßig große Größe, Fett-Gesetztsein (bold) etc. auf.
Sie mittels CSS nach Belieben anzupassen, ist ein Kinderspiel – im Stylesheet schreibt man einfach:
h1 {
...
}
Suchmaschinen
Suchmaschinen, wie zum Beispiel Google, beschränken sich beim Durchforsten von Seiten längst nicht mehr nur auf die Meta-Tags im Dateiheader oder den jeweiligen Seitentitel, der im Header angegeben wird – die h1- und h2-Tags spielen eine wichtige Rolle. Den Wörtern, die in diesen Tags enthalten sind, misst Google eine große Bedeutung zu.
Daher sollte man darauf achten, erstens überhaupt mit den h-Tags zu arbeiten und die Überschriften darin auch aussagekräftig zu halten. “Blabla 1″ und “Blabla 2″ wären zum Beispiel nicht so wirklich eine gute Entscheidung. ;-)