FactorPad
Faster Learning Tutorials

HTML hr tag

The horizontal rule tag creates what is called a "thematic break" between paragraphs or sections on a web page.
  1. About - Understand the purpose of the hr tag.
  2. Syntax - Describe how it is used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review common hr code examples.
by Paul Alan Davis, September 5, 2018
Updated: December 20, 2018
The hr tag doesn't have a closing tag, so it is smart to learn the XML version here, as you will see below.

Outline Back Next

~/ home  / tech  / html5  / reference  / html hr tag


HTML hr tag

Beginner

The <hr /> tag's primary purpose is to add a horizontal break between paragraphs. This break commonly takes shape as a horizontal line.

Specifications for line thickness, color and pattern are set in CSS.

HTML Tags Reference

1. About the HTML hr tag

The <hr /> tag only occurs in the <body>, so the visible section of the document.

From there it is normally inserted into larger blocks or sections of the document, like within <div> elements.

Depending on context, this element is designed to offer a "thematic break" between ideas or thoughts in the written text. This often occurs between <p> paragraph elements.

As a block-level element, it takes up the whole horizontal space of the surrounding container or parent element. So HTML code that comes after the <hr /> element will start on a new line.

So the <hr /> tag is more about document structure than it is about text.

2. Syntax for the HTML hr tag

The <hr /> element requires only one tag. There are only a handful of other single-tag elements in HTML5, like <meta />, <br /> and <img />. Some refer to these as "empty tags".

Unlike most other tags, the <hr /> tag has no attributes in HTML5. Of course global attributes apply, as they do with all elements.

HTML vs. XML

Technically under HTML5, the tag can be input simply as <hr>, but since it is so similar to the XML and XHTML-conforming standard of <hr />, I recommend learning the longer form here, especially as you progress towards learning the more advanced markup language XML, the eXtensible Markup Language.

The importance of XML has grown over recent years with the popularity of automated forms of web publishing like blogs and social feeds that connect to databases.

Sample HTML input
<body> <p> In versions prior to HTML5, the horizontal rule was just that, a line. As such, each line was treated and styled differently, right in the tag itself with attributes. </p> <hr /> <p> Now, with HTML5, the attributes are gone and the hr tag is described in terms of semantics. It is placed where there is a "thematic break" between paragraphs. Does this qualify? I'm not sure, but I put one here anyway. </p> </body>

HTML code input above will appear as shown below.

Sample HTML output

In versions prior to HTML5, the horizontal rule was just that, a line. As such, each line was treated and styled differently, right in the tag itself with attributes.


Now, with HTML5, the attributes are gone and the hr tag is described in terms of semantics. It is placed where there is a "thematic break" between paragraphs. Does this qualify? I'm not sure, but I put one here anyway.

3. Settings for the HTML hr tag

As with all tags, Global Attributes can always be set.

Attributes and values for the hr tag

As mentioned, the <hr /> element doesn't have any of its own attributes, or they would be detailed here.

Default behaviors

Each user-agent (browser) has its own stylesheet per se. This dictates how that browser styles each element by default. The Chrome browser styles the <hr /> element using the following specifications.

hr { display: block; unicode-bidi: isolate; margin-block-start: 0.5em; margin-block-end: 0.5em; margin-inline-start: auto; margin-inline-end: auto; overflow: hidden; border-style: inset; border-width: 1px; }

By default the line is often colored gray, is inset and has about a half a character html margin above and below the line.

4. Examples of the HTML hr tag

Example 1 - Create a break for an address

The following HTML code will create a "thematic break" and horizontal line with default CSS styling between three paragraphs.

<html> <head></head> <body> <p> Paragraph 1 text finishes and the author wants to insert a visual "thematic break". </p> <hr /> <p> Paragraph 2 ends and the designer would like a horizontal line between it and the next paragraph. </p> <hr /> <p> Paragraph 3 finishes here. </p> </body> </html>

Learning takes practice. Type these lines into a text file, save it with an .html extension and open it in a browser.

After that, start taking notes and writing in HTML to gain experience.


Other Related HTML Content

The <hr /> tag sits between paragraph elements, and that sits in the body element. It is similar in structure to a line break.


What's Next?

See what else you can learn for free at our YouTube Channel. Subscribe here.

  • For the complete HTML tag list, click Outline.
  • To learn about the <head> tag, click Back.
  • To see how attributes can be applied to a document with the <html> tag, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / html hr tag



 
 
Keywords:
html hr tag
hr html
horizontal rule html
horizontal line in html
html line break
html line color
thematic break html
html margin
html horizontal line
html separator
hr css
horizontal rule css
html hr tag defaults