CodeLair website tutorials, articles & scripts

Deprecated HTML 4 elements

Published: 18 February 2007   •   Updated: 24 February 2014   •   Tags: html, css

There are several HTML elements and attributes that have now been declared deprecated by the World Wide Web Consortium (the organization that sets HTML standards). “Deprecated” means that the elements no longer serve a purpose and have been replaced by other methods, mostly involving cascading stylesheets (CSS).

Although it is recommended that web browsers continue to support them, eventually they will become obsolete. This page lists all the deprecated elements and attributes of HTML 4, and specifies the recommended replacements for them. You will need a basic understanding of CSS to implement most of these.

Do note that many examples below shown use inline styles for simplicity. These should not be used on live sites - styles should be applied to classes or tags inside stylesheets.

The FONT and BASEFONT tags #

These two elements have been deprecated in favor of CSS. <basefont> was used to specify the main font for a page, while <font> was used to specify inline changes to a font (e.g. for a paragraph or a few words). They both have the same possible attributes:

  • face: The actual font to use, such as Times New Roman or Arial. This has been superseded by the CSS property font-family. You can also specify the type of font (serif, sans-serif, etc).
  • size: The size of the font, relative to the default on the page. This has been replaced by the CSS property font-size. You can use any length value (px, em, in, mm), but it is best to use pixel (px) sizes.
  • color: The color of the font. This has been replaced by the CSS property color.

Deprecated example:

<basefont face="Arial" size="+1" color="green">Some text</basefont>

To set the font for a page using CSS (as per basefont), you should target the body element in your style sheet. The equivalent of the above would be:

body {
	font-family: Arial, sans-serif;
	font-size: 13px;
	color: green;
}

If you use tables in your pages, you will need to add the td to the list of tags in the declaration, because the font size always reverts to the default inside tables:

body, td {
	font-family: Arial, sans-serif;
	font-size: 13px;
	color: green;
}

You can specify several font properties at once using the CSS font property:

body, td {
	font: 13px Arial, sans-serif;
	color: green;
}

To set font styles for inline text (as per FONT), you can do one of two things:

  1. Use the span tag with the style attribute:

    <span style="font-family: monospace; font-size: 10px;">This is 10px monospaced text.</span>

  2. Set up a class in the style sheet:

    .small { font-size: 10px; }

    Then in the page:

    <span class="small">Small text</span>

The latter method is much more reliable, since you can apply the style to several portions of text, without having to specify the size each time. And if you decide to change the size later, you only need to change it in one place: the stylesheet.

The CENTER tag and ALIGN attribute #

These have also been replaced by CSS. Deprecated examples:

<p align="center">Centered paragraph</p>
<p align="right">Right-aligned paragraph</p>
<center><img src="pic.gif"></center>

To align content on a page, the CSS property is text-align. It takes four possibilities: left, right, center or justify.

.center { text-align: center; }

The HTML:

<p class="center">Centered text</p>

This works for inline content such as text or images, but block elements like tables and your own DIV tags do not follow the rules above. However, there is a simple yet relatively under-promoted trick to center block elements. The correct solution is to set the margin to auto, as in the following code. Change 500px to the width you would like the table to be:

<table cellpadding="0" cellspacing="0" style="margin: auto; width: 500px; border: 1px solid black;">
	<tr>
		<td>Test</td>
	</tr>
</table>

However, Internet Explorer prior to version 7 does not currently display the margin: auto rule correctly. To fix this, we can take advantage of another IE bug, which is that the browser aligns things to the center when it shouldn’t. The final code is as follows. Note that we add text-align: left to the table to stop the div alignment applying to nexted text.

<div style="text-align: center;">
	<table cellpadding="0" cellspacing="0" style="margin: auto; width: 500px; border: 1px solid black; text-align: left;">
		<tr>
			<td>Test</td>
		</tr>
	</table>
</div>

This should work in all browsers. Note that the auto value only has an effect on the left and right margins; it does not center elements vertically. Images can also pose alignment problems. In HTML, setting the align attribute to left or right causes text to wrap around the image but the text-align property in CSS does not achieve this effect. To align images to the left or right with text wrapping, you should use the float property. The same argument holds for tables and other block level elements.

<img src="pic.gif" style="float: left;"> This text will wrap around the right of the image.

The U, S and STRIKE elements #

These text formatting elements have been replaced by the text-decoration CSS property. Deprecated examples:

<u>Underlined text</u>
<s>Strikethrough text</s>
<strike>Strikethrough text</strike>

CSS replacements and HTML code:

.u { text-decoration: underline; }
.strike { text-decoration: line-through; }
<span <strong>class="u"</strong>>Underlined text</span>
<span <strong>class="strike"</strong>>Strikethrough text</span>

It should also be noted that the HTML spec discourages the use of the B, I, BIG, SMALL and TT tags in favor of stylesheets, though their use is not officially deprecated. For reference:

  • <b> can be replaced by font-weight: bold;
  • <i> can be replaced by font-style: italic;
  • <big> can be replaces by font-size: larger; or a specific size
  • <small> can be replaced by font-size: smaller; or a specific size
  • <tt> can be replaced by font-family: monospace;

The BACKGROUND and BGCOLOR attribute #

These were used to set a background image or color for the document or an element. The bgcolor attribute applies to the <table>, <tr>, <td>, <th> and <body> elements. Interestingly, the background attribute was only ever defined for the body element, but most browsers support it for the same elements as bgcolor. Both of these can be easily replaced with CSS.

The following sets the image graytile.gif as the background to the whole page. As per CSS rules, if the image cannot be found, the supplied color (light gray) will be used instead.

body {
	background: lightgray url("graytile.gif");
}

The great thing about using CSS if there are various other attributes that can be applied as well, for example no-repeat can be appended to make the background only show once and not tile. Plus positioning like center top.

Similar styles can be applied to the table attributes:

table.style1 {
	background-color: lightyellow;
}

Or, for different heading and data cell colors:

table.style1 th {
	background-color: yellow;
}
table.style1 td {
	background-color: lightyellow;
}

With this HTML:

<table class="style1">
	<tr>
		<th>Col 1</th>
		<th>Col 2</th>
	</tr>
	<tr>
		<td>Data 1.1</td>
		<td>Data 1.2</td>
	</tr>
	<tr>
		<td>Data 2.1</td>
		<td>Data 2.2</td>
	</tr>
</table>

The BORDER attribute #

Applies a border to an image or object. Example CSS replacement:

<img src="image.gif" width="200" height="150" alt="Image description" style="border: 1px solid black;">

These attributes were used on the BODY tag to set the text color for the document and links:

  • text sets the default text color
  • link sets the default link color;
  • vlink is the color of a visited link;
  • alink sets the ‘active’ link color (shown as the link is clicked).

They have been usurped by CSS pseudo elements. Deprecated example:

<body text="darkblue" link="green" vlink="black" alink="red">
	<p>Some text in the document...<br>
		<a href="something.com">this is link 1</a><br>
		<a href="somethingelse.com">this is link 2</a><br>
		<a href="google.com">this is link 3</a>
	</p>
</body>

CSS replacement for the respective attributes:

body {
	color: darkblue;
}
a:link {
	color: green;
}
a:visited {
	color: black;
}
a:active {
	color: red;
}

The most useful aspect of this replacement is that you can change a multitude of styles, not just the color. For example, you could set a background color on all the active links, or different fonts or borders, etc. Note that the active rule must be below the others; otherwise, the other rules take precedence. For example if the order was link/active/visited, the active color would only show when clicking on an unvisited link (which may be your intention).

There is also a fourth rule, :hover, which can change the style when the mouse moves over a link (but does not click). Depending on your preference, this should go near or at the bottom. Here’s an example that shows the typical link underline on hover only:

body {
	color: darkblue;
}
a:link {
	color: green;
	text-decoration: none;
}
a:visited {
	color: black;
}
a:hover {
	color: lightblue;
	text-decoration: underline;
}
a:active {
	color: red;
}

The active rule stays below the hover rule in this case so that it still occurs when clicking on a link.

The HPSACE and VSPACE attributes #

These were used on the IMG and OBJECT tags to set spacing around them. As you have may have guessed, the same effect can be achieved with margins in CSS. Reminder: the four values in the margin property are for the top, right, bottom and left margins respectively.

<img src="image.gif" width="15" height="20" alt="image" style="margin: 0 2px 2px 5px;">

The LANGUAGE attribute #

This was used on the SCRIPT tag to name the type of script being used.

<script language="JavaScript">alert("Hello!");</script>

The W3C now states the type attribute should be used instead. I don’t know the values for every scripting language, but it is likely to be ‘text’ followed by a forward slash, then the name of the language. JavaScript is really the only language used these days (and the only one supported by every major browser).

<script type="text/javascript">alert("Hello!");</script>

The CLEAR attribute #

This was used on the <br> tag to undo the wrapping caused by floating elements, such as aligned images.

<br clear="all">

Again, this can be replaced by CSS. The clear property takes the values left, right, both or none.

.unfloat { clear: both; }
<img src="image.gif" style="float: left;"> This text wraps...
<br class="unfloat">
This text appears underneath the image...

The WIDTH and HEIGHT attributes #

width applies to the <th>, <td>, <hr> and <pre> tags; height applies to <th> and <td>. These can all be replaced by the simple width and height CSS rules. Note that it is still recommended to use the HTML attributes for images, to allow the browser to size images correctly if they fail to download.

td.leftColumn {
	width: 600px;
}
td.rightColumn {
	width: 250px;
}

The TYPE attribute for lists #

The type attribute, when applied to lists, defined how the bullet points in a list are displayed. Unordered lists could be displayed with filled-in circles, outlined circles or outlined squares. Ordered lists could use numbers or lowercase/uppercase letters/Roman numerals. This has been replaced with the CSS list-style-type property. The following tables show the possible values.

Glyphs (symbols for unordered lists) #

Value Description
disc filled-in circle (default)
circle outlined circle
square filled-in square

Numbering (for ordered lists) #

Value Description
decimal numeric: {1, 2, 3, …}
decimal-leading-zero numeric including leading zero: {01, 02, 03, …, 10, …}
lower-alpha lowercase ASCII letters: {a, b, c, …}
upper-alpha uppercase ASCII letters: {A, B, C, …}
lower-roman lowercase Roman numerals: {i, ii, iii, …}
upper-roman uppercase Roman numerals: {I, II, III, …}
lower-greek lowercase Greek letters: {α, β, γ, …}

There are also many localised styles predefined, such as arabic-indic, armenian, georgian, and hebrew. A full list can be found in the W3C spec here.

Here is a short example for an ordered list with roman numerals. Deprecated code:

<ol type="i">
	<li>first item (i)</li>
	<li>second item (ii)</li>
	<li>third item (iii)</li>
</ol>

Replacement code:

<ol style="list-style-type: lower-roman;">
	<li>first item (i)</li>
	<li>second item (ii)</li>
	<li>third item (iii)</li>
</ol>

The START and VALUE attributes for lists #

The value attribute, applicable to list items only, sets a value for the current list item (only useful for ordered lists). This means we can reset the counter if required. For example, the following code displays items numbered {1, 2, 3, 1, 2}:

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li value="1">list item</li>
	<li>list item</li>
</ol>

The start attribute specifies the starting number for a list, and as such only applies to the OL tag. For example, to start an ordered list from zero, the deprecated HTML would be:

<ol start="0">
	<li>zeroth item</li>
	<li>first item</li>
	<li>...</li>
</ol>

Both can been replaced with generated content in CSS. This is quite complex so I won’t go into too much detail here, but here’s a basic example. We start with the following CSS:

ol {
	counter-reset: item;
}
li {
	display: block;
}
li:before {
	content: counter(item) ". ";
	counter-increment: item;
}
li.reset {
	counter-reset: item 0;
}

This uses the :before pseudo element to set a number before each list item. It uses the counter function alongside the counter-increment property to put an increasing number before the content of the list item. Then, the following HTML code provides a list ordered {1, 2, 3, 1, 2, 3}. Note that the counter-reset value always makes the counter start from the next number - i.e. when we put 0, it starts from 1.

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li class="reset">list item reset</li>
	<li>list item</li>
	<li>list item</li>
</ol>

The reset class mimics the value attribute. To replicate the start attribute, replace item with item 0 as the counter-reset value for the ol rule. As above, use one less than the actual value you require; so to start the list at zero use item -1, or to start at 10 use item 9.

The problem with this code is that the standard nice indentation on lists - where the left edges of each list item align vertically and the numbers are right-aligned - is not preserved. This can be fixed with some positioning trickery - I wrote an answer on Stack Overflow detailing this.

The COMPACT attribute for lists #

As the name implies, this was intended to produce a compact version of a list (the <dir>, <dl>, <menu>, <ol> or <ul> tags), however the W3C does not define ‘compact’ - it could be a smaller font size, small line height or something else. Furthermore, none of the major browsers support this attribute (it has no effect). As such it is not possible to advise a specific replacement, but if you want a compact list then you should change the font size or spacing with CSS.

The APPLET element #

This element has been deprecated in favor of the <object> element, which is more general. Here is how the attributes crossover:

  • code or object was the location of the main class file in the APPLET element - use data or classid instead.
  • type or codetype should be used to specify the type of content given in data or classid respectively.
  • codebase, the root location of the objects/code, remains.
  • archive, a comma-separated list of objects to preload, remains.
  • alt is not a possible attribute for OBJECT; you could use standby, which shows a message while loading.
  • ‘visual presentation’ attributes such as width, height and align can be controlled with CSS (see the relevant sections of this page).

Also note that many browsers disable loading of Java by default for security reasons. Mobile devices have no support at all. In almost all cases you are better served by JavaScript (which despite the name is an entirely different language!)

The DIR and MENU elements #

<dir>
	<li>list element...</li>
</dir>
<menu>
	<li>list element...</li>
</menu>

These were used for special types of lists, though they should display in the same way as a standard bulleted list. For this reason, they are deprecated in favor of using a normal list:

<ul>
	<li>list element 1</li>
</ul>

The ISINDEX element #

This tag inserts a search field into the page. You should use standard form elements instead, for example:

<form method="get" action="/search.php">
	<input type="text" name="search">
	<input type="submit" value="Search">
</form>

NOSHADE and SIZE for horizontal rules #

All attributes for the horizontal line tag are deprecated (except global attributes like class). size is easily replaced by the height property in CSS. Unfortunately, web browsers tend to differ in how they shade CSS representations of horizontal lines. Setting background color works in Opera and Firefox; setting the color (which is intended for text) works in Internet Explorer. Thankfully, using both together doesn’t have any adverse effects.

Here are two deprecated examples: a thick horizontal line and a line without shading:

<hr size="10">
<hr size="3" noshade>

Replacement styles:

<hr style="height: 10px;">
<hr style="height: 3px; border-style: none; background-color: gray; color: gray;">

The NOWRAP attribute #

Applies to the <td> and <th> elements. This attribute turns off text wrapping, so text in the cell stays on one line and stretches the table if necessary. The equivalent CSS property white-space with the value nowrap recreates this for any tag.

<td style="white-space: nowrap">This is a very long piece of text that could stretch the table cell by quite a bit.</td>

The VERSION attribute #

This was used on the HTML tag, providing the version number of HTML being used. The W3C have declared this unnecessary, since in HTML 4 the document type declaration provides version information. The best method is to use the modern doctype which works in all browsers:

<!DOCTYPE html>

Conclusions #

Well that was a long list! Some of these replacements may seem unwieldy - for example using <span style="text-decoration: underline;"></span> instead of <u></u> is quite cumbersome - but the main point to take away from this tutorial is that in general, these styles should not be used directly. If you are underlining something there is a reason for it. You may be creating a title, for example. In this case, you should use a heading tag or a CSS class named title and set the styles on that. Instead of this:

<b><u>Section 2.3</u></b>

You could use a level 3 heading with appropriate styling:

h3 {
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
}

Ultimately, if you’re only creating a few pages then using deprecated tags won’t matter. Browsers will support them for many years to come. But as soon as your site starts to grow, you must start thinking about using CSS for cleanliness and consistency.