Utdatert element

(Henvisende UWEM-test: 11.2_HTML_01)

Testinformasjon

Feil på grunn av

Det undersøkte elementet er utdaterte.

Et av de følgende utdaterte elementene i HTML 4.01: 

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

For en fullstendig liste over elementene i HTML 4.01, se: HTML Techniques for WCAG 1.0 - Index of HTML elements – utdaterte elementer er markert med stjerne (*).

 

Hvorfor dette vil være en hindring

At et element er utdatert betyr at elementet er erstattet av nye representasjoner. W3C fraråder bruk av slike elementer, selv om de er en del av den offisielle standarden.
Degraderte elementer kan bli avleggs i framtidige HTML-versjoner.

Løsning

Erstatt utdaterte elementer med passende nye elementer og metoder. Bruk for eksempel stilark for formattering av innholdet.

Referanse

Henvisning til WCAG 1.0-kontrollpunkt

11.2

"Unngå degraderte funksjoner i W3C-teknologier." [Prioritet 2]
WCAG 1.0 Checkpoint 11.2

Henvisning til UWEM-test

11.2_HTML_01

Denne testen er rettet mot å finne utdaterte HTML-elementer.

Eksempler

  • 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.

    Dårlig eksempel:
    <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>
    Godt eksempel:
    <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>
  • 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.

    Dårlig eksempel:
    <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>
    Godt eksempel:
    <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>
  • The center element

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

    Dårlig eksempel:
    <body>
    <center>
    This text will be centered, but the used element is deprecated.
    </center>
    </body>
    Godt eksempel:
    <body>
    <div style="text-align: center">
    This text will be centered, using up-to-date methods.
    </div>
    </body>
  • 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.

    Dårlig eksempel:
    <body>
    <dir>
    <li>Documents</li>
    <li>Ressources</li>
    <li>Releases</li>
    </dir>
    </body>
    Godt eksempel:
    <body>
    <ul>
    <li>Documents</li>
    <li>Ressources</li>
    <li>Releases</li>
    </ul>
    </body>
  • 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.

    Dårlig eksempel:
    <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>
    Godt eksempel:
    <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>
  • 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.

    Dårlig eksempel:
    <head>
    <isindex prompt="Search document: ">
    <!-- other header information -->
    </head>
    Godt eksempel:
    <head>
     
    <!-- other header information -->
    </head>
  • 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.

    Dårlig eksempel:
    <body>
    <menu>
    <li>Documents</li>
    <li>Ressources</li>
    <li>Releases</li>
    </menu>
    </body>
    Godt eksempel:
    <body>
    <ul>
    <li>Documents</li>
    <li>Ressources</li>
    <li>Releases</li>
    </ul>
    </body>
  • 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.

    Dårlig eksempel:
    <body>
    <s>This text is deleted and should be marked as such</s>
    <s>This text should only be visually striked through</s>
    </body>
    Godt eksempel:
    <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>
  • 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.

    Dårlig eksempel:
    <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>
    Godt eksempel:
    <body>
    <strong>This text is bold to highlight it</strong>. It is emphasized and can not easily be confused with a hyperlink.
    </body>