It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

HTML Horizontal Line

Reading time 2 min
Published Jun 29, 2017
Updated Oct 2, 2019

HTML Horizontal Line: Main Tips

  • The HTML <hr> adds a thematic division between paragraph-level elements.
  • This element creates a horizontal line, making a division within content.
  • The HTML <hr> tag has no closing tag since it does not contain any content.

Purpose of hr

The HTML <hr> element defines a thematic division between content by drawing an HTML horizontal line.

Example
<h1>Operating System</h1>
<h2>Mac OS</h2>
<p>A personal computer operating system developed and marketed by Apple Inc.</p>
<hr>
<h2>Windows</h2>
<p>A personal computer operating system developed, marketed, and sold by Microsoft Corporation.</p>

Note: the <hr> tag defines a horizontal rule in earlier versions of HTML. In HTML5, it is added to semantic elements to represent a thematic break.

Deprecated Attributes for hr

align

It sets the horizontal alignment of the element. Not supported in HTML5. Use CSS text-align property as an alternative.

Example
<h1>Operating System</h1>
<h2>Mac OS</h2>
<p>A personal computer operating system developed and marketed by Apple Inc.</p>
<hr align="left" width="50%">
<h2>Windows</h2>
<p>A personal computer operating system developed, marketed, and sold by Microsoft Corporation.</p>

noshade

It sets the horizontal line in HTML to a solid color, instead of shadow effect. Not supported in HTML5.

Example
<h1>Operating System</h1>
<h2>Mac OS</h2>
<p>A personal computer operating system developed and marketed by Apple Inc.</p>
<hr noshade>
<h2>Windows</h2>
<p>A personal computer operating system developed, marketed, and sold by Microsoft Corporation.</p>

size

It sets the height of the element. Not supported in HTML5. Apply CSS height property instead.

Example
<h1>Operating System</h1>
<h2>Mac OS</h2>
<p>A personal computer operating system developed and marketed by Apple Inc.</p>
<hr noshade size="20">
<h2>Windows</h2>
<p>A personal computer operating system developed, marketed, and sold by Microsoft Corporation.</p>

width

It sets the width of the horizontal line in HTML. Not supported in HTML5. Use CSS width property instead.

Example
<h1>Operating System</h1>
<h2>Mac OS</h2>
<p>A personal computer operating system developed and marketed by Apple Inc.</p>
<hr width="250">
<h2>Windows</h2>
<p>A personal computer operating system developed, marketed, and sold by Microsoft Corporation.</p>

Browser support

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All