HTML - <hr> Tag


Introduction to <hr> Tag

The HTML <hr> tag is used to create a horizontal line on a web page. This <hr> element signifies a thematic break between paragraph-level elements, such as a change of scene in a story or a shift of topic within a section.

The <hr> element accepts a color attribute, which is used to color the horizontal line. Additionally, this tag supports both global attributes and event attributes in HTML.

Syntax

Following is the syntax of <hr> tag −

<hr>

Attributes

The HTML <hr> tag supports both Global and Event attributes of HTML. Additionally, it accepts some specific attribute, which are listed bellow.

Attribute Values Description
align left
center
right
This attribute is used to align the <hr> element.
size Numeric Value This attribute is used to set the height of <hr> element.
width Numeric Value This attribute is used to set the width of the <hr> element.
color color code or name This attribute is used to set the color of the <hr> element.
noshade No Value This attribute is used to specify a solid horizontal line instead of shaded lines.

Example: Defining an <hr> Element

Let's consider the following example, where we create an HTML document to demonstrate the behavior of the <hr> tag. In the examples below, we will use all the additional attributes on the HTML <hr> element to understand the effect of each attribute. We will also use CSS to style our <hr>

<!DOCTYPE html>
<html>
<body>
   <h2> 
      Tutorialspoint 
   </h2>
   <hr />
   <p> 
      Simply Easy Learning with Tutorialspoint
   </p>
</body>
</html>

Example: <hr> with Attributes

Let's Consider the following example, where we create an HTML document to demonstrate by using the <hr> tag. This HTML code generates a web page with a heading "Tutorialspoint", a horizontal line, and a paragraph states "Simply Easy Learning with Tutorialspoint".

<!DOCTYPE html>
<html>
<body>
   <p>
      This is a normal hr Element
   </p>
   <hr>
   <p>
      This is a noshade hr Element
   </p>
   <hr noshade>
   <p>
      This is size set to 10 & green hr Element
   </p>
   <hr size="10" color="green">
   <p>
      This is width set to 100 & right aligned hr Element
   </p>
   <hr width="100" align="right">
</body>

Example: <hr> tag with Styles

In the following example, we create an HTML document and modify the <hr> tag using the following CSS properties −

<!DOCTYPE html>
<html>

<head>
    <style>
        hr {
            border: none;
            border-top: 3px solid #333;
            overflow: visible;
            text-align: center;
            height: 5px;
        }

        hr:after {
            background: #fff;
            content: 'HTML';
            padding: 4px;
            position: relative;
            top: -13px;
        }
    </style>
</head>

<body>
    <h2>TutorialsPoint</h2>
    <p>Simply Easy Learning </p>
    <hr>
    <h3>HTML hr Tag</h3>
    <p>It's creates a horizontal line.</p>
</body>

</html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
hr Yes Yes Yes Yes Yes
html_tags_reference.htm