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 span
s.
<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 td
s 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 td
s 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.