HTML: Horizontal Rules

Horizontal Rules are simply a horizontal line that runs across the page. The tag is simply:

<hr /> and this would produce:

Note that this tag, like the break tag <br /> is an empty element - meaning there is nothing that comes after it and the supposed closing tag. To be XHTML compliant all tags must be closed so we add the / within the tag as a shorthand way or writing <hr></hr>.

Styling Horizontal Rules
We can control the appearance of horizontal rules using the following style properties:

Height - set in pixels. Pixel, short for Picture Element, is the smallest discrete unit of measurement on a computer screen. It is a small square.
<hr style="height :10px;" />

Width - can be set to an absolute value in pixels, or a relative value as a percentage. An absolute value means the width is always the same. Relative values allow the horizontal rule to expand or collapse based on the width of the browser element or the element that contains it.

Absolute Example
<hr style="width: 300px;" />

Relative Example
<hr style="width: 50%;" />

Color - as with changing the font color you can use a color name or a hex value. Because of differences between Internet Explorer and Mozilla based browsers such as Firefox we need to handle this two ways. Here is how:

<hr style="color: green; background-color: green;" />

The color property is used for Internet Explorer and the background-color property for Mozilla.

Alignment - by default horizontal rules are aligned to horizontal center. As demonstrated with headings earlier, we can set the horizontal alignment of the horizontal rule with the text-align property. Here is how we apply it. Note the addition of the width property which needs to be added to make the example work.

<hr style="text-align: left; width: 40%;" />