<hr> Tag in HTML

Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

The <hr> tag in HTML is used to give a thematic break between paragraphs. We use the hr tag to break the flow of content by drawing a horizontal line between paragraphs. For example, we can use the <hr> tag for a scene change while writing a play or story.

What is <hr> Tag in HTML?

The <hr> tag in HTML is used to give a thematic break between paragraphs on a webpage. The <hr> tag is used when we want to change the topic or break the flow of the content.

As shown in the image below, using <hr> tag we can separate content on a webpage. It draws a horizontal line between paragraphs. It is also called a horizontal rule in HTML.

What is hr Tag in HTML

The <hr> tag in HTML is a block element which means it starts a new line and uses the full width of the page.

Block elements have line breaks before and after the element. The <hr> tag in HTML does not need a closing tag.

Syntax:

Example:

Output:

Output of hr Tag in HTML

HTML <hr> Tag Attributes

The <hr> tag in HTML supports all the global and event attributes in HTML.

There are a few additional attributes which <hr> tag supports:

AttributeValueDescription
alignleft, right, centerIt is used to specify the alignment of the horizontal rule.
noshadenoshadeIt removes the default shading effect
SizepixelsIt is used to specify the height of the horizontal rule.
widthpixelsIt specifies the width of the horizontal rule.

Examples

Using the align attribute we can align the horizontal line at the left, center, or right of the screen.

Example:

Output:

hr Tag in HTML Attributes

We can define a horizontal line without any shade using noshade attribute.

It is demonstrated in the example below.

Example:

Output:

hr Tag in HTML Attributes

As shown in the example below, we can change the dimensions of the horizontal line using width and size attributes.

Example:

Output:

Change Dimensions for hr Tag

Supporting Browsers

Below is the list of supported browsers for the HTML <hr> tag -

  • Chrome
  • IE
  • Opera
  • Safari
  • Firefox

Conclusion

  • The <hr> tag in HTML is used to give a thematic break between paragraphs on a webpage.
  • It is used to define a horizontal line on a webpage.
  • The <hr> tag is a block element.
  • The <hr> tag in HTML does not need a closing tag.
  • The <hr> tag in HTML supports all the global and event attributes in HTML and it supports additional attributes like align, noshade, size, and width.