Das HR-Tag wird in Webdokumenten verwendet, um eine horizontale Linie über die Seite anzuzeigen oder manchmal als horizontale Regel bezeichnet. Im Gegensatz zu einigen Tags benötigt dieses Tag kein schließendes Tag. Sie müssen also nur noch tippen um die Zeile einzufügen.
Die Linie erstreckt sich über die gesamte Breite der Seite und enthält einige Standardattribute zur Beschreibung der Dicke, des Ortes und der Farbe der Linie. Sie können diese Einstellungen jedoch auch ändern, wenn Sie möchten.
Sie können die Eigenschaften der horizontalen Linie in einem HTML5-Dokument bearbeiten, indem Sie das CSS der Seite bearbeiten. Die horizontalen HTML4-Linien wurden auf der HTML-Seite des Dokuments geändert.
Ist das HR-Tag semantisch?
In HTML4 war das HR-Tag nicht semantisch. Semantische Elemente beschreiben ihre Bedeutung in Begriffen, die der Browser und der Entwickler leicht verstehen können. Das HR-Tag war nur eine Möglichkeit, einem Dokument eine einfache Zeile hinzuzufügen, wo immer Sie es wollten. Wenn Sie nur den oberen oder unteren Rand des Elements gestalten, an dem die Linie erscheinen soll, platzieren Sie eine horizontale Linie am oberen oder unteren Rand des Elements. Im Allgemeinen war das HR-Tag jedoch für diesen Zweck einfacher zu verwenden.
Ausgehend von HTML5 wurde das HR-Tag semantisch und definiert jetzt einen thematischen Bruch auf Absatzebene. Dies ist ein Bruch im Fluss des Inhalts, der keine neue Seite oder ein anderes starkes Trennzeichen erfordert - es handelt sich um eine Änderung des Themas. Sie könnten beispielsweise nach einem Szenenwechsel in einer Story ein HR-Tag finden oder eine Änderung des Themas in einem Referenzdokument anzeigen.
HR-Attribute in HTML4 und HTML5
In HTML4 können dem HR-Tag einfache Attribute zugewiesen werden, einschließlich ausrichten, breite, und kein Schatten . Die Ausrichtung kann auf eingestellt werden links , Center , Recht oder rechtfertigen . Die Breite passt die Breite der horizontalen Linie von 100% an, die die Linie über die Seite erstreckt. Das kein Schatten Attribut rendert eine durchgehende Farbe anstelle einer schattierten Farbe.
Diese Attribute sind in HTML5 veraltet. Sie sollten stattdessen CSS verwenden, um Ihre HR-Tags in HTML5-Dokumenten zu gestalten.
Dies ist ein HTML5-Beispiel, bei dem die horizontale Linie mithilfe von Inline-CSS auf 10 Pixel eingestellt wird (Formatvorlagen werden zusammen mit HTML direkt in das Dokument eingefügt):
Eine andere Möglichkeit, horizontale Linien in HTML5 zu stilisieren, besteht darin, eine separate CSS-Datei zu verwenden und eine Verknüpfung mit dem HTML-Dokument herzustellen. In der CSS-Datei würden Sie den Stil wie folgt schreiben: hr {Höhe: 10px}
Der gleiche Effekt in HTML4 erfordert, dass Sie dem HTML-Inhalt ein Attribut hinzufügen. So ändern Sie die Größe der horizontalen Linie mit Größe Attribut:
Es gibt viel mehr Freiheit beim Gestalten horizontaler Linien in CSS im Vergleich zu HTML. Nur der Breite und Höhe Stile sind in allen Browsern konsistent, daher können bei Verwendung anderer Stile einige Versuche und Fehler erforderlich sein. Die Standardbreite beträgt immer 100 Prozent der Breite der Webseite oder des übergeordneten Elements. Die Standardhöhe der Regel beträgt zwei Pixel.
