HTML Horizontal Line mit dem hr-Tag

Die HTML Horizontal Line ist eine Linie, die den Inhalt auf einer Website in zwei Abschnitte unterteilt. Das dazugehörige HTML-<hr>-Tag benötigt kein abschließendes Element.

Was ist eine HTML Horizontal Line?

Eine HTML Horizontal Line wird genutzt, um eine sichtbare und durchgehende Trennlinie zwischen zwei Paragraphen oder anderen Sinnabschnitten in einem HTML-Dokument zu ziehen. Sie wird mit dem HTML-<hr>-Tag definiert und dient der besseren Strukturierung und Lesbarkeit einer Webseite. <hr> ist nicht nur eine visuelle Trennlinie, sondern auch von semantischer Bedeutung: Das Element weist darauf hin, dass ein Themenwechsel oder eine thematische Pause erfolgt.

Das HTML-Tag kann theoretisch an einer beliebigen Stelle innerhalb des Elements body eingesetzt werden und kommt ohne ein schließendes Element aus. Die Abkürzung „hr“ steht für „horizontal ruler“ (dt. horizontales Lineal). HTML <hr> unterstützt alle HTML-Attribute und wird von allen gängigen Browsern unterstützt.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

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 Funktionsweise des Elements können wir mit einem einfachen Beispiel für eine HTML Horizontal Line veranschaulichen. Dafür nehmen wir einen Absatz (<p>) und einen zitierten Text (<blockquote>) und trennen die beiden Sinneinheiten in unserem HTML-Dokument durch eine horizontale 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
html-horizontal-line-beispiel.png
Durch die horizontale Linie werden Textpassage und Zitat visuell voneinander getrennt.

Aussehen der horizontalen Linie in HTML anpassen

Es ist möglich, das Aussehen einer HTML Horizontal Line anzupassen. Während dafür früher die Attribute align, color, noshade, size und width verwendet wurden, werden diese seit HTML5 nicht mehr unterstützt. Stattdessen 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 horizontalen HTML-Linie ändern Sie mit der Eigenschaft 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 horizontale Linie ohne Schatten einzubinden:

<!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 Horizontal 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
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?