Kevin W. Tharp



Horizontal Rule

The first and least complicated element of the the visual content is the Horizontal Rule, coded as <hr>. The line below is the result of the horizontal rule element.

In HTML5, the horizontal rule has been elevated from being a mearly decorative element, to being a structural element. The proper use of the horizontal rule is now to indicate a thematic break.

In the horizontal rule below, you can see that CSS properties can be applied to the <hr>, but not directly. In the example below, the hr has been given the id of #formattedhr. Then properties have been applied to the id and as such affected the hr. See the code snippet in the code box below the horizontal rule.


<hr id="formattedhr">

Style (Embedded in this page in <head> section:

<style type="text/css">
#formattedhr {
font-weight: bold;
background-color: #F00;
width: 75%;
height: 10px;
margin-right: auto;
margin-left: auto;