Selbst wenn es mit CSS einen wesentlich leistungsfähigeren Weg gibt, die Texte einer Website zu formatieren, viele einfache Auszeichnungen lassen sich auch ganz leicht mit HTML realisieren.

Insbesondere bei der optischen Gestaltung von Newslettern spielt HTML immer noch eine wichtige Rolle, da die meisten Mailclients CSS nicht oder (aus Sicherheitsgründen) nur unvollständig unterstützen.

Außerdem bietet die Textgestaltung mit HTML einen entscheidenden Vorteil: Sie ist unkompliziert – und deshalb für technisch weniger anspruchsvolle Websites bestens geeignet.

Bevor Sie mit dem Tutorial beginnen…

Dieses Tutorial setzt lediglich Basiskenntnisse in Sachen HTML voraus:

Sie sollten den grundlegenden Aufbau eines HTML-Dokuments beherrschen und dieses mit einem entsprechenden Editor bearbeiten können.

Einleitende / abschließende HTML-Tags

Jedes HTML-Tag existiert in zwei Varianten: Das einleitende Tag und das abschließende Tag.

Beide unterscheiden sich lediglich darin, dass dem abschließenden Tag ein Schrägstrich vorangestellt wird. Das abschließende Tag signalisiert dem Webbrowser das Ende der Auszeichnung.

In der Codezeile <h1>Unser HTML-Tutorial</h1> wird der Webbrowser angewiesen, eine Überschrift darzustellen. Diese beginnt ab dem <h1>-Tag und endet mit seiner schließenden Variante </h1>.

Experten-Tipp: Um standardkonform zu arbeiten, sollten Sie Tags ohne schließende Variante als „inhaltsleer“ kennzeichnen. Dafür nutzt man einen Schrägstrich, der vor die letzte spitze Klammer gesetzt wird (z.B. <hr /> – zum Zeichnen einer horizontalen Linie).

Übung macht den Meister!

Damit Sie einfacher selbst Hand anlegen und experimentieren können, haben wir alle Beispiele dieses Tutorials in einer HTML-Datei zum Download zusammengefasst.

Download: Alle Beispiele dieses Tutorials (HTML)

Überschriften

Das Tag zum Formatieren einer Überschrift lautet <hX> („h“ ist der Anfangsbuchstabe des englischen Begriffs „headline“, also „Überschrift“ – klingt einleuchtend).

Das X steht dabei für eine beliebige ganze Zahl zwischen 1 und 6, wobei 1 die Hauptüberschrift festlegt, gefolgt von 2, 3 und so weiter bis hin zur untersten sechsten Ebene.

Beispiel:

<h1>Das ist die Überschrift der ersten Ebene</h1>
<h2>Das ist die Überschrift der zweiten Ebene</h2>
<h3>Das ist die Überschrift der dritten Ebene</h3>
<h4>Das ist die Überschrift der vierten Ebene</h4>

Und so sieht’s aus:

Mit den <hX>-Tags lässt sich ein Text also hierarchisch strukturieren.

In gestalterischer Hinsicht ist es aber nicht erforderlich, sich an diese Hierarchie zu halten (z.B. <h2> vor <h1> oder alle Überschriften in <h3>). Sie können also allein die Optik entscheiden lassen.

Zwar wird den <hX>-Tags ein gewisser Nutzen im Bereich der Suchmaschinen-Optimierung zugeschrieben; negative Einflüsse auf das Ranking bei „kreativer Nutzung“ der Tags sind bislang nicht bekannt.

Jetzt mischt sich auch noch CSS ein

Das Erscheinungsbild von Überschriften ist einerseits in den Browser-Einstellungen fix hinterlegt, andererseits kann es aber auch – wie so vieles – durch CSS beeinflusst werden.

Sollten Ihnen beim Bearbeiten eines HTML-Dokuments also einmal ungewöhnlich formatierte Überschriften über den Weg laufen, dann hatte hier bestimmt CSS seine Finger Eigenschaften im Spiel.