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

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: ss-1-2

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%" />

ss-2-2

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: ss-3-3

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: ss-4-3

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: ss-5-4

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.