HTML - <hr> Tag

Quiz

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

html_tags_reference.htm

Print Page