SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Trennlinien

SELFHTML/Navigationshilfen HTML/XHTML Elemente zur Textstrukturierung
	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

SELFHTML/Navigationshilfen HTML/XHTML Elemente zur Textstrukturierung