hr Befehl in HTML 2025 ❤️ Beispiel und Tutorial

Der HTML hr-Befehl ist ein unverzichtbares Element für die strukturierte Gestaltung von Webseiten. Diese horizontale Linie dient nicht nur der optischen Trennung von Inhalten, sondern erfüllt auch wichtige semantische Funktionen für die Barrierefreiheit und Suchmaschinenoptimierung. In diesem umfassenden Leitfaden erfahren Sie alles über die korrekte Verwendung, moderne Styling-Möglichkeiten und Best Practices des hr-Elements.

Was ist das HTML hr-Element?

Inhaltsverzeichnis

Das HTML hr-Element (horizontal rule) erzeugt eine thematische Trennung zwischen Absätzen oder Abschnitten eines HTML-Dokuments. Es wird als leeres Element ohne Inhalt dargestellt und automatisch als horizontale Linie gerendert. Das hr-Element ist seit den frühen HTML-Versionen verfügbar und bleibt auch in HTML5 ein wichtiger Bestandteil für die Strukturierung von Webinhalten.

Grundlegende Syntax

<hr>

<!– In XHTML –>

<hr />

Das hr-Element ist ein sogenanntes „void element“ und benötigt keinen schließenden Tag. In XHTML wird es mit einem Schrägstrich am Ende geschrieben.

Semantische Bedeutung und Verwendungszwecke

Thematische Trennung

Das hr-Element kennzeichnet einen thematischen Wechsel im Inhalt, beispielsweise zwischen verschiedenen Kapiteln oder Themenbereichen eines Artikels.

Strukturelle Gliederung

Es hilft dabei, längere Texte visuell zu gliedern und dem Leser Orientierung zu bieten, ohne zusätzliche Überschriften verwenden zu müssen.

Barrierefreiheit

Screenreader erkennen hr-Elemente als strukturelle Trennungen und können Nutzern dabei helfen, durch den Inhalt zu navigieren.

Korrekte Verwendung

<article>
  <h2>Kapitel 1: Einführung</h2>
  <p>Hier steht der Inhalt des ersten Kapitels…</p>
  
  <hr>
  
  <h2>Kapitel 2: Grundlagen</h2>
  <p>Hier beginnt das zweite Kapitel…</p>
</article>
    

CSS-Styling für hr-Elemente

Moderne Webentwicklung erfordert ansprechende visuelle Gestaltung. Das hr-Element lässt sich mit CSS vielfältig gestalten und an das Design der Website anpassen.

Styling-Beispiele

Einfacher Farbverlauf

hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, #4CAF50, #45a049);
  margin: 20px 0;
}
        

Dicker Verlauf mit Rundung

hr {
  border: none;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #ee5a52, #ff6b6b);
  border-radius: 2px;
}
        

Weicher Übergang

hr {
  border: none;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
        

Gemusterter Stil

hr {
  border: none;
  height: 3px;
  background: #333;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,.1) 2px, rgba(255,255,255,.1) 4px);
}
        

Responsive Design Considerations

Bei der Gestaltung von hr-Elementen sollten Sie auch die Darstellung auf verschiedenen Bildschirmgrößen berücksichtigen:

hr {
  margin: 30px 0;
  height: 2px;
}

@media (max-width: 768px) {
  hr {
    margin: 20px 0;
    height: 1px;
  }
}
    

Barrierefreiheit und Accessibility

Wichtige Hinweise für Barrierefreiheit

Das hr-Element wird von Screenreadern als strukturelle Trennung erkannt. Für bessere Accessibility können Sie zusätzliche Attribute verwenden:

Das role="separator" Attribut macht die Funktion explizit, während aria-label eine beschreibende Bezeichnung für Screenreader-Nutzer bereitstellt.

Best Practices und Empfehlungen

Bewährte Praktiken für hr-Elemente

Semantisch korrekt verwenden: Nutzen Sie hr nur für thematische Trennungen, nicht für rein dekorative Zwecke
CSS statt HTML-Attribute: Vermeiden Sie veraltete Attribute wie „size“ oder „width“ und nutzen Sie stattdessen CSS
Konsistente Gestaltung: Halten Sie das Styling von hr-Elementen innerhalb Ihrer Website einheitlich
Responsive Design: Passen Sie die Darstellung an verschiedene Bildschirmgrößen an
Accessibility beachten: Fügen Sie bei Bedarf ARIA-Labels für bessere Barrierefreiheit hinzu
Performance optimieren: Nutzen Sie CSS-Transforms statt komplexer Grafiken für bessere Ladezeiten

Häufige Fehler vermeiden

Vermeiden Sie diese häufigen Fehler bei der Verwendung des hr-Elements:

Übernutzung

Verwenden Sie hr nicht exzessiv. Zu viele horizontale Linien können das Layout unruhig wirken lassen.

Rein dekorative Verwendung

Hr sollte semantische Bedeutung haben. Für reine Dekoration nutzen Sie CSS-Pseudo-Elemente oder div-Elemente.

Veraltete Attribute

Attribute wie „size“, „width“ oder „color“ sind in HTML5 deprecated. Nutzen Sie stattdessen CSS.

Browser-Kompatibilität und Unterstützung

Das hr-Element wird von allen modernen Browsern vollständig unterstützt. Die Standarddarstellung kann jedoch zwischen Browsern variieren, weshalb CSS-Normalisierung empfohlen wird:

hr {
  box-sizing: border-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1rem 0;
}
    

Progressive Enhancement

Für maximale Kompatibilität können Sie Progressive Enhancement einsetzen:

hr {
  border: 0;
  border-top: 1px solid #ccc; /* Fallback */
  background: linear-gradient(to right, #4CAF50, #45a049);
  height: 2px;
}

/* Für Browser ohne Gradient-Unterstützung */
hr {
  background: #4CAF50;
  background: linear-gradient(to right, #4CAF50, #45a049);
}
    

Fazit

Das HTML hr-Element ist ein mächtiges Werkzeug für die strukturelle und visuelle Gestaltung von Webinhalten. Bei korrekter Verwendung verbessert es sowohl die Benutzererfahrung als auch die Barrierefreiheit Ihrer Website. Durch modernes CSS-Styling lassen sich ansprechende und responsive Trennlinien erstellen, die perfekt in das Gesamtdesign integriert werden können.

Denken Sie daran, hr-Elemente semantisch korrekt zu verwenden und dabei stets die Prinzipien der Barrierefreiheit im Blick zu behalten. Mit den in diesem Artikel vorgestellten Techniken und Best Practices können Sie professionelle und zugängliche Webseiten erstellen, die auf allen Geräten optimal dargestellt werden.

Was ist der Unterschied zwischen hr und anderen Trennungselementen?

Das hr-Element hat eine semantische Bedeutung und kennzeichnet eine thematische Trennung im Inhalt. Im Gegensatz zu div-Elementen oder CSS-Pseudo-Elementen wird hr von Screenreadern als strukturelle Trennung erkannt und verbessert die Barrierefreiheit. Rein dekorative Linien sollten mit CSS erstellt werden.

Kann ich das hr-Element mit CSS beliebig gestalten?

Ja, das hr-Element lässt sich mit CSS vollständig anpassen. Sie können Farbe, Höhe, Breite, Hintergrundverläufe, Schatten und sogar Animationen hinzufügen. Vermeiden Sie jedoch veraltete HTML-Attribute wie ’size‘ oder ‚color‘ und nutzen Sie stattdessen moderne CSS-Eigenschaften.

Ist das hr-Element in HTML5 noch relevant?

Ja, das hr-Element ist auch in HTML5 weiterhin relevant und wird aktiv unterstützt. Es behält seine semantische Bedeutung als thematische Trennung und ist wichtig für die Strukturierung von Inhalten und Barrierefreiheit. Moderne Webentwicklung nutzt es in Kombination mit CSS-Styling.

Wie kann ich hr-Elemente barrierefrei gestalten?

Für bessere Barrierefreiheit können Sie das ‚role=“separator“‚ Attribut und ‚aria-label‘ verwenden, um Screenreadern zusätzliche Informationen zu geben. Achten Sie auch auf ausreichenden Kontrast bei der visuellen Gestaltung und testen Sie die Darstellung mit verschiedenen Hilfstechnologien.

Wann sollte ich hr verwenden und wann nicht?

Verwenden Sie hr für thematische Trennungen zwischen Inhaltsbereichen, wie zwischen Kapiteln oder verschiedenen Themenbereichen. Verwenden Sie es nicht für rein dekorative Zwecke, zur Layoutgestaltung oder als Ersatz für andere strukturelle Elemente wie Überschriften. Für dekorative Linien nutzen Sie CSS-Pseudo-Elemente.

Letzte Bearbeitung am Samstag, 25. Oktober 2025 – 8:38 Uhr von Alex, Webmaster für Google und Bing SEO.

Konnten wir deine Fragen zu hr HTML beantworten? Lass es uns gerne wissen, falls etwas nicht stimmen sollte. Feedback ist gerne gesehen, auch zum Thema hr HTML.