In diesem Tutorial zeige ich euch, wie ihr Trennlinien im HTML definiert. Was das ist? Das sind horizontale Linien, die ihr verwenden könnt um z.B. Textabschnitte sichtbar voneinander zu trennen.

Das Definieren einer solchen Trennlinie im HTML ist kinderleicht:

<p>Textabschnitt 1</p>
<hr />
<p>Textabschnitt 2</p>

Der allein stehende Tag <hr /> (hr = horizontal) erzeugt nun eine horizontale Linie zwischen Textabschnitt 1 und Textabschnitt 2.

Im HTML gibt es sogar einige Attribute um diese Trennlinie zu gestalten. Allerdings ist diese Methode veraltet und in Zukunft sollte man dafür auf CSS zurückgreifen.

Im normalen Zustand hat die Trennlinie einen kleinen Schatten. Um diesen zu Entfernen kann man das Attribut "noshade" benutzen:

<p>Textabschnitt 1</p>
<hr noshade />
<p>Textabschnitt 2</p>

Nun hat die Trennlinie keinen Schatten mehr.

Das Attribut "size" legt die Dicke der Linie fest (im Prinzip die Höhe):

<p>Textabschnitt 1</p>
<hr size="3" />
<p>Textabschnitt 2</p>

Die Trennlinie ist nun 3 Pixel hoch. Prozentangaben sind meines Wissens nicht möglich (wäre ja auch unsinnig).

Die Breite der Trennlinie kann wie gewohnt mit dem Attribut "width" festgelegt werden:

<p>Textabschnitt 1</p>
<hr width="200" />
<p>Textabschnitt 2</p>

Hierbei sind auch Prozentangaben möglich. In unserem Beispiel ist die Linie nun 200px breit.

Mit dem Attribut "align" können wir nun noch die Ausrichtung der Linie definieren:

<hr align="left" />
<hr align="center" />
<hr align="right" />

So kann die Linie links, mittig oder rechts platziert bzw. ausgerichtet werden.

Im Internet Explorer lässt sich auch noch die Farbe der Trennlinie definieren, aber das hat nie zum HTML Standard gehört, daher gehe ich da auch nicht näher drauf ein.

Das wars dann auch schon. Wie ihr die Trennlinien mit CSS gestalten könnt, erfahrt ihr dann in einem späterem Tutorial.