HTML HR –Horizontal Rule

Horizontal rule created with HR Tag is used to insert a horizontal line or rule in  web page. The most common use of HR is to define separation of web page content. This is a singular tag that inserts a blank space before and after the line thus rendered.

Features of HR Tag

  • HR Tag is not a paired tag and it does not allow any content.
  • This Tag creates an end to end horizontal line.
  • You can create any number of horizontal lines in a web page .
  • Horizontal Rule can be rendered with style and color.

Attributes of HR Tag


This attribute is used to give identification to a horizontal line created with HR Tag. The ID must be an alphanumeric string. The ID value for each element of web page must be unique. This ID is used in a script to manipulate it on the basis of interaction of the user.


Align attributes is used to align the horizontal line. It can be aligned to left, center or right. The values allowed for the ALIGN attribute are LEFT, RIGHT and CENTER. The rule will appear LEFT aligned by default.


This attribute is set with a color value to create a colored horizontal line in a web page. The default color for a line is gray.


This attribute inhibits the surrounding shadow around the horizontal line in a web page. By default the line is drawn with a shadow.


By default the horizontal line is drawn as 100% of the page width. The width attribute can be set to numeric value up to 100. It can also be set to some percentage of page width.


By default the horizontal line is drawn with 2px height or size. This attribute can be set to numeric value in pixels or percentage of page height.


This attribute is used to associate a horizontal line with a class that specifies the consistent style for multiple elements in a web page.


Style attribute is used to add additional styling to a line. You can set styles in a string form with CSS element and value pairs separated by semicolons.


Title attribute is used to set tooltip text for a HR tag. When the user rests the mouse cursor on the horizontal line, a value assigned to TITLE attribute appears in a small outlined box.

Example of HR Tag

<TITLE> Welcome to </TITLE>
<HR color="green" >
<HR width="50%" >
<HR SIZE="10px" color="Yellow" >
<HR TITLE="myline" STYLE="border:dotted; color:red;" >
HR Tag Example