SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Trennlinien
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie Trennlinien in HTML erzeugen, und welche weiteren Möglichkeiten zur Formatierung von Trennlinien bestehen.
Keywords: SELFHTML, HTML, Trennlinien, hr, align, size, width, color
Date: 2005-10-31T14:21:30+01:00

| # Trennlinien
| Trennlinien definieren Trennlinien mit HTML gestalten Trennlinien mit CSS gestalten Weitere Informationen

## Trennlinien definieren

Trennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten oder allgemein zur Auflockerung. Eine Trennlinie erzeugt einen eigenen Absatz.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Trennlinien definieren</title>
    </head>
    <body>

    <p>Hier ist ein Abschnitt zu Ende.</p>
    <hr>
    <p>Und hier beginnt etwas Neues.</p>

    </body>
    </html>

### Erläuterung:

`<hr>` fügt eine Trennlinie ein (hr = horizontal rule = Querlinie). Dabei ist es egal, ob das Tag am Ende der Zeile des vorherigen Absatzes steht, oder in einer eigenen Zeile (wie im Beispiel), oder am Anfang des folgenden Absatzes.

### Beachten Sie:

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das `hr`-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form `<hr />`. Weitere Informationen finden Sie im Kapitel XHTML und HTML.

## Trennlinien mit HTML gestalten

Mit Hilfe diverser HTML-Attribute im `<hr>`-Tag können Sie eine Trennlinie auffälliger gestalten. Diese Attribute sind allerdings allesamt als deprecated eingestuft und sollen künftig aus dem HTML-Standard entfallen. Empfohlen wird die Gestaltung von Trennlinien mit CSS.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Trennlinien mit HTML gestalten</title>
    </head>
    <body>

    <p>Hier ist ein Abschnitt zu Ende.</p>
    <hr noshade width="300" size="3" align="left">
    <p>Hier beginnt etwas Neues.</p>

    </body>
    </html>

### Erläuterung:

Durch das Attribut `noshade` erreichen Sie, dass der Browser die Trennlinie massiv und durchgezogen, also nicht-schattiert anzeigt (noshade = unschattiert). Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das Attribut in der Form `noshade="noshade"` notieren, da XML-basierte Sprachen keine Attribute ohne Wertzuweisung erlauben.
Weitere Informationen dazu im Kapitel XHTML und HTML.

Durch das Attribut `width` (width = Breite) erreichen Sie, dass der Browser die Trennlinie so breit anzeigt wie angegeben. Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 300, erzwingen Sie, dass die Trennlinie so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, dass die Trennlinie maximal so viel Breite des Anzeigefensters einnimmt wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen (`%`).

Durch das Attribut `size` (size = Größe) können Sie die Höhe (Dicke) der Trennlinie bestimmen. Die Voreinstellung beträgt 2 Punkt. Mit dem Wert 1 erzwingen Sie also eine besonders dünne Trennlinie, mit Werten über 2 können Sie dickere als die normalen Trennlinien erzeugen.

Mit `align="left"` erreichen Sie, dass die Trennlinie linksbündig ausgerichtet wird (align = Ausrichtung, left = links). Mit `align="right"` wird die Trennlinie rechtsbündig ausgerichtet (right = rechts) und mit `align="center"` zentriert (Voreinstellung). Das Ausrichten von Trennlinien ist allerdings nur in Verbindung mit dem Attribut `width` sinnvoll, da die Trennlinie ansonsten stets über die gesamte verfügbare Breite geht.

Der Internet Explorer interpretiert darüber hinaus noch das Attribut `color`. Erlaubt ist dabei eine Farbangabe. Dieses Attribut hat jedoch nie zum HTML-Standard gehört.

## Trennlinien mit CSS gestalten

Das `<hr>`-Tag können Sie auch mit CSS gestalten. Das ist strikt HTML-Standard-konform und Sie haben noch deutlich mehr Gestaltungsmöglichkeiten als mit HTML-Attributen.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:

Ausrichtung und Absatzkontrolle
Außenrand und Abstand
Rahmen
Positionierung und Anzeige von Elementen

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Trennlinien mit CSS gestalten</title>
    </head>
    <body>

    <p>Hier ist ein Abschnitt zu Ende.</p>

    <hr style="width:300px; color:yellow; background-color:yellow; height:5px;
      margin-right:0; text-align:right; border:1px dashed blue;">

    <p>Hier beginnt etwas Neues.</p>

    </body>
    </html>

### Erläuterung:

Das `hr`-Element erhält im Beispiel eine Breite von 300 Pixeln, eine Höhe von 5 Pixeln, wird rechtsbündig ausgerichtet (mittels `margin-right:0` und `text-align:right` für Browser, die ersteres nicht umsetzen), wird in gelber Farbe dargestellt (mittels `color` und `background-color`) und erhält noch einen gestrichelten blauen Rahmen drumherum.

### Beachten Sie:

Internet Explorer 5.0 stellt den Rahmen nicht dar.

## Weitere Informationen

In der HTML-Referenz finden Sie genaue Angaben darüber, wo Trennlinien vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Trennlinien
Attribut-Referenz für Trennlinien

| Ältere Elemente zur Schriftformatierung
| Allgemeine Elemente für Textbereiche

© 2007 Impressum