HTML <hr> Element
The HTML <hr> element represents a thematic break between paragraphs or sections of related content. Browsers commonly display it as a horizontal line, but its meaning is a change in topic, subject, or context rather than simply a decorative line.
Syntax
<p>The first topic is discussed here.</p>
<hr>
<p>A different but related topic begins here.</p>The <hr> element is a void element, so it does not have a closing tag and cannot contain content.
Attributes
The <hr> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses the <hr> element to indicate a change from one topic to another while keeping both topics within the same overall content.
Usage Notes
Use the <hr> element when the content changes to a different topic, scene, subject, or train of thought but remains part of the same overall section.
Although browsers usually display <hr> as a horizontal line, the element should not be used only to draw a decorative line. Use CSS borders or other CSS styling when a visual divider has no semantic meaning.
The appearance of an <hr> can be changed with CSS, including its width, border, spacing, and other visual properties, without changing the thematic meaning of the element.
Older HTML versions included presentational attributes such as align, color, noshade, size, and width for the <hr> element. These attributes are obsolete in modern HTML, and CSS should be used instead.
Accessibility
The <hr> element communicates a semantic separation between portions of content and may be announced as a separator by assistive technologies.
Use <hr> only when the separation has meaning in the content. If a line is purely decorative, create the visual effect with CSS so assistive technology is not given an unnecessary semantic separator.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <hr> Element .
Related Elements
<p> - Represents a paragraph of text and may appear before or after a thematic break.
<section> - Represents a thematic section of content, usually identified by a heading.
<br> - Creates a line break within text rather than representing a thematic change in content.