How to Insert Lines in HTML With the HR Tag

Man in glasses on phone using laptop computer

 jovan_epn / Getty Images 

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

The line stretches across the full width of the page and carries with it some default attributes to describe the thickness, location, and color of the line, but you can change those settings if you wish.

You can edit the characteristics of the horizontal line in an HTML5 document by editing the page's CSS. HTML4 horizontal lines were changed on the HTML side of the document.

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'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

In HTML4, the HR tag can be assigned simple attributes including align, width, and noshade. The alignment can be set to left, center, right or justify. The width adjusts the width of the horizontal line 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):

Screenshot showing how to stylize the HR tag in HTML using inline CSS
Using Inline CSS to Stylize HR. Jennifer Kyrnin
<hr style="height:10px">

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:

Screenshot showing how to use external CSS to stylize the HR tag in HTML
Using External CSS to Stylize HR. Jennifer Kyrnin
hr {

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:

Screenshot of the size attribute for the HR tag in HTML
Stylizing the HR Tag in HTML4. Jennifer Kyrnin
<hr size="10">

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. 

Was this page helpful?