Startseite ⇒ Texte strukturieren ⇒ HTML Trennlinie
1946 Aufrufe

Eine Trennlinie in HTML definieren

Das Element hr

hr = horizontal rule = Horizontale Linie


Beschreibung:

Mit einer Trennlinie können Sie in HTML-Dokumenten nicht zusammengehörige Textabschnitte von einander trennen und optisch abgrenzen. Das HTML Element hr erzeugt dabei im Textfluß eine waagerechte Linie zwischen zwei Absätzen.


Syntax:

Eine horizontale Trennlinie in HTML-Dokumenten wird durch das HTML Element <hr> notiert. In XHTML müssen Sie das Tag als inhaltsleer kennzeichnen. Dafür notieren Sie <hr />


Hinweis:

Die Darstellung der Trennlinie variert zwischen den Browsern teilweise sehr stark. Besonders der Abstand zu den Absätzen vor und nach der Trennlinie. Im Internet Explorer z.B. ist der Abstand deutlich höher als bei Mozilla Firefox und Opera.


Quelltext: 
<p>Eine Trennlinie</p>
<hr />
<p>zwischen zwei Absätzen</p>
Ausgabe:

Eine Trennlinie

zwischen zwei Absätzen




DEPRECATED

Trennlinien gestalten


Hinweis:

Alle Attribute des HTML Elementes hr sind vom W3-Konsortium als DEPRECATED (mißbilligt) deklariert worden. Es wird empfohlen auf StyleSheets zurückzugreifen.


Attribut Beschreibung
size="Wert" bestimmt die Höhe / Dicke der Trennlinie
noshade="noshade" die Trennlinie wird nicht-schattiert anzeigt
width="Wert" bestimmt die Breite der Trennlinie
align="Wert" bestimmt die Ausrichtung der Trennlinie
color="Wert" bestimmt die Farbe der Trennlinie

Höhe bestimmen:

size = Größe


Mit dem Attribut size="Wert" können Sie die Höhe / Dicke der Trennlinie bestimmen. Dabei steht für "Wert" eine Zahl in Pixel. Voreinstellung hierbei ist der Wert 2.


Quelltext:

<hr size="1" />
<hr size="2" />
<hr size="8" />
<hr size="20" />

Ausgabe:


Schattierung entfernen:

noshade = unschattiert


Mit dem Attribut noshade="noshade" können Sie die Trennlinie massiv und durchgezogen darstellen. Als "Wert" müßen Sie hierfür "noshade" angeben.


Quelltext:

<hr />
<hr noshade="noshade" />
<hr size="10" />
<hr size="10" noshade="noshade" />

Ausgabe:


Breite bestimmen:

width = Breite


Mit dem Attribut width="Wert" können Sie die Breite der Trennlinie in Pixeln oder in Prozent bestimmen. Voreinstellung hierbei ist der Wert 100%.


Quelltext:

<hr width="50px" />
<hr width="50%" />
<hr width="100%" />
<hr width="80%" />

Ausgabe:


Ausrichtung bestimmen:

align = ausrichten


Mit dem Attribut align="Wert" können Sie die Ausrichtung der Trennlinie bestimmen. Dabei gibt "Wert" die Richtung an. Voreinstellung hierbei ist der Wert "center". Dieses Attribut macht nur in Verbindung mit dem Attribut width="Wert" Sinn, da die Voreinstellung der Breite 100% ist.


Quelltext: 
<hr width="100px" align="left"/>
<hr width="50%" align="right" />
<hr width="50%" align="center" />
Ausgabe:



Weiterführende Informationen:


Weblinks: