Horizontal Lines!

HTML Tutorials
By Jeffrey J. Walters

Making a horizontal rule, or line as most of us refer to it, is easier than most people think. It's one small, short, and simple command; <hr>. Here's what is looks like in it's simplest form.

And, here's the amazing code that made it.

<hr>

Pretty simple as you can see. That's all there is to it. I have used the <hr> command all over these tutorials, so this tutorial may get a bit confusing at times. The next line is just a section break.

Horizontal Ruler Attributes:

There are a couple of attributes or options to the <hr> command. Here's it is in summary.

<hr attribute1=".." attribute2="..">
Inserts a horizontal line.
Attributes:

size=".." ; the thickness of the line.
color=".." ; line color, Internet Explorer only.
width=".." ; the length of the line.
align=".." ; alignment of line: RIGHT, LEFT, or CENTER.
noshade ; make a solid line.

The SIZE is measured in pixels. Try using 3, 5, or maybe 10 to see what thickness' you like. The COLOR attribute will only work with the Internet Explorer browser so I wouldn't use it unless absolutely necessary. The COLOR should be in hexadecimal form.
I use WIDTH attribute much more than any of the others. The WIDTH can be entered in pixels or as a percentage of the browser's window width. Here are some examples with the WIDTH attribute used.

And, here's the code.

<hr width="300">

And, here's the code.

<hr width="75%">

I really like to use the percentages, because it makes you web page seem to fit to the viewers browser. To see what I mean, increase or decrease the width of your browser window by clicking the edge of the window and dragging it to the right or left. Watch how the line created with a percentage adjusts to the width of the browser window.
The ALIGN attribute is also very useful. It allows you to justify your line to the RIGHT , LEFT, or CENTER. For most browser's, CENTER is the default and is not needed in the <hr> command. NOSHADE is the last attribute and it make the line solid instead of having a shading effect.

More examples:

Some more examples are shown below. The HTML code for each is shown indented and in bold. I hope this helps.

<hr width="200" align="left">

<hr width="25%" align="right">

<hr size="10">

<hr size="10" noshade>

Link to this Tutorial!

Did you find this tutorial helpful? If so, please help me to share it with others by linking to it. Just place the HTML code below onto your own Web page to create a link to this tutorial.