HTML-Tag <hr>
Das HTML-Tag <hr> ist ein Element auf Blockebene, das einen thematischen Bruch in einem HTML-Dokument darstellt. Das visuelle Erscheinungsbild der horizontalen Linie hängt vom Browser ab. Oft wird es mit einem Rahmen dargestellt, der einen 3D-Effekt erzeugt.
In HTML5 definiert das <hr>-Tag einen thematischen Bruch zwischen Elementen auf Absatzebene. In früheren HTML-Versionen wurde es verwendet, um eine horizontale Linie zu zeichnen, die Inhalte visuell voneinander trennte. In HTML5 hat es eine semantische Bedeutung.
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 für das HTML-<hr>-Tag:
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> Größenattribut
Das size-Attribut gibt die Höhe der Linie an.
DANGER
Obwohl das size-Attribut eines der veralteten Attribute ist, wird es in allen Browsern weiterhin unterstützt.
Beispiel für das HTML-<hr>-Tag mit dem Attribut "size":
hr tag size attribute
<!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>TIP
Eine alternative Möglichkeit, die Größe des <hr>-Tags anzugeben, ist die Verwendung der CSS height Property.
Beispiel für das HTML-<hr>-Tag in Verbindung mit der height-Eigenschaft:
hr tag with CSS width property
<!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> Breitenattribut
Das width-Attribut gibt die Breite der Linie an.
DANGER
Das width-Attribut gehört ebenfalls zur Liste der veralteten Attribute, wird aber in allen Browsern unterstützt.
Beispiel für das HTML-<hr>-Tag mit dem width-Attribut:
hr tag width attribute
<!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>TIP
Verwenden Sie stattdessen die CSS width Property anstelle des width-Attributs.
Beispiel für das HTML-<hr>-Tag in Verbindung mit der width-Eigenschaft:
hr tag with CSS width property
<!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-Schattierungseffekt von der horizontalen Linie.
DANGER
Das noshade-Attribut gehört zu den veralteten Attributen, wird aber in allen Browsern unterstützt.
Beispiel für das HTML-<hr>-Tag mit dem noshade-Attribut:
hr tag with noshade attribute
<!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>TIP
Eine alternative Möglichkeit, den Noshade-Effekt zu erzielen, ist die Verwendung der CSS border Property.
Beispiel für das HTML-<hr>-Tag in Verbindung mit der border-Eigenschaft:
hr tag with CSS border property
<!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 gibt die Ausrichtung der Linie an.
DANGER
Das align-Attribut gehört zu den veralteten Attributen, wird aber in allen Browsern unterstützt.
Beispiel für das HTML-<hr>-Tag mit dem align-Attribut:
hr tag align attribute
<!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>TIP
Verwenden Sie stattdessen die CSS text-align Property anstelle des align-Attributs von <hr>.
Beispiel für das HTML-<hr>-Tag in Verbindung mit der margin-Eigenschaft:
hr tag with CSS margin property
<!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>DANGER
Die Präsentationsattribute des <hr>-Tags sind in HTML5 veraltet. Für das Styling verwenden wir stattdessen CSS.
So gestalten Sie das <hr>-Tag
Die CSS border property wird verwendet, um die horizontale Linie zu gestalten.
Beispiel für das HTML-<hr>-Tag, gestaltet mit der border-Eigenschaft:
hr tag with CSS border property
<!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>Attributes
| Attribute | Value | Description |
|---|---|---|
| align | left center right | Definiert die horizontale Ausrichtung einer Linie. In HTML5 veraltet, wird aber aus Gründen der Abwärtskompatibilität weiterhin von Browsern unterstützt. |
| noshade | noshade | Definiert, dass die Linie ohne 3D-Effekt angezeigt wird. In HTML5 veraltet, wird aber aus Gründen der Abwärtskompatibilität weiterhin von Browsern unterstützt. |
| size | pixels | Definiert die Größe einer Linie. In HTML5 veraltet, wird aber aus Gründen der Abwärtskompatibilität weiterhin von Browsern unterstützt. |
| width | pixels % | Definiert die Breite einer Linie. In HTML5 veraltet, wird aber aus Gründen der Abwärtskompatibilität weiterhin von Browsern unterstützt. |
Das <hr>-Tag unterstützt die Global Attributes und die Event Attributes.
Practice
What does the HTML <hr> tag do?