Die HTML Ho­ri­zon­tal Line ist eine Linie, die den Inhalt auf einer Website in zwei Ab­schnit­te un­ter­teilt. Das da­zu­ge­hö­ri­ge HTML-<hr>-Tag benötigt kein ab­schlie­ßen­des Element.

Was ist eine HTML Ho­ri­zon­tal Line?

Eine HTML Ho­ri­zon­tal Line wird genutzt, um eine sichtbare und durch­ge­hen­de Trenn­li­nie zwischen zwei Pa­ra­gra­phen oder anderen Sinn­ab­schnit­ten in einem HTML-Dokument zu ziehen. Sie wird mit dem HTML-<hr>-Tag definiert und dient der besseren Struk­tu­rie­rung und Les­bar­keit einer Webseite. <hr> ist nicht nur eine visuelle Trenn­li­nie, sondern auch von se­man­ti­scher Bedeutung: Das Element weist darauf hin, dass ein The­men­wech­sel oder eine the­ma­ti­sche Pause erfolgt.

Das HTML-Tag kann theo­re­tisch an einer be­lie­bi­gen Stelle innerhalb des Elements body ein­ge­setzt werden und kommt ohne ein schlie­ßen­des Element aus. Die Abkürzung „hr“ steht für „ho­ri­zon­tal ruler“ (dt. ho­ri­zon­ta­les Lineal). HTML <hr> un­ter­stützt alle HTML-Attribute und wird von allen gängigen Browsern un­ter­stützt.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

HTML <hr>: Syntax und Beispiel

Die Syntax von HTML <hr> ist einfach, da Sie außer dem Tag keine weiteren Attribute oder Parameter benötigen:

<hr>
html

Die Funk­ti­ons­wei­se des Elements können wir mit einem einfachen Beispiel für eine HTML Ho­ri­zon­tal Line ver­an­schau­li­chen. Dafür nehmen wir einen Absatz (<p>) und einen zitierten Text (<blockquote>) und trennen die beiden Sinn­ein­hei­ten in unserem HTML-Dokument durch eine ho­ri­zon­ta­le Linie. Der passende Code sieht so aus:

<!DOCTYPE html>
<html>
<body>
<h1>HTML Horizontale Linie</h1>
<p>HTML ist die Standard-Auszeichnungssprache für Dokumente, die im Web angezeigt werden sollen. Sie beschreibt die Struktur einer Webseite und ermöglicht es, Text, Bilder, Links und andere Elemente zu definieren.</p>
<hr>
<blockquote>„HTML ist einfach zu lernen und bietet eine solide Grundlage für die Erstellung von Webseiten.“</blockquote>
</body>
</html>
html
Bild: Beispiel für eine horizontale Linie in HTML
Durch die ho­ri­zon­ta­le Linie werden Text­pas­sa­ge und Zitat visuell von­ein­an­der getrennt.

Aussehen der ho­ri­zon­ta­len Linie in HTML anpassen

Es ist möglich, das Aussehen einer HTML Ho­ri­zon­tal Line an­zu­pas­sen. Während dafür früher die Attribute align, color, noshade, size und width verwendet wurden, werden diese seit HTML5 nicht mehr un­ter­stützt. Statt­des­sen können Sie das CSS-Attribut style nutzen.

Statt align verwenden Sie diesen Code:

<!DOCTYPE html>
<html>
<body>
<h1>HTML Horizontale Linie</h1>
<p>HTML ist die Standard-Auszeichnungssprache für Dokumente, die im Web angezeigt werden sollen. Sie beschreibt die Struktur einer Webseite und ermöglicht es, Text, Bilder, Links und andere Elemente zu definieren.</p>
<hr style="width:50%;text-align:left;margin-left:0">
<blockquote>„HTML ist einfach zu lernen und bietet eine solide Grundlage für die Erstellung von Webseiten.“</blockquote>
</body>
</html>
html

Die Farbe der ho­ri­zon­ta­len HTML-Linie ändern Sie mit der Ei­gen­schaft color:

<!DOCTYPE html>
<html>
<body>
<h1>HTML Horizontale Linie</h1>
<p>HTML ist die Standard-Auszeichnungssprache für Dokumente, die im Web angezeigt werden sollen. Sie beschreibt die Struktur einer Webseite und ermöglicht es, Text, Bilder, Links und andere Elemente zu definieren.</p>
<hr style="color:yellow;background-color:gray">
<blockquote>„HTML ist einfach zu lernen und bietet eine solide Grundlage für die Erstellung von Webseiten.“</blockquote>
</body>
</html>
html

Statt noshade nutzen Sie den folgenden Code, um eine ho­ri­zon­ta­le Linie ohne Schatten ein­zu­bin­den:

<!DOCTYPE html>
<html>
<body>
<p>Eine normale horizontale Linie:</p>
<hr>
<p>Mit CSS:</p>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
</body>
</html>
html

Die Höhe verändern Sie mit height:

<!DOCTYPE html>
<html>
<body>
<p>Eine normale horizontale Linie:</p>
<hr>
<p>Eine horizontale Linie mit einer Höhe von 50 Pixeln:</p>
<hr style="height:50px">
</body>
</html>
html

Die Breite der HTML Ho­ri­zon­tal Line stellen Sie mit dem Parameter width:

<!DOCTYPE html>
<html>
<body>
<p>Eine normale horizontale Linie:</p>
<hr>
<p>Eine horizontale Linie mit einer Breite von 30 Prozent:</p>
<hr style="width:30%">
</body>
</html>
html
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü