Open In App

HTML <hr> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

HTML <hr> tag is a simple yet essential element used to insert a horizontal rule or a thematic break in an HTML page. It serves to divide or separate different sections of a document. <hr> tag in HTML stands for horizontal rule. The <hr> tag is an empty tag, and it does not require an end tag. The primary purpose of the <hr> tag is to create a visual separation between content sections within an HTML page.

Attributes

While the <hr> tag itself doesn’t have much complexity, it supports a few attributes that allow customization:

Attribute Values Value Description
align left centre right Used to specify the alignment of the horizontal rule.
noshade noshade Used to specify the bar without shading effect.
size pixels Used to specify the height of the horizontal rule.
width pixels Used to specify the width of the horizontal rule.

Example 1: Basic Usage

In this example we will see the implementation of the <hr> tag in HTML:

HTML




<!DOCTYPE html>
  
<html>
  
<body>
    <p>
        There is a horizontal rule below this paragraph.
    </p>
    <!--HTML hr tag is used here-->
    <hr>
    <p>
        This is a horizontal rule above this paragraph.
    </p>
</body>
  
</html>


Output: 

Example 2: Customization

In this example we will see the implementation of the <hr> tag with some attribute in HTML 

HTML




<!DOCTYPE html>
  
<html>
  
<body>
  
  <p>
    Normal horizontal line.
  </p>
  <!--HTML hr tag is used here-->
  
  <hr>
  <p>
    Horizontal line with height of 30 pixels
  </p>
  <hr size="30">
  
  <p>
    Horizontal line with height of 30 pixels
    and noshade.
  </p>
  
  <hr size="30" noshade>
  
</body>
  
</html>


Output: 

Screenshot-2023-12-28-231559

Note: The <hr> tag also supports the Global Attributes and Event Attributes in HTML

By strategically using the <hr> tag, you can enhance the readability and organization of your web content. Remember to consider the context and aesthetics of your page when incorporating horizontal rules.

Supported Browsers: 



Last Updated : 01 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads