The Lost Attributes of HR: ALIGN, NOSHADE, SIZE, and WIDTH

The need to provide divisions of the text on the screen from one area to another has been met at least as far back as February 1991, in what I have called HTML Version 0.c, the earliest version of HTML to be documented. This file marks the oldest surviving attempt to provide for that kind of separator, and it does it with simply the underline character. This same approach would continue to be used clear until at least late 1993 and up to spring 1994, when the first version of HTML+ and then the second release of HTML 1 each introduced the <HR> element. I illustrate the result here:

__________________________________________________________________

Notice that this was only 66 characters long. Some smaller screens still in use at that time were only 66 characters wide. And bad as things may look with the division line not reaching all the way across the screen, it would be far worse to have it wrapping around to the next line. In order to prevent this kind of problem, the <HR> element was introduced to call for a line that pretty much runs all across the screen, however large or small that distance. The new tag/element first seen with HTML+ but rapidly adopted by regular HTML looks thus:

HTML 3.0 ventured the addition of several attributes, three of which would actually be added in HTML 4.01 (and 4.0), namely those of CLEAR, CLASS, LANG, and ID. This would allow stylesheets to be used to alter its appearence, though what use LANG (replaced with xml:lang for XHTML!) could possibly have for this particular HTML element is not clear. Two other attributes pertain to using some graphic for the separator, the more obvious of which is SRC which simply would be a URL which points to some graphic image to be used instead of the line. The other attribute for graphic images was some idea for HTML 3.0 which never caught on, namely MD which was to be for something called a "message digest." And finally, there was CLEAR which would allow <HR> to go to some midpoint of an image or other block display element if specified that CLEAR is set to LEFT or RIGHT, much like CLEAR does in the case of <BR>. The look, if it worked, might be similar to this:

__________________________________________________________________

See here to discover whether your user agent supports the HTML 3.0 attribute.

HTML 3.2 introduced instead none of the attributes proposed in HTML 3.0 but instead provided for some control over the appearence of the <HR> line.

Normally, be default, the line would reach across the entire screen width, though a small margin at each end, commensurate with the margins normally applied to the other displayed elements, is typical. One can however specify a lesser width, for example a WIDTH="50%" makes for a line that only covers half the distance:

But then the question arises, if only half of the distance is to be covered, what part(s) will not be covered. As one can see from the above, the default is to center the dividing line. But one may also move it to the left or the right, with the ALIGN attribute. See the result of <HR WIDTH="50%" ALIGN="LEFT">

Or again with ALIGN="RIGHT":

And one can even ask explicitly for the default with ALIGN="CENTER":

But one can also control the thickness of the line with yet another attribute, the SIZE attribute. This attribute only takes a simple number, which is to be the number of pixels thick the line is to be (default 2). So for example one could make it 20 pixels wide with <HR SIZE="20">:

Finally, there is one texturing control provided and that is the NOSHADE attribute. It takes no value (except in XHTML 1.0 where it would be invoked with the command noshade="noshade"), but is instead only a boolean selector, do one thing if present, else do the other (the default) if absent. See here what <HR NOSHADE> does:

Of course its effect are far more pronounced with the SIZE is set to a larger value, for example 20, as here:

So, putting it all together, see the result of this (<HR WIDTH="75%" SIZE="8" NOSHADE ALIGN="RIGHT">) which follows:

All of these attributes are depreciated because they can each be done with stylesheets which replace them. In particular, the WIDTH is replaced with a simple stylesheet value of width: which even takes the same percentage values (or can also take many other measurements of width, the full list of length qualifiers provided by stylesheets); the ALIGN attribute is replaced by text-align:; SIZE is replaced by height: (give it in "px" to match numerically what appears as the value for SIZE); and NOSHADE is replaced by color: where one assigns a color of "gray" to it. See how the same separator line is created with the following stylesheet commands:

<STYLE TYPE="text/css">
HR.demo0   { background-color: #FFFFFF;
             color: gray;
             width: 75%;
             height: 8px;
             text-align: right; }
</STYLE>
<HR CLASS="demo0">

So, stylesheets can do anything that these attributes can do, and they can also do much more, as for example this which uses CLASS="demo1":

...and this which uses CLASS="demo2":

Finally, one could even imitate the original look with the stylesheet command of CLASS="demo3":

The stylesheet commands for the preceding are:

HR.demo1   { background-color: transparent;
             width: 75%;
             height: 2em;
             border-style: groove;
             border-width: 8px;
             border-color: green;
             margin: 3em;
             text-align: left; }
HR.demo2   { background-color: #FFFFFF;
             color: red;
             width: 75%;
             height: 5em;
             border-style: ridge;
             border-width: 1em;
             margin: 5em;
             text-align: right; }
HR.demo3   { background-color: #FFFFFF;
             color: black;
             width: 66ex;
             height: 1px;
             text-align: left; }

And the stylesheet commands for the BODY are:

BODY       { background-color: #FFFFFF;
             color: #000000; }

Recommended Implementation

Most modern browsers implement these commands correctly, or at least close enough as makes no difference. Precedence should be given to the stylesheets, if in conflict with the HTML attributes, but the latter should also be supported. If the <!DOCTYPE> for HTML 3.2 is recognized, precedence should be given to the HTML attributes.

Upgrades and Downgrades

Possible downgrades are:

Text - The use of the simple drawn underline character, repeated many times, illustrated above is the only downgrade.

Possible upgrades are:

Stylesheets - These attributes are meant to be replaced by stylesheet commands as illustrated above. In HTML 3.2 these styles can be placed in the <HEAD> of the document (if all are alike), but there is no way to make any or each <HR> look different from the rest if this approach is used. In HTML 4.01 any of the ususal stylesheet attributes STYLE, CLASS, or ID may be used to distinguish each <HR> or type of <HR>. These attributes style, class, and id function the same in XHTML, except that style is depreciated and then altogether eliminated in XHTML 2.0.
XHTML 2.0 - This upcoming version of (X)HTML plans to do away with <hr /> ("Horizontal Rule") on account of some languages such as Chinese which are vertical and would require a sort of "Vertical Rule" to accomodate them. Rather than introduce a new "<vr />" element, XHTML 2.0 instead introduces (and replaces any such with) a new <separator /> element.

This file, "hrstyle.html," is HTML 4.01 Transitional compliant.
The <HR SRC="line.gif"> demonstration file "hr1.html" is HTML 3.0 Draft compliant.

Next Level Up