PGTUTOR.COM
You are here: HOME >> HTML tutor >> Lesson 7
HTML tutor- Lesson 7

The topic of this lesson is the tag <hr> : the horizontal rule. In HTML the hr tag has no end tag, so just like we discussed in lesson 5, we have to write hr as <hr />.

The hr tag is used mainly as a divisor between text. For example: 

<body>
Some text here...
<hr />
Some text here...
</body>

View your webpage here

There are four attributes related to hr that give you control over its appearance- align, noshade, size, and width. All four attributes have been deprecated and we use styles instead.

For size and width the value can be given either in pixels or percentage. For example: 

<body>
<hr width="50">
<hr width="50%">
<br /> <br />
<hr size="50">
<hr size="50%">
</body>

View your webpage here

It's best to stick with percentage values (for the width attribute). When you give values in pixels, you'll see different results on monitors running with different resolutions. In screens with lower resolutions, an hr width might run off to the right of the screen whereas it might appear perfect on your 1024x768 screen.

I've talked about the align attribute before but here it is again. 

<body>
<hr width="50%" align="left">
<hr width="50%" align="center">
<hr width="50%" align="right">
</body>

View your webpage here

And now the noshade attribute. By default, the noshade attribute is set to false. The noshade atrribute has no value. All you have to do is include it in your hr tag and it will be set to true. 

<body>
<hr width="50%" size="1" noshade>
<hr width="50%" size="5" noshade>
<hr width="50%" size="10" noshade>
</body>

View your webpage here

There are some easy tags that I'll omit talking about now. They're easy to use and understand. To find those tags you can go to lesson 24 which summarizes HTML or go to HTML 4.01 tags/reference. However, I highly recommend that you don't go there right away or you'll find yourself skipping many lessons.

<< BACK NEXT >>
PgTutor - The easy way to make a website ...
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25



PGTUTOR is an award winning website. In the past 2 years, we've won over 20 legitimate awards. Go to our awards page to verify for yourself.



You're not taking a risk when buying our products. If for any reason you're unsatisfied with the quality of our product(s), we'll refund your money. Also, you get to keep the product you bought.