Search this site...

Horizontal rules

To break up an HTML document into separate sections, you can insert a horizontal line (rule). A horizontal rule is inserted by the <hr> tag. The <hr> tag is one-sided, meaning it does not require a closing tag. Let's look at an example:

Inserting horizontal lines
<hr>
As several sections are added to a web page, they can be separated into visually distinct regions by a horizontal rule.

So where should you expect a horizontal rule? Our horizontal rule should be printed after the first line ("Inserting horizontal lines"), as shown below:

Inserting Horizontal lines
As several sections are added to a web page, they can be separated into visually distinct regions by a horizontal rule.

<hr> attributes

The <hr> tag has several attributes that control the size and the appearance of the horizontal rule. For instance, the size attribute controls the rule's thickness (height) in pixels. The width attribute controls the rule's width in percentages or pixels. The align attribute sets the alignment of the rule to left, right, justify, or center. (Note the default rule's alignment is center.) Finally, the noshade attribute renders the rule without a surrounding shadow. The following HTML code for each of these attributes in use:

Horizontal rule of size 12: <hr size="12" />
Horizontal rule of size 12 and width 20%: <hr size="12" width="60%" />
Horizontal rule of size 12, width 300 pixels, and aligned left: <hr size="12" width="60%" align="left" />
Horizontal rule of size 12, width 300 pixels, and aligned right: <hr size="12" width="60%" align="right" />
Horizontal rule of size 12, width 300 pixels, and aligned justify: <hr size="12" width="60%" align="justify" />
Horizontal rule of size 12, width 300 pixels, and no shading: <hr size="12" width="60%" noshade="noshade" />

The following shows the output of the above code:

Horizontal rule of size 12:


Horizontal rule of size 12 and width 20%:


Horizontal rule of size 12, width 300 pixels, and aligned left:


Horizontal rule of size 12, width 300 pixels, and aligned right:


Horizontal rule of size 12, width 300 pixels, and aligned justify:


Horizontal rule of size 12, width 300 pixels, and no shading: