HTML <hr> Tag

The <hr> tag in HTML is used to create a thematic break in a webpage. It represents a horizontal rule and is often used to separate content. It is a self-closing tag, meaning it does not have a closing tag. The <hr> tag is a block-level element.

Usage of <hr> tag

The <hr> tag is commonly used to divide different sections of a webpage, create a visual distinction between content, or mark the beginning and end of a story, article, or blog post.

Main attributes of <hr> tag

Attribute	Description
align	Specifies the alignment of the <hr> element. It can have values like "left", "right", or "center".
color	Specifies the color of the rule. It can be a color name, a hexadecimal color code, or an RGB value.
size	Specifies the height of the rule. It can be a pixel value or a percentage of the viewport height.
width	Specifies the width of the rule. It can be a pixel value or a percentage of the viewport width.

Examples

Example 1: Creating a simple horizontal rule with default settings

<hr>

Example 2: Aligning the horizontal rule to the right

<hr align="right">

Example 3: Changing the color and size of the horizontal rule

<hr color="#FF0000" size="5px">

Example 4: Setting the width of the horizontal rule to 50%

<hr width="50%">

These are just a few examples of how you can customize the <hr> tag to suit your design needs.