Width in pixels or percentage
Defines the color*
Draw as one solid color
hrelement which is an empty element, i.e. it contains no content and only employs a start tag. Horizontal rules have a number of uses including acting as dividers to graphically separate your web page into sections or as underlining for headings.
<hr>tag alone without any attributes or values will draw a horizontal rule at the default height (2 pixels), at the default width (100% of the available horizontal space) and —depending on the browser— with a simple two color groove effect.
<hr>tag to alter the resulting effect. These are described in more detail below:
size="pixels"~ Using the
sizeattribute in the
<hr>tag, you can specify the height of your horizontal rule in pixels. The number of pixels desired for the height is used as the value. Hence a
size="5"attribute-value pair will draw a horizontal rule 5 pixels in height. The default height is 2 pixels.
width="pixels or percentage"~ Using the
widthattribute, you can explicitly set the width of your horizontal rule. You may define either a fixed width in pixels or a relative width which will size your rule according to a percentage of the available space (typically the entire width of your web page). The default width is 100%.
width="900"attribute-value pair thus displaying it 900 pixels wide will outsize all screens using a resolution of 800 x 600. This will necessitate the insertion of horizontal scroll bars at the bottom of the user's web browser and may create an unattractive display.
widthattribute, web browsers will automatically resize your rule according to available screen space defined by the user's screen resolution. Thus a
width="50%"attribute-value pair will display a rule at approximately 400 pixels in width on 800 x 600 screen resolution while displaying a rule approximately 512 pixels in width on 1024 x 768 screen resolution. Using percentages creates what is known as a 'liquid' display which accomodates itself to all screen resolutions.
align="left, center or right"~ Assuming that your horizontal rule does not span or outsize the available space on your web page (see above), you can use the
alignattribute to position it to the
left, in the
centeror to the
righton your web page. Hence, using an
align="left"attribute-value pair will align your horizontal rule flush to the left side of your web page (or the left side of the block element the rule is contained in). The default is
color="color definition"~ Okay, I'm cheating again and *gasp* even teaching others to do so. Well what can I say. Guilty as charged. Ahem... Moving on... Although officially not listed in the HTML 4.01 Specification as an attribute-value pair to be used with the
hrelement, you can actually define the color of your horizontal rule using the
colorattribute and any legal color definition as the value. Hence, a
color="purple"attribute-value pair will draw a purple horizontal rule. The default is
colorattribute in the
hrelement will dispense with the default groove effect and will instead draw the rule as one solid color.
noshade~ Using the
noshadeattribute (which stands alone and requires no accompanying value), you can explicitly dispense with the default two color groove effect most browsers use to draw horizontal rules. Simply place
<hr>tag to draw your rules as one solid gray color (unless otherwise defined by the color attribute), e.g.
<hr width="50%" align="left">
<hr size="5" color="purple">
If you need a .COM web address, you can get one quick and easy at...
|<~ BACK||TOP||NEXT ~>|