HTML Horizontal Line – HR Tag Example - FreeCodeCamp

You can use the HTML <hr> tag to separate out different topics on a page.

We often use this tag when we want to create a thematic break or separate items on an HTML page.

In this article, you'll learn how to use this tag in your HTML code.

Table of Contents

• Basic Syntax
• Attributes of <hr /> Tag
• The Width Attribute
• The Color Attribute
• The Size Attribute
• The Align Attribute
• Conclusion

Basic Syntax

The <hr> tag is an empty element. This means that it only has an opening tag, <hr>.

Starting in HTML5, we now need to attach a slash to the tag of an empty element. So, instead of having just <hr>, you should make it <hr />.

In browsers, the <hr /> tag is displayed as a horizontal rule or line, like this:

Attributes of <hr /> Tag

The <hr /> tag accepts attributes such as width, color, size, and align.

Before showing you how the individual attributes look and work, I will be setting everything in the body to center with this CSS code:

body { display: flex; align-items: center; justify-content: center; height: 100vh; }

The Width Attribute

The width attribute is used for specifying a width for the <hr /> tag. It takes pixels or percentage as a value.

<hr width="50%" />

The Color Attribute

The color attribute is used to specify a color for the <hr /> tag.

<hr width="50%" color="green" />

Here is how it would look if we set a green color for the <hr /> tag:

The Size Attribute

You can define a height for the <hr /> tag with the size attribute. The value must be set in pixels.

<hr width="50%" color="green" size="50px" />

A height of 50px looks like the screenshot below:

The Align Attribute

The align attribute is used to set an alignment for the <hr /> tag. It takes left, center and right values.

The default is left – meaning if an alignment is not set, the <hr /> tag automatically aligns to the left.

<hr width="50%" color="green" size="50px" align="right" />

Setting an alignment of right for the <hr /> tag looks like this:

Conclusion

This article shows you what the <hr /> tag looks like, what it is used for, and the attributes it accepts.

Since the <hr /> tag appears as a horizontal rule in browsers, you might be thinking of using it to draw a line.

But you shouldn’t do this because the horizontal rule appears as is only presentationally, not semantically. Instead, you should draw a line with a div or span as the case may be.

If you find this article helpful, share it with your friends and family.