Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

19. Easy Horizontal Rules

Confused? This is just one more option for creating fancy

dividers to mark the different sections of a web page.


After this lesson you will be able to:


Note: We will not be modifying our web pages in this lesson -- so you can just review the information and then decide if you want to experiment with it. You may want to first look at the test page to see if your browser supports the tags used in this lesson.

Netscape's first HTML "extensions" (or "deviations from standards") offered some more formatting options for the <hr> tag (Horizontal Rule) -- see lesson 4). By default, the Netscape browser displayed the solid line separator with a three-dimensional, shaded look rather then the solid line as implemented in previous web browsers.

Line Thickness

The first option is to allow for lines of different thicknesses by using the option:

  <hr size=N>

where N is the thickness of the line in pixels. Let's look at some examples to show the effect.

sample web page
<hr size=2> same as <hr> :

<hr size=8> :

<hr size=20> :

Line Width

Another formatting option for the <hr> tag allows you to adjust the width of the line -- it does not necessarily have to stretch across the whole page. You can do this by using this format:

  <hr width=X>
  <hr width=Z%>

where X is a number of pixels for the width and Z is the percentage of the current web page. In general we recommend using the percentage as it will adjust itself to the width of the browser window used by the person reading your pages (some out there are using 2-page high resolution monitors while others are squinting into their 13" screen).

Here are some examples (see how we include the size tag as well):

sample web page
<hr width=80 size=10> :

<hr width=80% size=10> :

NOTE: Try stretching and/or shrinking the width of your web browser window to see the difference between specifying the width in absolute pixels (width=80) compared to specifying the width in percentage of the web page (width=80%)
sample web page

<hr width=40% size=10> :

<hr width=5% size=10> :

No Shading

Finally, there may be a case where you do not want the 3D shading on the <hr> tag. It is as simple as:

sample web page
<hr width=60% size=6 noshade> :

<hr width=60% size=1 noshade> :


Review topics for this lesson:

  1. How do you change the thickness of a horizontal rule?
  2. How can you change the width of a horizontal rule?
  3. What is the effect of the noshade attribute inside the <hr> tag?

Independent Practice

Experiment with some of the <hr> options in your own web pages.

Coming Next....

Move it to the left... no! to the right... no! to the center...

GO TO.... | Lesson Index | previous: "Spiffing up text" | next: "Extra Alignment" |

Writing HTML: Lesson 19: Easy Horizontal Rules
©1994-2002 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
Questions? Comments? Visit our feedback center

URL: http://www.mcli.dist.maricopa.edu/tut/tut19.html

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.