CodeLair scripts and tutorials; click to return to home page

Your Ad Here


Deprecated HTML elements

The w3c has set several HTML elements and attributes as obselete. This tutorial shows you the HTML you shouldn't be using, and the best ways to replace your 'illegal' code.
Last updated: September 02, 2007

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 - try my CSS tutorial if you are new to it.

 

Contents

 

 

The FONT and BASEFONT tags

These two elements have been deprecated in favor of CSS. BASEFONT is used to specify the main font for a page, while FONT is 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 point (pt) 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 put the following in your style sheet, obviously replacing the rules with your chosen CSS rules:

body { font-family: Arial, sans-serif; font-size: 10pt; color: green; }

If you use tables in your pages, you will need to add 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: 10pt; color: green; }

You can specify several font properties in the CSS property font:

body, td { font: 10pt 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-size: 8pt;">This is 8pt text.</span>

2. Set up a class in the style sheet:

.small { font-size: 8pt; }

Then in the page:

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

I prefer the latter method, 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 style sheet.

 

The CENTER tag and ALIGN attribute

These have also been replaced by CSS. Deprecated examples:

<p align="center">Centered 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 and 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:

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

This should work in all browsers. Note that the auto value actually only has an effect of 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. However, 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 class="u">Underlined text</span>
<span class="strike">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;
  • SMALL can be replaced by font-size: smaller;
  • TT can be replaced by font-family: monospace;

 

The BACKGROUND and BGCOLOR attribute

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 (gray) will be used instead.

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

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; }

<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="15" height="20" alt="image" style="border: 1px solid black;">

 

The TEXT, LINK, VLINK and ALINK attributes

These attributes are 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.

body { color: darkblue; }
a:link { color: green; }
a:visited { color: black; }
a:hover { color: lightblue; }
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 probably 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 is 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 is 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 replace by the simple width and height CSS rules. Note that it is still recommended to use the HTML attributes for images.

 

The TYPE attribute for lists

TYPE defines how the bullet points in a list are displayed. Unordered lists could be displayed with filled-in circles, outlined circles or outlines 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 table shows the possible values.

Type Value Description
Glyphs
(symbol - for unordered lists)		 disc (default) filled-in circle
circle outlined circle
square outlined square
Numbering systems
(for ordered lists)		 decimal (default) numeric, i.e. {1,2,3,...}
decimal-leading-zero numeric including leading zero, i.e. {01,02,03,...,10,...}
lower-roman lowercase Roman numerals, i.e. {i,ii,iii,...}
upper-roman uppercase Roman numerals, i.e. {I,II,III,...}
georgian traditional Georgian numbering
armenian traditional Armenian numbering
Lettering systems
(for ordered lists)		 lower-alpha lowercase ASCII letters, i.e. {a,b,c,...}
lower-latin
upper-alpha uppercase ASCII letters, i.e. {A,B,C,...}
upper-latin
lower-greek lowercase Greek letters, i.e. {α,β,γ,...}

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

VALUE, applicable to the LI tag only, sets a value for the current list item (obviously only useful for ordered lists). This means one 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, to a degree, with generated content in CSS. This is quite complex so I won't go into too much detail here, but the main point to note is that there is no direct mapping from the previous behavior to CSS.

We start with the following CSS:

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

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. 1 instead of 0 in this case.

<ol>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li style="counter-reset: item 0;">list item reset</li>
  <li>list item</li>
  <li>list item</li>
</ol>

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. Currently, I do not know of a way to fully replicate the deprecated HTML.

 

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 and 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 - or rather, it has no effect on the rendering when present. As such it is not possible to advise a specific replacement, but if you want a compact list then you can just change the font size or spacing.

 

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 relevant other sections of this page)

 

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 UL:

<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. See the tutorial on HTML forms for more information.

 

NOSHADE and SIZE for horizontal rules

All attributes for the horizontal line tag are deprecated. 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 all both together doesn't have any adverse effects. Here we provide some replacements (in blue) for deprecated code (red).

Style #1: thick horizontal line.

<hr size="10">

<hr style="height: 10px;">

Style #2: thick horizontal line with no shading.

<hr size="10" noshade>

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

 

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 the document type declaration provides version information.

 

Conclusions...

Well that was a long list! Some of these replacements may seem unwieldy - for example using <span style="text-decoration: underline;"></span> in lieu of <u></u> is quite cumbersome - but I think 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 rule named "title" and set the styles on that. Instead of:

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

You could use this in your stylesheet then wrap the text in a level 3 heading tag:

h3 { font-size: 10pt; 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.


Your Ad Here


[ HTML & CSS • JavaScript • PHP & MySQL • Graphics & Web Design ]

The doheth network:
Instant Song Lyrics • The Funny Pages • Simpsons Crazy • Pokemon • Cartoon images • TV shows