HTML - <hr> Tag

HTML <hr> tag is used to create a horizontal line on the webpage. This hr element represents a thematic break between paragraph-level elements, for example, a change of scene in a story or a shift of topic within a section.

The <hr> element takes an attribute color that is used for coloring the horizontal line. And this tag supports both global attributes and event attributes in HTML.

Syntax

<hr>

Attribute

HTML hr tag supports Global and Event attributes of HTML. Some specific attribute accepted as well 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 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 the solid horizontal line instead of shaded lines.

Examples of HTML hr Tag

In the below examples we will use all the additional attribute on html hr element. We will know effect of each attrubtes on hr element. And we will use CSS to style our hr element.

Defining an hr Element

Let's consider the following example, where we are creating an HTML document that shows the behavior of the <hr> tag.

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

Applying attributes on hr Element

Considering the following example, we are creating an HTML document and using the <hr> tag and its attributes.

<!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>

Applying Styles on hr Elements

In the following example, we are creating an HTML document and modifying the <hr> tag using the CSS properties as follows −

<!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
hr	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm