Der <hr>
-Tag in HTML: Beispiele und Anwendung
Der <hr>
-Tag in HTML steht für „horizontal rule“ (horizontale Linie) und wird verwendet, um visuelle Trennlinien auf einer Webseite zu erstellen. Diese Trennlinien dienen dazu, Inhalte zu strukturieren und Abschnitte optisch voneinander zu trennen. In diesem Artikel erfahren Sie, wie der <hr>
-Tag verwendet wird und wie er individuell gestaltet werden kann.
Grundlegende Syntax von <hr>
Der <hr>
-Tag ist ein sogenanntes leeres Tag, das keine schließende Tag-Variante besitzt. Die Syntax ist daher einfach:
<hr>
Beispiel:
<p>Absatz 1</p>
<hr>
<p>Absatz 2</p>
Darstellung im Browser:
Absatz 1
Absatz 2
Anwendung von <hr>
Der <hr>
-Tag wird in der Regel verwendet, um:
- Abschnitte innerhalb eines Dokuments visuell zu trennen.
- Eine inhaltliche oder thematische Trennung darzustellen.
- Eine horizontale Linie als Designelement zu integrieren.
Styling des <hr>
-Tags mit CSS
Standardmäßig wird <hr>
als eine einfache, graue Linie dargestellt. Mit CSS kann der Stil jedoch individuell angepasst werden, um besser zum Design der Webseite zu passen.
Beispiel: Farbe und Dicke ändern
<style>
hr {
border: none;
height: 2px;
background-color: #000;
}
</style>
Beispiel: Linie mit Schatten
<style>
hr {
border: none;
height: 1px;
background: linear-gradient(to right, #fff, #ccc, #fff);
}
</style>
Beispiel: Gepunktete oder gestrichelte Linie
<style>
hr {
border: none;
border-top: 2px dashed #ccc;
}
</style>
Semantische Bedeutung von <hr>
In modernen HTML-Versionen wie HTML5 hat der <hr>
-Tag eine semantische Bedeutung erhalten. Er wird verwendet, um einen thematischen Wechsel im Inhalt darzustellen. Damit hilft er nicht nur bei der optischen Gestaltung, sondern verbessert auch die Zugänglichkeit und Strukturierung einer Webseite.
Beispiel:
<h1>Kapitel 1</h1>
<p>Inhalt des ersten Kapitels.</p>
<hr>
<h1>Kapitel 2</h1>
<p>Inhalt des zweiten Kapitels.</p>
Kombinieren mit anderen HTML-Elementen
Der <hr>
-Tag kann in Kombination mit anderen HTML-Elementen verwendet werden, um ansprechende Designs zu erstellen.
Beispiel: Horizontale Linie mit Text
<div style="text-align: center;">
<hr>
<span>***</span>
<hr>
</div>
Darstellung:
Fazit
Der <hr>
-Tag ist ein vielseitiges Element in HTML, das sowohl für die Strukturierung als auch für das Design von Webseiten genutzt werden kann. Durch die einfache Kombination mit CSS lässt sich die Standarddarstellung leicht anpassen und in ein modernes Webdesign integrieren. Experimentieren Sie mit den Styling-Möglichkeiten, um das Beste aus diesem einfachen, aber wirkungsvollen Element herauszuholen!
Letzte Bearbeitung am Montag, 30. Dezember 2024 – 8:50 Uhr von Alex, Webmaster für Google und Bing SEO.