totn HTML

HTML: <hr> tag

This HTML tutorial explains how to use the HTML element called the <hr> tag with syntax and examples.

Description

The HTML <hr> tag defines a thematic break between paragraphs in HTML5, and a horizontal rule in HTML 4.01. This tag is also commonly referred to as the <hr> element.

Syntax

In HTML, the syntax for the <hr> tag is:

<body>
<p>This is the first paragraph.</p>
<hr>
<p>This is the second paragraph.</p>
</body>

or in XHTML, the syntax for the <hr> tag is:

<head>
<p>This is the first paragraph.</p>
<hr />
<p>This is the second paragraph.</p>
</head>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <hr> tag:

Attribute Description HTML Compatibility
align Alignment of the rule. If this attribute is omitted, the default is left Deprecated in HTML 4.01, Obsolete in HTML5
color Color of the rule in either hexadecimal (ie: #RRGGBB format) or named color (ie: black, red, white) Non-standard
noshade No shading on the rule Deprecated in HTML 4.01, Obsolete in HTML5
size Height of the rule in pixels Deprecated in HTML 4.01, Obsolete in HTML5
width Width of the rule expressed in pixels or as a percentage Deprecated in HTML 4.01, Obsolete in HTML5

Note

  • The HTML <hr> element is found within the <body> tag.
  • The <hr> tag is a thematic break between paragraphs in HTML5.
  • The <hr> tag is a horizontal rule in HTML 4.01 (and previous versions of HTML).

Browser Compatibility

The <hr> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <hr> tag below, exploring examples of how to use the <hr> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <hr> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the first paragraph.</p>
<hr>
<p>This is the second paragraph.</p>
</body>

</html>

In this HTML5 Document example, we have created two <p> tags that are separated by the <hr> tag.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <hr> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the first paragraph.</p>
<hr>
<p>This is the second paragraph.</p>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created two <p> tags that are separated by the <hr> tag.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <hr> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the first paragraph.</p>
<hr />
<p>This is the second paragraph.</p>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created two <p> tags that are separated by the <hr> tag.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <hr> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the first paragraph.</p>
<hr />
<p>This is the second paragraph.</p>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created two <p> tags that are separated by the <hr> tag.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <hr> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>This is the first paragraph.</p>
<hr />
<p>This is the second paragraph.</p>
</body>

</html>

In this XHTML 1.1 Document example, we have created two <p> tags that are separated by the <hr> tag.

Share on: