<hr> Horizontal Lines

Talk about HTML resources, styles etc.
Post Reply
User avatar
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium

<hr> Horizontal Lines

Post by JimBb » Sun Dec 19, 2004 7:12 am

Sometimes you need to separate or emphasize a block of text, and you don't want to use another font or another color. Well, you can use the <hr> tag, which stands for horizontal rule. It used to be just a line along the width of your page, but with later versions of HTML there are some fancy things you can do with it. Too bad this board doesn't allow the usage of HTML code, otherwise I could show it here.

Code: Select all

<hr align="right">
You can use left, right or middle. In itself it doesn't make much sense, since the code in the example will show a line along the entire width of your page, so you wan't see any difference between a left-aligned or a right-aligned line. But we'll fix that :)

Code: Select all

<hr align="right" width="50%">
Now it makes sense. This way you'll draw a line half the width of your page, glued to the right margin.
Using a percentage is nice when you want the line to resize with your page. But nobody stops you from using a fixed width (like <hr align="right" width="125">, that will always draw a 125 pixel long line)

Code: Select all

<hr align="right" width="50%" size="15">
"Size" refers in this case to the thickness of the line. So the example will draw a line half as wide as your page, aligned to the right, and 15 pixels thick.
Well, "thick"... You'll notice that it's mostly a shape, it's not a solid line. Let's fix that:

Code: Select all

<hr align="right" width="50%" size="15" noshade>
Now it's a solid grey line.
A word of warning: if you want to have exactly the same look-and-feel in different browsers, you may want to use something else, as Mozilla will show a thick line with rounded corners, and Internet Exploder will show a thick rectangular line.
Oh, you think grey is boring? Don't worry:

Code: Select all

<hr align="right" width="50%" size="15" noshade color="red">
Same line, sime size and shape, but red.
By the way, once you start using a color using "noshade" or not makes no difference anymore, the line is always solid.
In the example I used the color-name "red". You can just as well replace that with any hexadecimal RGB value if you like. <hr align="right" width="50%" size="15" noshade color="#ff0000"> has exactly the same result, for example - and of course you can use any other hex-color combination you like.

Last edited by JimBb on Sat Feb 05, 2005 7:11 am, edited 1 time in total.

User avatar
Human Abacus
Posts: 474
Joined: Fri Dec 26, 2003 3:18 am
Location: Calgary, Alberta, Canada

Post by grelmar » Sun Dec 19, 2004 2:49 pm

Great one Jim!

I love the HR tag. It's a great way to ad some simple flair to a page without having to use a graphic.

Side note: Anytime you can use a simple command like this to ad some visual flair to a page without using a graphic, it helps to keep the overall size of the page down. This reduces bandwidth usage (which can save you money in the long term) - And also means your pages will load faster.

It should also be noted that old style "text only" browsers (yes, they're still out there), tend to obey the HR command. With careful use of this, if someone with a text only browser views your page, you can keep the information neatly separated.

Also, there is some evidence that search engines pay attention to the HR tag when breaking up your page into "blocks" of information. This is a tougher act to juggle, but can be used to some effect.

Post Reply