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:
monospaced
font. Keywords written as UPPERCASE are the deprecated ones which should be replaced.Since the behaviour of these attributes differs depending on which element they are used in, the solutions are broken down by attribute/element combination.
| Attribute | Replacement style property |
|---|---|
ACCEPT in form |
accept in input |
ALIGN in caption |
caption-side or text-align |
ALIGN in div, h1..h6,
input and p |
text-align |
ALIGN in img and object |
vertical-align or float |
ALIGN in legend |
(unknown) |
ALIGN in table |
float or margin |
ALINK in body |
use a stylesheet |
BACKGROUND in body and
table |
background-image |
BGCOLOR in body, table,
td, th and tr |
background-color |
BGPROPERTIES in body |
background-attachment |
BORDER in img and
object |
border |
CELLPADDING in table |
padding (on the table cells) |
CELLSPACING in table |
border-spacing |
CHARSET in a and link |
(nothing) |
CLEAR in br |
clear |
COMPACT in dl, ol and
ul |
forget about it |
FRAMEBORDER in iframe |
border |
HEIGHT in img, object,
td and th |
height |
HSPACE in img and
object |
margin |
LANGUAGE in script |
use the type attribute |
LINK in body |
use a stylesheet |
MARGIN... in body |
margin |
NAME in a, img and
option |
use id |
NOSHADE in hr |
background-color |
NOWRAP in td and th |
white-space |
SIZE in hr |
height |
TARGET in a and link |
(unknown) |
TEXT in body |
color |
TYPE in li, ol and
ul |
list-style-type |
VALIGN in table, thead,
tbody, tfoot,
tr, th and td |
vertical-align |
VALUE in li |
(unknown) |
VERSION in html |
use a doctype |
VLINK in body |
use a stylesheet |
VSPACE in img and
object |
margin |
WIDTH in hr, img,
object, td and
th |
width (in px or %) |
WIDTH in pre |
width (in ch) |
And there's this, which I can't seem to fit in either of the above table...
| Feature | Replacement |
|---|---|
| Unitless lengths | use pixels |
font-size-adjust |
(nothing) |
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.
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}
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.
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.
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.
Example: <dl COMPACT> .. </dl>
The COMPACT attribute is not supported by any browser anyway. Just leave it out.
Result: <dl> .. </dl>
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>
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>
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%;">
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.
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.
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="">
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">
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>
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">
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>
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!
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>
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>
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>
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.
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 |
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>
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>
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>
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>
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>
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>
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.
ALIGN attributeThe 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 |
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 |
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.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"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.