the hr tag, the horizontal rule

the hr tag, the horizontal rule

the hr tag, the horizontal rule

the horizontal rule, or hr tag is a good way to divide the content of your webpage.
on this page you will find examples of the hr tag and other methods of seperating the content of your html document.

hr example 1.

in the example above we see that using the hr tag produces a line across the screen, the hr tag is a block level element which means it starts on a new line, so there's no need to include a <br> tag beforehand

in this next example we will look at controling the size of the hr tag

hr example 2. (size)

<hr size="2" width="50%">
<hr size="20" width="50">
<hr size="20" width="50%">

the hr above looks like an outline because your browser gives it a 3d appearance, here it is again without the 3d look

<hr size="20" width="50%" noshade>

we can align a hr tag left right and center

hr example (align)

<hr align="left" size="3" width="50%" noshade>
<hr align="center" size="3" width="50%" noshade>
<hr align="right" size="3" width="50%" noshade>

we can color it in
<hr color="#0099FF">

which brings us to the hr tag and browser compatibility, this does not work in netscape but we can cheat in one or two ways
the first way we can use a cross browser line to divide the content of a web page is to use an image measuring 1 pixel x 1 pixel and stretch it!

<img height="3" width="50%" src="blue.gif">

another way to cheat is to create horizontal lines using html tables, this assumes that you have already read the html tables tutorial

html tutorial