HTML <hr> Tag

Definition and Usage

<hr> Tags define thematic breaks in HTML pages (such as, changes in topics).

<hr> Elements are usually displayed as horizontal lines, used to separate content on HTML pages or define changes in content.

See also:

HTML DOM Reference Manual:HR Object

Instance

Example 1

Using <hr> Tags to define changes in the content:

<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup language for creating web pages. HTML describes the structure of web pages, which are made up of a series of elements...</p>
<hr>
<p>CSS is a language for describing the way HTML elements are displayed on a screen, paper, or other media...</p>
<hr>
<p>JavaScript is the programming language for HTML and the web. JavaScript can change HTML content and attribute values...</p>

Try It Yourself

Example 2

Alignment <hr> Element (using CSS):

<hr style="width:50%;text-align:left;margin-left:0">

Try It Yourself

Example 3

Without shadow: <hr> (Using CSS):

<hr style="height:2px;border-width:0;color:gray;background-color:gray">

Try It Yourself

Example 4

Set <hr> Element Height (using CSS):

<hr style="height:30px">

Try It Yourself

Example 5

Set <hr> Element Width (using CSS):

<hr style="width:50%">

Try It Yourself

Global Attributes

<hr> The tag also supports Global Attributes in HTML.

Event Attributes

<hr> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <hr> Element:

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support