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.
In summary, the <hr> element is used to insert a horizontal line or divider within the content of a web page. It visually separates sections or elements and provides a visual break. It can be customized using CSS to change its appearance, but its usage should be appropriate and in line with the overall design and content structure of the webpage.