Definition
The <hr> HTML element, short for “horizontal rule”, is a self-closing element used to insert a horizontal line or divider within the content of a web page. It visually separates different sections or elements, providing a clear visual break.
Here’s an example of how to use the <hr> element:
<section>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<hr />
<h2>Section 2</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</section>
In this example, the <hr> element is used to create a horizontal line that visually separates the content sections labeled “Section 1” and “Section 2”. The <hr> element is a self-closing element, meaning it doesn’t require a closing tag.
The appearance of the <hr> element can be customized using CSS to change its color, thickness, or style, such as dashed or dotted lines. You can apply styles to the <hr> element using its class or ID, or by targeting it directly with CSS selectors.
It’s important to note that the <hr> element should be used judiciously and only when it serves a clear purpose in visually separating content. It is primarily used for stylistic or visual purposes rather than for structural or semantic meaning.