Code: Deprecated HTML Tags & Alternatives in CSS Deprecated – A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML. Obsolete – An obsolete element or attribute is one for which there is no guarantee of support by a user agent. Obsolete elements are no longer defined in the specification, but are listed for historical purposes in the changes section of the reference manual. Which Tags are deprecated or obsolete? Here is a start. Feel free to add more & their solution as you find them. TAG: <align=left|center|right|justify> <valign=middle|top|bottom> Solution: {text-align: left|center|right|justify ; } or… {width: 50%; margin-left: auto; margin-right: auto; } or… {margin: 2em 0em 2em 0em ; } or… {padding: 2em ; } or… {padding: 2em 0em 2em 0em ; } _________________________________________ TAG: In your BODY tag <bgcolor=color text=#000000> Solution: body { font-size : 10px ; font-family : Arial, Helvetica, Verdana ; background-color: #000000; } _________________________________________ TAG: <clear=none|left|right|all> Solution: BR { clear: left ; } _________________________________________ TAG: Although they are not all deprecated, their use is discouraged in favor of style sheets. [b] , [i] , <u> Solution: [b] – { font-weight: bold ; } [i] – { font-style: italic ; } <u> – { text-decoration: underline ; } _________________________________________ TAG: <font size=”1″ color=”#000000″ face=”arial”> <basefont> Solution: size – { font-size : 10px ; } color – { color : #ffffff; } face – { font-family: Arial, Helvetica, Verdana, sans-serif ; } _________________________________________ TAG: <HR width=”50%” align=”center”> <HR size=”5″ width=”50%” align=”center”> <HR noshade size=”5″ width=”50%” align=”center”> Solution: { color: #000000 ; background-color: #ffffff; height: 5px ; }

Introduction

Even though it's sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet.

On the other hand, simple, unstyled <hr> does not look good in richly styled documents. That's why I tried to find a couple of cross-browser compatible ways to make it prettier. I used to hide style sheets from the version 4 browsers and older, so my targeted browsers are IE5+, Opera 5+ and Mozilla/NN6.
Which properties work

Various CSS properties can be applied on <hr>:

All three browsers allow setting width and height of the <hr> element.
The border property can be used in IE and Mozilla. It does not work well in Opera (see examples below).
IE uses the color property for the <hr> element.
Opera and Mozilla use background-color for the <hr> element.
All three browser allow setting a background-image of the <hr> element, however this is not very useful in IE and Opera (see the last example).

Examples

Now, let's take a look at a couple of examples. The style sheet of this page begins with the following rule set:

Code: hr {   border: 0;   width: 80%; }

so all rules are 80% wide and should have no initial borders. Such a rule looks almost the same in IE and Opera, however K-Meleon (Gecko-based browser) displays nothing, because it uses borders to render the <hr> element. In your current browser it looks like this:
Let's add colors

If you want to show a solid, red line, use the following code:

Code: color: #f00; background-color: #f00; height: 5px;

and you get this result:

Notice, that you have to use both the color and the background-color properties — the former for IE, the latter for Opera and Mozilla. Also notice, that Opera still displays 1px borders around the rectangle, so setting the height property less than 3px may not be a good idea. For Mac compatibility info see note 1.1.

Next three examples shows another variations that look reasonably well in all three browsers.

Thin, red (unfortunately black in Opera), solid line, 1px high:

Empty, red rectangle, 10px high:

Two thin lines, one above another (Opera displays a rectangle). Both are red, the first is dashed, the second solid:
What about images

Simple images are often used to divide sections in web pages. Is there a way to incorporate an image in the <hr> tag? Yes it is, but it isn't so easy.

The first option I've tried was the background-image property. Surprisingly enough, it works in all three browsers, yet with some caveats. Take a look at the following example:

It looks great in Mozilla, where only the image is visible, however the result is not so good in IE and Opera, because these two browsers display a border around the image (see also note 1.3). Unfortunately, I have found no way to hide this border.

Code: Because I did not find a workaround, I've added a div in the source code: <div class="hr"><hr /></div> and the following CSS rules: div.hr {   height: 15px;   background: #fff url(hr1.gif) no-repeat scroll center; } div.hr hr {   display: none; }

The result is perfect in all three browsers now:
Conclusion

The above method, i.e. wrapping the <hr> in a <div> of a particular class and hiding the <hr> in the style sheet seems to be the most flexible solution. The standard horizontal rules are visible in an unstyled document (for older browsers and handhelds), while in a styled one you can style them as you like. However, pay attention to the following:

Background images are not printed by default in most current browsers. So if you use a background image for your rules for screen, don't forget to define different style in the print style sheet.

While the simple <hr> element has some initial top and bottom margins in most browsers, it may lost them if you wrap it in a <div>. Thus setting the top and/or bottom margin for the outer <div> may be a good idea.