How to Insert Lines in HTML With the HR Tag

The HR tag is used in web documents to display a horizontal line across the page, sometimes called a horizontal rule. Unlike some tags, this one doesn't need a closing tag. Type <hr> to insert the line.

Is the HR Tag Semantic?

In HTML4, the HR tag was not semantic. Semantic elements describe their meaning in terms of 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's 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

The line stretches the full width of the page. Some default attributes describe the thickness, location, and color of the line, but you can change those settings if you wish.

In HTML4, you can assign the HR tag simple attributes, including align, width, and noshade. The alignment can be set to left, center, right, or justify. The width adjusts the horizontal line's width from the default 100 percent that extends the line across the page. The noshade attribute renders a solid color line instead of a shaded color.

These attributes are obsolete in HTML5. You should instead use CSS to style your HR tags in HTML5 documents.

This is an HTML5 example of stylizing the horizontal line to be 10 pixels high using inline CSS (styles inserted directly into the document along with HTML):

Another way to stylize horizontal lines in HTML5 is to use a separate CSS file, and link to it from the HTML document. In the CSS file, you'd write the styling like this:

hr {
height:10px
}

The same effect in HTML4 requires you to add an attribute to the HTML content. Here's how to change the size of the horizontal line with the size attribute:

There's a lot more freedom in styling horizontal lines in CSS versus HTML.

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.