Deprecated element

(Referring UWEM Test: 11.2_HTML_01)

Test info

Failure cause

The inspected element is deprecated.

You use one of the following elements deprecated in HTML 4.01: 

  • applet
  • basefont
  • center
  • dir
  • font
  • isindex
  • menu
  • s
  • strike
  • u

For a full list of HTML 4.01 elements see: HTML Techniques for WCAG 1.0 - Index of HTML elements – deprecated elements are marked by an asterisk (*).

Why this may be a barrier

A deprecated element is one that has been outdated by newer constructs. Even though they are part of the official standard, the W3C discourages the use of deprecated features.
Deprecated elements may become obsolete in future versions of HTML.

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Page WITHOUT DEPRECATED ELEMENTS</title></head>
<body>

This page uses no deprecated elements.

</body>
</html>

Solution

Replace the deprecated element with the appropriate newer elements and methods. For instance use styles for font-formating.

References

Related WCAG 1.0 Checkpoint

11.2

"Avoid deprecated features of W3C technologies." [Priority 2]
WCAG 1.0 Checkpoint 11.2

Referring UWEM Test

11.2_HTML_01

This test is targeted to find deprecated HTML elements.

Examples

  • The applet element

    The applet element is used to define an embedded applet. It is deprecated and not supported by Opera and Google Chrome.
    Use the object element to include applets.

    Bad example:
    <body>
    <applet code="SomeApplet.class" width="400" height="400">
    Some Java applet included in the document with the deprecated applet element.
    This text is only shown, if the applet can not be displayed.
    </applet>
    </body>
    Good example:
    <body>
    <object width="400" height="400">
    <param name="code" value="SomeApplet.class" />
    Some Java applet included in the document with the object element.
    This text is only shown, if the applet can not be displayed.
    </object>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • The basefont element

    The basefont element specifies the default font-color, -size and -family for a document, but it is deprecated and is only supported by Internet Explorer.
    Replace the basefont element by a corresponding style definition.

    Bad example:
    <head>
    <basefont face="Arial,sans-serif" color="red" size="4" />
    <!-- ... other header information ... -->
    </head>
    <body>
    <h1>The BASEFONT element is deprecated</h1>
    <p>Use style definitions instead.</p>
    </body>
    Good example:
    <head> 
    <style type="text/css">
    body {
    font-family: Arial,sans-serif;
    font-size: 140%;
    color: red;
    }
    </style>
    <!-- other header information -->
    </head>
    <body>
    <h1>Page font settings</h1>
    <p>The CSS in this example has the same effect as the BASEFONT element.</p>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • The center element

    The center element is used to center text.
    It is deprecated. Center text using CSS.

    Bad example:
    <body>
    <center>
    This text will be centered, but the used element is deprecated.
    </center>
    </body>
    Good example:
    <body>
    <div style="text-align: center">
    This text will be centered, using up-to-date methods.
    </div>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • The dir element

    The dir element is used to list directory titles. It is deprecated and although it is supported by all major modern browsers, it is displayed like normal lists.
    Replace the dir element by a ul element and use style definitions to format the list as desired.

    Bad example:
    <body>
    <dir>
    <li>Documents</li>
    <li>Ressources</li>
    <li>Releases</li>
    </dir>
    </body>
    Good example:
    <body>
    <ul>
    <li>Documents</li>
    <li>Ressources</li>
    <li>Releases</li>
    </ul>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • The font element

    The font element specifies the font-size, -color and -family of text.
    This element is deprecated and should be replaced by style definitions.

    Bad example:
    <body>
    <font size="1" color="red">
    This is a very very small text! Consider making it bigger.
    </font>
    <font face="Arial, sans-serif" size="2" color="purple">
    This is small text!
    </font>
    <font face="Verdana, sans-serif" size="3" color="green">
    This is some normal sized text!
    </font>
    <font face="Times, serif" size="4" color="blue">
    This is a slightly bigger text!
    </font>
    <font face="Courier, monospace" size="5" color="black">
    This is a bigger text!
    </font>
    <font size="6" color="maroon">
    This is a very big text!
    </font>
    <font size="7">
    This is a huge text!
    </font>
    </body>
    Good example:
    <body>
    <span style="font-size: 0.75em; color: red">
    This is a very very small text! Consider making it bigger.
    </span>
    <span style="font-face: Arial, sans-serif; font-size: 0.8em; color: purple">
    This is small text!
    </span>
    <span style="font-face: Verdana, sans-serif; font-size: 1em; color: green">
    This is some normal sized text!
    </span>
    <span style="font-face: Times, serif; font-size: 1.4em; color: blue">
    This is a slightly bigger text!
    </span>
    <span style="font-face: Courier, monospace; font-size: 1.8em; color: black">
    This is a bigger text!
    </span>
    <span style="font-size: 2.5em; color: maroon">
    This is a very big text!
    </span>
    <span style="font-size: 3.9em">
    This is a huge text!
    </span>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • The isindex element

    The isindex element is a historic left-over. It is used to define a document as searchable on the server-side. It is deprecated and all modern browsers already provide search-functionality by default.
    Delete this element.

    Bad example:
    <head>
    <isindex prompt="Search document: ">
    <!-- other header information -->
    </head>
    Good example:
    <head>
     
    <!-- other header information -->
    </head>
    Questions, suggestions, objections? Give us feedback!
  • The menu element

    The menu element is used to list directory titles. It is deprecated and although it is supported by all major modern browsers, it is displayed like normal lists.
    Replace the menu element by an ul element and use style definitions to format the list as desired.

    Bad example:
    <body>
    <menu>
    <li>Documents</li>
    <li>Ressources</li>
    <li>Releases</li>
    </menu>
    </body>
    Good example:
    <body>
    <ul>
    <li>Documents</li>
    <li>Ressources</li>
    <li>Releases</li>
    </ul>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • The s and strike elements

    The s and strike elements both define strikethrough text. Both elements are deprecated.
    If you want to mark a text as deleted use the del element. If you only want to strikethrough text, use style definitions.

    Bad example:
    <body>
    <s>This text is deleted and should be marked as such</s>
    <s>This text should only be visually striked through</s>
    </body>
    Good example:
    <body>
    <del>This text is deleted and marked as such</del>
    <span style="text-decoration: line-through">This text is only visually striked through</span>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • The u element

    The u element is used to define underlined text. It is deprecated.
    Don't underline text, because users can easily confuse it with a hyperlink! If you want to highlight text, use the em element to render emphasized text and the strong element to render strong emphasized text.

    Bad example:
    <body>
    <u>This text is underlined to highlight it</u>, but the underlined text can easily be confused with a hyperlink and should not be used.
    </body>
    Good example:
    <body>
    <strong>This text is bold to highlight it</strong>. It is emphasized and can not easily be confused with a hyperlink.
    </body>
    Questions, suggestions, objections? Give us feedback!
Questions, suggestions, objections? Give us feedback!
show exampleshow
hide examplehide