HTML <hr> Tag
Das HTML <hr>-Tag markiert einen thematischen Bruch und wird als horizontale Linie dargestellt. Syntax, CSS-Styling, Attribute und Barrierefreiheit.
Das HTML <hr>-Tag steht für einen thematischen Bruch — einen Themenwechsel innerhalb eines Inhaltsabschnitts, etwa einen Szenenwechsel in einer Geschichte oder den Übergang zu einem neuen Thema in einem Referenzartikel. Standardmäßig rendert der Browser es als horizontale Linie, aber sein eigentlicher Zweck ist semantischer, nicht dekorativer Natur.
In HTML5 hat das <hr>-Tag eine Bedeutung: Es teilt Browsern und assistiven Technologien mit, dass die umgebenden Absätze zu unterschiedlichen Themen gehören. In älteren HTML-Versionen wurde es rein als Präsentationselement behandelt, das eine Linie zwischen Inhalten zieht. Wenn heute nur ein dekorativer Trenner ohne Themenwechsel gewünscht wird, sollte statt eines <hr> ein CSS border auf einem anderen Element verwendet werden.
Das visuelle Erscheinungsbild der Linie hängt vom Browser ab; oft wird sie mit einem leichten 3D-Effekt ("schattiert") gezeichnet, der per CSS überschrieben werden kann.
Wann <hr> verwenden (und wann nicht)
<hr> sollte verwendet werden, wenn ein echter Themenwechsel stattfindet:
- Zwischen zwei verschiedenen Abschnitten eines langen Artikels oder Dokuments.
- Zwischen Szenen oder Wechseln in einer Erzählung.
- Um Gruppen nicht zusammenhängender Formularfelder oder Listenelemente zu trennen, wenn eine neue Überschrift zu schwerwiegend wäre.
<hr> sollte nicht rein zur Dekoration verwendet werden. Wenn die Linie nur optischen Zwecken dient — zum Beispiel als Trenner unter jedem Avatar in einer Liste — erzeugt sie Lärm für Screenreader-Nutzer. In diesem Fall sollte ein border auf einem vorhandenen Element gestaltet oder role="presentation" zum Element hinzugefügt werden, damit es semantisch ignoriert wird. Zur Strukturierung von Seitenbereichen nach Bedeutung, siehe semantische Elemente in HTML5.
Barrierefreiheit: <hr> hat die implizite ARIA-Rolle separator und wird assistiven Technologien zugänglich gemacht — viele Screenreader kündigen es an (zum Beispiel als "Trenner"). Das ist genau das, was bei einem echten thematischen Bruch gewünscht wird, weshalb eine rein dekorative Linie lieber per CSS oder mit role="presentation" umgesetzt werden sollte.
Syntax
Das <hr>-Tag ist leer, was bedeutet, dass das schließende Tag nicht erforderlich ist. In XHTML muss das (<hr>)-Tag jedoch geschlossen werden (<hr/>).
Beispiel des HTML <hr>-Tags:
HTML hr tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>
This HTML tutorial will teach you the basics of the (Hyper Text Markup Language) and how to make your website from scratch.
</p>
<hr />
<h1>Learn CSS</h1>
<p>
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
</p>
</body>
</html>HTML <hr> size-Attribut
Das size-Attribut legt die Höhe der Linie fest.
Obwohl das size-Attribut eines der veralteten Attribute ist, wird es noch von allen Browsern unterstützt.
Beispiel des HTML <hr>-Tags mit dem "size"-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40" />
</body>
</html>Eine alternative Möglichkeit, die Größe des <hr>-Tags festzulegen, ist die Verwendung der CSS height Property.
Beispiel des HTML <hr>-Tags mit der height-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
height: 20px;
}
</style>
</head>
<body>
<p>
A horizontal line with a height of 20 pixels.
</p>
<hr />
</body>
</html>HTML <hr> width-Attribut
Das width-Attribut legt die Breite der Linie fest.
Das width-Attribut gehört ebenfalls zur Liste der veralteten Attribute, wird aber von allen Browsern unterstützt.
Beispiel des HTML <hr>-Tags mit dem width-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a width of 30%:</p>
<hr width="30%" />
</body>
</html>Verwenden Sie die CSS width Property anstelle des width-Attributs.
Beispiel des HTML <hr>-Tags mit der width-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 250px;
}
</style>
</head>
<body>
<p>A horizontal line with a width of 250 pixels:</p>
<hr />
</body>
</html>HTML <hr> noshade-Attribut
Das noshade-Attribut entfernt den 3D-Schatteneffekt von der horizontalen Linie.
Das noshade-Attribut ist eines der veralteten Attribute, wird aber von allen Browsern unterstützt.
Beispiel des HTML <hr>-Tags mit dem noshade-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Shaded horizontal line :</p>
<hr />
<p>Noshaded horizontal line:</p>
<hr noshade />
</body>
</html>Um den standardmäßigen 3D-("schattiert"-)Look in CSS zu entfernen, geben Sie dem <hr> einen flachen border und einen transparenten Hintergrund. Die Standardlinie wird mithilfe schattierter Rahmen gezeichnet; durch Ersetzen mit einem einzelnen durchgehenden Rahmen (und Leeren des Hintergrunds) entsteht eine schlichte, flache Linie — dasselbe Ergebnis, das das noshade-Attribut lieferte.
Beispiel des HTML <hr>-Tags mit der border-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
border: 1px solid #000000;
background: transparent;
}
</style>
</head>
<body>
<p>
A horizontal line specified with CSS border Property.
</p>
<hr />
</body>
</html>HTML align-Attribut
Das align-Attribut legt die Ausrichtung der Linie fest.
Das align-Attribut ist eines der veralteten Attribute, wird aber von allen Browsern unterstützt.
Beispiel des HTML <hr>-Tags mit dem align-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<hr align="left" width="70%" />
</body>
</html>Um ein <hr> zu positionieren, legen Sie eine width fest und steuern Sie den horizontalen margin — nicht text-align. Da <hr> ein Blockelement ist, verschiebt text-align es nicht. Verwenden Sie margin-right: auto, um es nach links zu schieben, margin-left: auto, um es nach rechts zu schieben, oder margin: 0 auto, um es zu zentrieren.
Beispiel des HTML <hr>-Tags mit der margin-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 50%;
margin-left: 0;
margin-right: auto;
}
</style>
</head>
<body>
<p>A horizontal line specified with CSS margin property</p>
<hr />
</body>
</html>Die Präsentationsattribute des <hr>-Tags sind in HTML5 veraltet. Für das Styling verwenden wir stattdessen CSS.
Das <hr>-Tag gestalten
Die CSS border-Eigenschaft wird verwendet, um die horizontale Linie zu gestalten.
Beispiel des HTML <hr>-Tags mit der border-Eigenschaft gestaltet:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* blue border */
hr.one {
border-top: 1px solid #1c87c9;
}
/* Dashed border */
hr.two {
border-top: 1px dashed #1c87c9;
}
/* Dotted border */
hr.three {
border-top: 1px dotted #1c87c9;
}
/* Thick border */
hr.four {
border: 1px solid #1c87c9;
}
/* Large rounded border */
hr.five {
border: 15px solid #1c87c9;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Default:</p>
<hr />
<p>Styling "hr" tag</p>
<hr class="one" />
<hr class="two" />
<hr class="three" />
<hr class="four" />
<hr class="five" />
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left center right | Legt die horizontale Ausrichtung einer Linie fest. In HTML5 veraltet, wird aber noch von Browsern aus Gründen der Abwärtskompatibilität unterstützt. |
| noshade | noshade | Legt fest, dass die Linie ohne 3D-Effekt angezeigt wird. In HTML5 veraltet, wird aber noch von Browsern aus Gründen der Abwärtskompatibilität unterstützt. |
| size | pixels | Legt die Größe einer Linie fest. In HTML5 veraltet, wird aber noch von Browsern aus Gründen der Abwärtskompatibilität unterstützt. |
| width | pixels % | Legt die Breite einer Linie fest. In HTML5 veraltet, wird aber noch von Browsern aus Gründen der Abwärtskompatibilität unterstützt. |
Das <hr>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.