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:

<hr>

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.

FAQ:

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.