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

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

Mobile browser support

Chrome
All
Firefox
4+
Opera
All
Safari
All
Basics
Introduction
Syntax
Editors
Basic Examples
Head Section
<!DOCTYPE>
Tags and Elements
Semantic Elements
Tags Reference
Attributes
Comments
Block and Inline Elements
Forms
Form Elements
Input
Responsive Web Design
Inline Scripts
Uniform Resource Locator
Redirect
XHTML
Geolocation
Drag and Drop
Local Storage
Web Workers
Server-Sent Events
Character Encoding
Text Formatting
Quotation and Citation Elements
Headings
Paragraphs
Links
Tables
Lists
Symbols
Space
Tab
Styles
Computer Code
Layout
Classes
Colors
Images
iframes
Audio Player
Video Player
YouTube Videos
Multimedia
Canvas
SVG
<!-- -->
<a>
<abbr>
<acronym> DEPRECATED
<address>
<applet> DEPRECATED
<article>
<aside>
<audio>
<b>
<base>
<basefont> DEPRECATED
<bdi>
<bdo>
<big> DEPRECATED
<blink> DEPRECATED
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center> DEPRECATED
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir> DEPRECATED
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font> DEPRECATED
<footer>
<form>
<frame> DEPRECATED
<frameset> DEPRECATED
<h1> – <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen> DEPRECATED
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem> DEPRECATED
<meta>
<meter>
<nav>
<noframes> DEPRECATED
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike> DEPRECATED
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt> DEPRECATED
<u>
<ul>
<var>
<video>
<wbr>