Deprecated HTML attributes

A list of HTML attributes which have been deprecated, and the features with which they should be replaced.

In many cases where the official W3C recommendations have deprecated HTML elements or attributes, they don't state clearly which replacements to use for those features. They usually hint as to where you should look, but all too often, you're on your own. And that's where this document comes in, which tries to provide (nearly) all the answers that the W3C recommendations neglect to give.

Notes:

Since the behaviour of these attributes differs depending on which element they are used in, the solutions are broken down by attribute/element combination.

And there's this, which I can't seem to fit in either of the above table...

Element examples

<a>

Example: <a REV=PREV href="next.html" TARGET=SECOND CHARSET=UTF-16> click </a>

REV (the relation of this document to the destination) no longer exists; use only rel (the relation of the destination to this one).

The TARGET attribute doesn't exist in all DTDs.
If you must use it, and you care for validation, then you should choose a HTML version that supports it. Otherwise, discard this attribute.

CHARSET was obsoleted in HTML5 and should be removed too. If the link target has an encoding different from the file you started from, specify it explicitly in the HTTP header.

Result: <a rel="next" href="next.html"> click </a>

Example: <a NAME=FragmentIdentifier></a><h3>Subtitle</h3>

Don't use a as an anchor. There is no more need to insert an extra element in the spot you want to use as a jump destination. Just put an id in the element at that position.

Result e.g.: <h3 id="FragmentIdentifier">Subtitle</h3>

If there doesn't happen to be an element there, you can use <a>, but stick with the id attribute.

<body>

Example: <body ALINK=ORANGE BGCOLOR=KHAKI BACKGROUND=bk.gif BGPROPERTIES=FIXED LINK=PURPLE TEXT=YELLOW VLINK=NAVY BOTTOMMARGIN=6 TOPMARGIN=6 MARGINWIDTH=9>

The BACKGROUND attribute should be replaced by a background-image style property.
Replace the BGCOLOR attribute with a background-color property. Note that in this case, a color name is used which is not officially defined. Browsers are not required to implement these names, and it's safest to replace it with its hex representation.
BGPROPERTIES is not standard HTML. If its value is FIXED, put background-attachment:fixed in the style. If the value is anything else, you can use background-attachment:scroll (the default).
Also, replace the TEXT attribute with a color property.
The ..LINK attributes can't be replaced inline; they should be made into entries in either the file's stylesheet, or a <style> section in the header.
And all the MARGIN... attributes were never standard HTML, and are not supported by all browsers. Replace them by the appropriate style properties.

Result: <style type="text/css">
a:active {color:orange}
a:link {color:purple}
a:visited {color:navy}
body {background-color:#f0e68c; background-image:url(bk.gif); background-attachment:fixed; color:yellow; margin-bottom:6px; margin-top:6px, margin-left:9px, margin-right:9px}
</style>
.
.
<body>

If you want, you can fold all the background settings into one property, as well as all the margin properties:

body {background:#f0e68c url(bk.gif) fixed; color:yellow; margin:6px 9px}

<br>

Example: <br CLEAR=ALL> continued after a floating element

The CLEAR attribute should be replaced with a clear style property, as follows:

old value new value
NONE none
LEFT left
RIGHT right
ALL both

Result: <br style="clear:both"> continued after a floating element

Note that you can use the clear property on all html elements, so if the <br> is followed by another element, you can usually dispense with the <br> altogether and assign the clear to the next element instead.

<caption>

Example: <caption ALIGN=RIGHT> caption to the right </caption>

The problem here is that the browsers can't agree on how to display this. Therefore, the CSS to replace it with depends on which browser you want to emulate!

Browser How it displays CSS to replace with
Firefox, SeaMonkey To the right of the table (as a last column) caption-side:right
Safari, Chrome centered (align is ignored) -
Internet Explorer 7 To the right of the table (as a last column) caption-side:right
Internet Explorer 8 right aligned text-align:right
Internet Explorer 9 centered (align is ignored) -
Opera <=12 right aligned text-align:right

Note also that the values left and right for caption-side have been removed from the latest CSS definition, because not enough browsers supported them. So that leaves us with the sanest choice:

Result: <caption style="text-align:right"> caption to the right </caption>

For ALIGN=TOP and ALIGN=BOTTOM, the situation is much more straightforward: simply replace those by caption-side:top and caption-side:bottom, respectively.

<div>

Example: <div ALIGN=CENTER> block of centered text here </div>

Use the text-align style (see list).

Result: <div style="text-align:center"> block of centered text here </div>

Note: not all browsers treat <div ALIGN=CENTER> and <div style="text-align:center"> the same. Especially tables in the div are problematic, so give all tables in a centered div a style of left-margin:auto; right-margin:auto, and cells in those tables text-align:left. By the way, tables in <div ALIGN=CENTER> elements don't behave the same on all browsers, but with this CSS solution, they will.

<dl>

Example: <dl COMPACT> .. </dl>

The COMPACT attribute is not supported by any browser anyway. Just leave it out.

Result: <dl> .. </dl>

<form>

Example: <form action="#" ACCEPT="image/*">
<input type="file">
</form>

The ACCEPT attribute needs to be moved to the appropriate input.

Result: <form action="#">
<input type="file" accept="image/*">
</form>

<h1> .. <h6>

Example: <h2 ALIGN=RIGHT> right-aligned header </h2>

Use the text-align style (see list).

Result: <h2 style="text-align:right"> right-aligned header </h2>

<hr>

Example: <hr ALIGN=LEFT NOSHADE SIZE=3 WIDTH=70%>

All of the hr element's attributes should be replaced by their stylesheet counterparts.
Problem is, not all browsers render <hr>s with those attributes the same, so we'll have to choose what browser to model our CSS on. For instance, Opera uses the current foreground color for the color of the hr, while most others use grey. IE makes the height 2 pixels larger than the SIZE attribute, while most others don't. And Firefox draws rounded corners when you use NOSHADE, while most others have square corners.
So take your pick. This is roughly how most browsers display it:
For the alignment, use margin-left:0; margin-right:auto for left alignment and margin-left:auto; margin-right:0 for right alignment.
If NOSHADE is given, make the hr a solid block with #808080 for a background color and no border, and set height to the value of SIZE.
Otherwise, it has a transparent background and a 1 pixel border with style inset and color #808080, and a height that is 2 pixels less than SIZE (because SIZE includes the thickness of the border).
And WIDTH is replaced by width, as usual.

Result: <hr style="margin-left:0; margin-right:auto; border:0; background:#808080; height:3px; width:70%;">

<html>

Example: <html VERSION="-//W3C//DTD HTML 3.2 Final//EN">

The VERSION attribute is no longer used to determine what flavour of HTML you're using. Use the DOCTYPE declaration instead.

Result: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>

In this case however, you should ask yourself why you are still using HTML 3.2. Maybe upgrading to HTML5 would be better.

<iframe>

Example: <iframe FRAMEBORDER=0 src="clock.html"> </iframe>

The FRAMEBORDER attribute is purely presentational and should be replaced by CSS.

Result: <iframe style="border:0" src="clock.html"> </iframe>

In the past, there used to be browsers where CSS by itself couldn't switch the border off; they had to have the FRAMEBORDER attribute too. But that is no longer the case, and using only CSS is safe.

<img>

Example: <img src="clock.png" ALIGN=TOP BORDER=4 HSPACE=10 VSPACE=3 WIDTH=50%>

Replace the ALIGN attribute with either a float or a vertical-align property, according to this list.

The BORDER attribute becomes a border property. You do need to specify "solid" in addition to the thickness in pixels, because the default border style is "none".
Replace the HSPACE and VSPACE attributes with a margin property.
WIDTH and HEIGHT should be replaced by their CSS equivalents. Unless they signify the original width and height of the image itself in screen pixels, then the attributes may stay.

And finally, the alt attribute is not optional. All img elements must have one! If you can't think of anything to say, just put in an empty string for its value.

Result: <img src="clock.png" style="vertical-align:top; border:4px solid; margin:3px 10px; width:50%" alt="">

<input>

Example: <input type="text" ALIGN=RIGHT>

Replace the ALIGN attribute with a text-align property, according to this list (but don't be surprised if the text-align works correctly in more browsers than the ALIGN!).

Result: <input type="text" style="text-align:right">

<legend>

Example: <legend ALIGN=RIGHT> legend to the right </legend>

This is a problem, as the browsers all implement this differently.
For use under Internet Explorer, you can write the following:

<legend style="float:right"> legend to the right </legend>

This isn't supported in all browsers, though. In fact, most of them render this the wrong way (they float the text inside the fieldset frame rather than in its header).
There's also this solution for Opera:

<legend style="margin-left:auto; margin-right:0"> legend to the right </legend>

but this doesn't have any effect in any of the other browsers. Note that this works in Opera, even if ALIGN=RIGHT does nothing.
And this works in Safari:

<legend style="text-align:right"> legend to the right </legend>

But not in most others. So the conclusion is, to accommodate as many browsers as possible, stay deprecated.

For now: <legend style="margin-left:auto; margin-right:0" align="right"> legend to the right </legend>

<li>

Example: <li TYPE=A value="22"> .. </li>

The TYPE attribute should be replaced with a list-style-type property:

TYPE value list-style-type
DISC disc
CIRCLE circle
SQUARE square
1 decimal
A upper-alpha
a lower-alpha
I upper-roman
i lower-roman

The value attribute also was deprecated at one time, to be replaced by a complicated system of counters (see example under <ol>), but fortunately, it no longer is!

Result: <li style="list-style-type:upper-alpha" value="22"> .. </li>

Example: <link rel="prev" href="previous.html" TARGET=Other CHARSET=UTF-16>

TARGET doesn't exist in every DTD and should be removed. Or if it is vital, switch to a DTD that does have this attribute.

CHARSET was obsoleted in HTML5 and should officially be removed too. However, doing that may cause problems with clashing charsets. For instance if the HTML file has UTF-8, many browsers expect resources such as CSS files to be UTF-8 too, unless the encoding is specified unambiguously. UTF-16 encoded files won't be recognised. So you really can remove the CHARSET attribute only if you are sure that the encoding of the resource is known (e.g. stated in the HTTP header).

Result: <link rel="prev" href="previous.html" charset="UTF-16">

<object>

Example: <object type="text/html" data="clock.html" ALIGN=LEFT BORDER=4 HSPACE=10 VSPACE=3 HEIGHT=33%> clock in frame </object>

Replace the ALIGN attribute with either a float or a vertical-align property, according to this list.
Additionally, the BORDER attribute becomes a border property. Note that you need to specify "solid" in addition to the thickness in pixels, because the default border style is "none".
Also, replace the HSPACE and VSPACE attributes with a margin property.
WIDTH and HEIGHT should be replaced by their CSS equivalents. Unless they signify the original width and height of the object resource itself in screen pixels, then the attributes may stay.

Result: <object type="text/html" data="clock.html" style="float:left; border:4px solid; margin:3px 10px; height:33%"> clock in frame </object>

<ol>

Example: <ol COMPACT TYPE=I start="18"> .. </ol>

The COMPACT attribute is not supported by any browser. Just leave it out.
For TYPE, use the following list-style-type property:

TYPE value list-style-type
NONE none
1 decimal
A upper-alpha
a lower-alpha
I upper-roman
i lower-roman

Result: <ol style="list-style-type:upper-roman" start="18"> .. </ol>

An amusing anecdote is that the start attribute was also deprecated at one time. In 1999, the people in charge apparently wanted us to use CSS instead of these attributes, and what they had in mind was a complicated system of counters, that none of the browsers in 1999 supported. Given an ol with class="I18", you would have had to put this in your stylesheet:

ol.I18 {counter-reset:I18 17;} ol.I18 li {list-style-type:none;} ol.I18 li:before { counter-increment: I18; content: counter(I18, upper-roman) '.'; float:left; text-align:right; width:160px; margin-left:-168px; }

Fortunately, start was un-deprecated later!

<option>

Example: <option NAME=First> First option </option>

Use an id instead of a NAME for the names of controls.

Result: <option id="First"> First option </option>

<p>

Example: <p ALIGN=JUSTIFY> block of justified text here </p>

Use text-align for ALIGN. See list.

Result: <p style="text-align:justify"> block of justified text here </p>

<pre>

Example: <pre WIDTH=80> .. </pre>

The WIDTH attribute designates the maximum number of characters per line in the preformatted block of text.
The official recommendation specifically refrains from dictating the browsers' behaviour when lines are longer than the WIDTH attribute. And so, browsers vary widely in their treatment of it: Mozilla wraps the content to the width, other browsers let the content overflow, or ignore WIDTH completely.
So give the pre a width in ch, and if you want to emulate Mozilla, also change the white-space property to pre-wrap.

Result: <pre style="width:80ch; white-space:pre-wrap"> .. </pre>

<script>

Example: <script LANGUAGE=JAVASCRIPT> .. </script>

The names of the languages are non-standard. You should use type.

LANGUAGE type
JAVASCRIPT text/javascript
VBSCRIPT text/vbscript

Incidentally, the names of the replacement types are also non-standard. The IANA's Scripting Media Types RFC calls them obsolete and describes the text top-level type as "problematic". Use application for the top-level type instead, at least if you don't need to support IE 8 or below.

Result: <script type="application/javascript"> .. </script>

Note: with HTML5, the type has a default value of "text/javascript", which is a shame.

<table>

Example: <table ALIGN=CENTER BGCOLOR=LIME BACKGROUND=bk.gif border CELLSPACING CELLPADDING BORDERCOLOR=YELLOW VALIGN=top> .. </table>

For left or right alignment, you can use float, but there is no singular stylesheet alternative available for centering. You can achieve the same effect by setting the margins, though.

ALIGN value replacement property
LEFT float:left
CENTER margin-left:auto; margin-right:auto
RIGHT float:right
(Note: in Internet Explorer, this trick works only when the browser is running in standards compliance mode and not in compatibility or "quirks" mode. In Firefox/SeaMonkey, it works regardless of mode.)

BGCOLOR should become a background-color property.
BACKGROUND and BORDERCOLOR are not formally defined attributes and need to be replaced by background-image and border-color properties, respectively. See Non-standard color attributes.
VALIGN should be replaced by a vertical-align property. However, some browsers do not support vertical-align on the table (even though they do support valign on the table). Best to play it safe and assign the vertical-align to the table cells (th and td elements).
The border attribute isn't deprecated yet, but it's strongly discouraged in favour of styles. If you want, you can leave it in, but only with the explicit value "1". Other values aren't allowed any more.
CELLSPACING and CELLPADDING also should be replaced by their CSS equivalents (border-spacing on the table and padding on the table cells, repectively).

Result: <table style="margin-left:auto; margin-right:auto; background-color:lime; background-image:url(bk.gif); border-width:1px; border-color:yellow; border-spacing:0" border="1"> .. </table>

or, shorter: <table style="margin:0 auto; background:lime url(bk.gif); border:1px outset yellow; border-spacing:0" border="1"> .. </table>

<tbody>, <tfoot> and <thead>

Example: <tbody ALIGN=CENTER BACKGROUND=bk.gif VALIGN=TOP> .. </tbody>

Use the text-align style for ALIGN. See list.
BACKGROUND is not formally defined and needs to be replaced by background-image.
VALIGN should be replaced by a vertical-align property. However, some browsers do not support vertical-align on the tbody (even though they do support valign on the tbody). Best to play it safe and assign the vertical-align to the table cells (th and td elements) instead.

Result: <tbody style="text-align:center; background-image:url(bk.gif); vertical-align:top"> .. </tbody>

<td> and <th>

Example: <td BGCOLOR=TEAL NOWRAP WIDTH=30% HEIGHT=30 VALIGN=top> one cell with a teal background </td>

Instead of the BGCOLOR attribute, use a background-color style property.
For the NOWRAP attribute, use a white-space property.
VALIGN should be replaced by a vertical-align property.
And WIDTH and HEIGHT should be replaced by their style equivalents: either keep the percent sign, or add px to the number otherwise.

Result: <td style="background-color:teal; white-space:nowrap; vertical-align:top; width:30%; height:30px"> one cell with a teal background </td>

<tr>

Example: <tr BGCOLOR=SILVER VALIGN=TOP> .. </tr>

Instead of the BGCOLOR attribute, use a background-color style property.
VALIGN should be replaced by a vertical-align property. However, some browsers do not support vertical-align on the tr (even though they do support valign on the tr. Best to play it safe and assign the vertical-align to the table cells (th and td elements).

Result: <tr style="background-color:silver; vertical-align:top"> .. </tr>

<ul>

Example: <ul COMPACT TYPE=CIRCLE> .. </ul>

The COMPACT attribute is not supported by any browser. Just leave it out.
The TYPE attribute should be replaced with a list-style-type property:

TYPE value list-style-type
NONE none
DISC disc
CIRCLE circle
SQUARE square

Result: <ul style="list-style-type:circle"> .. </ul>

Deprecated CSS features

Unitless lengths

Older definitions of CSS state that lengths are measured in pixels by default and do not need the suffix px.

Example: <div style="width:100; height:100; border:0"> .. </div>

However, in the definitive version of CSS1, there is no default and you always have to indicate the unit, except when the length is zero.

Result: <div style="width:100px; height:100px; border:0"> .. </div>

font-size-adjust

This property allows fonts with different x-heights to be displayed as if they were the same.

Example: <div style="font-size:15px; line-height:1.2; font-size-adjust:0.6"> .. </div>

Causes conforming browsers to scale all text in the div so that the lowercase letters are 9 pixels high (15 × 0.6), no matter the font family, and without changing the other metrics (the calculated font size will still be 15 pixels, the line height 18 pixels). However, since hardly any browser supports this, it was taken out of the definition for CSS2.1. Preliminary drafts for CSS3 indicate that it may return one day, but still the browsers need to have more support for it in order for it to actually be useful.

Miscellaneous

Text alignment with the ALIGN attribute

The ALIGN attribute on div, h1..h6, input and p can be replaced with a text-align style property. See the description under div though.

ALIGN value text-align value
CENTER center
JUSTIFY justify
LEFT left
RIGHT right

Positional ALIGN attribute

The ALIGN attribute on img or object specifies the position with respect to its context.

Here's a complete list, mapping all values to the most similar style property value.
Please note that not all ALIGN values are official W3C values; the W3C column marks the formally defined ones.

ALIGN value W3C vertical-align value
ABSBOTTOM
vertical-align:text-bottom
ABSMIDDLE
vertical-align:middle
BASELINE
vertical-align:baseline
BOTTOM vertical-align:baseline
LEFT float:left
MIDDLE vertical-align:middle
RIGHT float:right
TEXTTOP
vertical-align:text-top
TOP vertical-align:top

Non-standard color attributes

Some browsers define more color attributes than those defined by the standards.
All of these can, and should, be replaced by style properties:

attribute style property
BACKGROUND ¹ background-image
BORDERCOLOR border-color
BORDERCOLORLIGHT ² border-top-color and border-left-color
BORDERCOLORDARK ² border-right-color and border-bottom-color
¹ BACKGROUND is officially defined as a (deprecated) attribute for body, but not for any other element.
² When both BORDERCOLORLIGHT and BORDERCOLORDARK are given, a shorter form of border-color can be used: BORDERCOLORLIGHT=RED BORDERCOLORDARK=MAROON becomes style="border-color:red maroon maroon red"

Does using styles make your document larger?

Many style names are longer than the corresponding attribute names, and translating them inline (as in the examples in this document) can make your HTML document look bloated. However, first of all, it's possible to fold many properties into one.
For instance, let's suppose that you want to display the contents of a td cell in the Verdana font and italic. In the old system, you'd write

<td><FONT FACE=Verdana><I> Content </I></FONT></td>

Following the guidelines in here to the letter would leave you with this result:

<td><span style="font-family:'Verdana'><span style="font-style:italic"> Content </span></span></td>

But this can be written a lot more compact.
First of all, you can put both properties in one style attribute in the td element and dispense with both spans.

<td style="font-family:'Verdana'; font-style:italic"> Content </td>

And you can use the shorthand font property for those two properties (if you don't mind the other font properties to be reset to their defaults):

<td style="font:italic medium 'Verdana'"> Content </td>

But CSS shows its real strength when you decide to give all your tds this style.
Then you can put the style in the document's stylesheet

<style type="text/css">
td {font:italic medium 'Verdana'}
</style>

and code your tds all as if they had no decoration at all:

<td> Content </td>

which, if you have a lot of tables in your document, comes out a lot smaller, and more readable, than what you started out with.