Adding Horizontal Lines to Break Up Content on the Page

Using the HR Tag to Add Horizontal Lines

Using the HR Tag to Add a Horizontal Line to a Web Page

The HR tag has traditionally been used to add a horizontal line (sometimes called horizontal rule) to a web document. To add a line, you type: ​<hr> to instruct the browser to draw a line across the full width of the page or parent element using default settings. This default line is simple and often serves its purpose, but attributes can be assigned to change the line's size, color and position among other characteristics.

The method to modify a horizontal line's appearance changed between HTML4 and HTML5.

Is the HR Tag Semantic?

In HTML4, the HR tag was not semantic. Semantic elements describe their meaning in terms the browser and the developer can easily understand. The HR tag was just a way to add a simple line to a document wherever you wanted it. Styling only the top or bottom border of the element where you wanted the line to appear placed a horizontal line at the top or bottom of the element, but in general, the HR tag was easier to use for this purpose.

Beginning with HTML5, the HR tag became semantic, and it now defines a paragraph-level thematic break, which is a break in the flow of the content that doesn't warrant a new page or other stronger delimiter—it is a change of topic. For example, you might find an HR tag after a scene change in a story, or it can indicate a change of topic in a reference document.

HR Attributes in HTML4 and HTML5

In HTML4, the HR tag could be assigned simple attributes including "align," "width" and "noshade." The alignment could be set to left, center, right or justify. The width adjusted the width of the horizontal line from the default 100 percent that extended the line across the page.

The noshade attribute rendered a solid color line instead of a shaded color. These attributes are obsolete in HTML5, and you should use CSS to style your HR tags in HTML5. For example, in HTML 4:

<hr size = "10">

generates a horizontal line with a height of 10 pixels. 

Using CSS with HTML5, a horizontal line that is 10 pixels high is styled:

<hr style="height:10px">

Using CSS to style your horizontal line gives you a lot of freedom in designing your web page. You can see many examples of styles for HR tags in this Style the HR Tag article. Only the width and height styles are consistent across all browsers, so some trial and error may be needed when using other styles. The default width is always 100 percent of the width of the web page or parent element. The default height of the rule is two pixels.