1. Technology

Adding Horizontal Lines to Break Up Content on the Page

Using the HR Tag

By

What is the HR Tag?

The HR tag has traditionally been a way to add a horizontal line (sometimes called “horizontal rule”) into a web document. To add a line, you simply write:

<hr>

And the browswer will draw a line across the full width of the page (or parent element). An unstyled HR tag looks like this.

Is the HR Tag Semantic HTML?

In HTML4 the HR tag was not semantic. It was just a way to add a line into a document. Of course, if all you need is a presentational line, it is possible to style the bottom or top border of the element where you want the line to appear.

This changed in HTML5. In HTML5 the HR tag became semantic because it now defines a “thematic break.” This is a break in the flow of the content that doesn't warrant a new page or other stronger delimiter, but is a change of topic. For example, you might find an HR tag after a scene change in a story or indicating a change of topic in a reference document.

HR Attributes

In HTML4 the HR tag had a lot of attributes. Things like align, width, and noshade. All of these attributes are now obsolete in HTML5, and you should use CSS to style your HR tags.

©2014 About.com. All rights reserved.