Tutorials HTML and CSS Tutorials HR Tag Attributes

HR Tag Attributes

John Pollock Tutorials Feb 27, 2006

Well, suppose you wanted to use a horizontal rule on your web page, but you wanted it to match the length of an image, or some text....or maybe have a short line aligned to the left or right of the page. Well, you can! Here is a list of attributes you can use to change the hr tag to your liking:

  1. width="100"
    Use this to modify the width of the horizontal rule. You can use pixels or a percentage of the page width. The default is 100% of the page width.

  2. align="left"
    Use this to align the horizontal rule to the left or right of the page. The default alignment is center. You can only see the alignment effect if the width of the horizontal rule is less than the width of the page.

  3. size="3"
    Use this to adjust the vertical size of the horizontal rule. The default size is 2.

  4. noshade
    Use this to make your horizontal rule a solid stripe across the page, rather than a shaded stripe.

Now, to use the width attribute, just add it into the hr tag:

<HR width="200">

You'll get the nifty little line below:

If you'd like to align it left or right, add it into the tag, like this:

<HR width="200" align="left">
<HR width="200" align="right">

This will give you the two lines below:

Now, you can try changing the size of the horizontal rule, by adding the size attribute:

<HR width="200" size="7">

This will give you the line below:

Try changing the size to 70 or so and see what happens.....

And finally, you can choose to use the noshade attribute, which will make your line a solid color:

<HR width="200" noshade>

Now you will get this line:

Now, remember when I said to try changing the size to 70? Well, if I do this and add the noshade attribute as well, I'll get a big filled-in box or oval shape on the page (depending on your browser):

<HR width="200" size="70" noshade>

Also, while switching between browsers, I noticed IE 4 lets you use the color=" " attribute as well. I couldn't get it to change colors in Netscape yet, though. If you have IE, you most likely will see a red line after the example here. Netscape will still show grey. I'll try to find out if Netscape uses another command to make it work....If you know it, send me an email. Here's the color example:

<HR width="200" color="red" noshade>

Well, now you can have all sorts of fun with your HR tags. Well, if you've had enough of hr tags, let's move on to the next section: Font Faces.

subscribe to newsletter