The HTML and CSS Blog:

What You Learn in This HTML Lesson

You will learn how to create simple horizontal lines to separate sections of your content. When you learn to use the HTML tag for horizontal rules you’ll also come to understand empty tags (in contrast to container tags).

hr HTML tag


HTML Code for a Horizontal Line

<hr>      HTML<hr />    XHTML (self-closed) Horizontal Rule: creates a horizontal line
Add attributes to the <hr> tag to change the horizontal line’s alignment or width:<hr align=”right” width=”45%”> Attributes: align=”center” (left, right, center, justify)width=”50%” (scalable size in percentage)width=”500″ (fixed size in pixels)

The Rules of Horizontal Rules

growing horizontal line

Horizontal lines are called “horizontal rules” in HTML

This week we have an easy lesson for you, and it introduces a new concept as well.

Sometimes, you just want a nice, simple line to break things up visually. Like so:

Horizontal lines, called rules, make it easier to see which things go together.

Create horizontal rules with the hr tag

Create horizontal rules with the hr tag

The  <hr>  HTML tag can be used to create a horizontal rule (a line).

Tiger stripes

Lines, lines, everywhere the lines, blocking up the scenery…so your sections look fine.

This tag differs from all the other tags we’ve taught you so far. It does not have a closing tag. It does not need to contain anything, so we don’t need a closing tag to announce where it ends. The horizontal line ends as swiftly as it begins so why waste coding time and page loading time to add a closing tag? The horizontal rule tag simply creates a line wherever you place the <hr> tag. Place the tag, and you’re done.

If you are following the stricter XHTML standards, then you will self-close the  <hr>  tag by adding a space and a slash at the end of it: <hr /> .

Note that even though the tag closes, it does so within the opening tag. There is still no separate, closing tag.

In either case, this kind of tag is known as an “empty tag”. Tags that have an open and closing tag are called “container tags”.

Width and Alignment Attributes for Horizontal Lines

red horizontal lines animated gif

Don’t get too excited, horizontal rule can’t do this yet.

The  <hr>  tag can use several attributes to control its size and alignment. Don’t forget the basic syntax of HTML. When adding attributes, add one space to the open tag, and then add add the attribute, an equal sign, followed by the value for that attribute. Put the value in quotes.

Like this:

<tag attribute=”value”>

tag attribute equals value

Don’t forget the basic syntax of HTML tags and their attributes

The <hr> tag becomes, with attributes for width:

And the results of that tag would look like this:

The only difference, if you were writing this in XHTML, would be that space and slash:

Efficient puppies don't want any extra code even a single slash

You can measure the width in pixels or percentages. A number without any abbreviation following it is assumed to be pixels, e.g.  width="500"  would mean 500 pixels.

Use a percentage symbol if you want your line to change as the reader’s page expands, such as width="80%" .

hr align equals right

The hr tag with the align attribute

Here is the <hr> tag with both width and alignment attributes added:

and it looks like this (try resizing your window so you can see the difference from the line above):

The align attribute supports values including left, center, and right.


The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.