In this section, we will see what HTML <hr> element is and how to use it.
Horizontal Line in HTML: Horizontal Rules in HTML
HTML <hr> element stands for horizontal and is used to create a break between the content of a webpage.
For example, we might have two paragraphs in a document and want to separate them in a way that audience can realize they are two separate content. This is where we can use <hr> element.
You should know that browsers render <hr> element as a horizontal line. The size of this line is equal to the width of the window in which the current document is loaded in.
HTML <hr> Tag Syntax:
HTML <hr> Tag Values
HTML <hr> element is a single element, and that means there’s not a body for it to set a value in.
Example: line separator in HTML
See the Pen line separator in HTML by Omid Dehghan (@odehghan) on CodePen.
Horizontal Line in CSS
Just like other HTML elements, we can use CSS to style <hr> element as well.
This is mainly done via the CSS border property.
Example: CSS for horizontal line
See the Pen CSS for horizontal line by Omid Dehghan (@odehghan) on CodePen.
What does hr stand for?
HTML <hr> element stands for Horizontal and, when used in a document, browsers typically create a horizontal line for that <hr> element.