Using Rules

Rules are line used to divide the page into sections. They provide a visual break between the sections of the document. Many browsers will display a rule as an etched line across the page. You can see an example of a rule at the bottom of this page.

The rule tag

The code used to create a rule is: <HR>

There is an implied paragraph break before and afer the <HR>. This tag does not require a closing tag

Controling Rule Size

Across the screen

The width of rule can be controlled by placing the width as a percentage in the <HR> tag. An example is <HR WIDTH="75%">. See the line below.


<HR WIDTH="50%">


<HR WIDTH="25%">


Rule Thickness

The rule thickness can be controlled by the SIZE option used with the <HR> tag. Ex: <HR SIZE=6 WIDTH="100%">. This will display a rule that is 6 pixels high on the screen. A pixel is the smallest dot that can be displayed on the monitor. The rules shown above are all 2 pixels in size.


<HR SIZE=10 WIDTH="80%">


Rule position

A horizontal rule that is smaller than 100% of the screen can be postioned to the left of the screen, middle of the screen or to the right of the screen. The following lines are all drawn at 50% width using the "align" option for the rule.

<HR ALIGN="LEFT" WIDTH="50%">


<HR ALIGN="CENTER" WIDTH="50%">


<HR ALIGN="RIGHT" WIDTH="50%">


Graphic Rules

In your travels around the web you may find other rules being used. They will be graphics images. How to add graphics will be discussed in another HTML document. Here are some examples of some of the graphical rules we are talking about.

Home