❮ Previous Next ❯

HTML <hr> tag

The <hr> tag defines a thematic break in an HTML page. It is used to change the topic or to change the content of a section in an HTM page by drawing a horizontal line.

Type: Block Element

Syntax of <hr> tag

-- topic --
 <hr>
 -- another topic --
<hr> tag is a null or void tag since it has no end tag like </hr> .

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<hr> Yes Yes Yes Yes Yes

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3> HTML </h3>
<p>It is used for making webpages.</p>

<hr>

<h3> CSS </h3>
<p>It is used to style the HTML elements.</p>

</body>
</html>
Run The code »

HTML

It is used for making webpages.

CSS

It is used to style the HTML elements.

<hr> tag has semantic meaning so it is not used for decoration.

Attributes of <hr> tag

Attribute Value Note
align left
right
center		 It defines the alignment (horizontal) of the horizontal line.
color colorname
rgb(value,value,value)
#xxxxxx		 It defines the color of the rendered horizontal line.
noshade noshade It defines that the rendered line should be in one solid color instead of a shaded color.
size pixels It defines the height of the horizontal line.
width pixels
%		 It defines the width of the horizontal line.
All these attrbutes are out-dated in HTML5 and are replaced by CSS completely.
  1. Using of align attribute

    Obsolete form

    <hr align="center">

    Correct form using CSS

    <hr style="width:50%; margin:0 auto;">
  2. Using of color attribute

    Obsolete form

    <hr color="red" >

    Correct form using CSS

    <hr style="border-color:red;" >
  3. Using of noshade attribute

    Obsolete form

    <hr noshade >

    Correct form using CSS

    <hr style="border-style:solid;" >
  4. Using of size attribute

    Obsolete form

    <hr size="5" >

    Correct form using CSS

    <hr style="height:5px;" >
  5. Using of width attribute

    Obsolete form

    <hr width="50%" >

    Correct form using CSS

    <hr style="width:50%;" >

More reference

<header>In HTML 4.01, the <hr> tag defines a horizontal break but it is rather to define in the semantic term instead of using in visual term. All the attributes are removed with the coming of HTML5. You can make better rich effect using CSS. In XHTML, the <hr> tag has close tag like <hr />.

Default CSS properties of <hr> tag

hr {
  display:block;
  margin:0.5em auto;;
  border-style:inset;
  border:1px;
}
❮ Previous Next ❯