Lesson 27: Deprecated Elements

Overview

In this HTML lesson, we explain how and why elements are taken out of the HTML standard. First, we demonstrate that some deprecated elements remain supported by browsers long after they are deprecated. Typically, deprecated elements are removed for a specific reason, but valid alternative methods remain for achieving a similar effect without the deprecated elements. Additionally, we have elements that are not deprecated, but their usage is merely discouraged: b, i, u, s, and small. These discouraged elements also have more suitable alternatives that are favored in HTML.

Basefont and Font

Deprecated elements may be supported in a browser long after they have become deprecated. In this example, we have a basefont element, which would change the default font for all elements in the document. As we can see, the basefont does not change the font of the text at the top of the body. This indicates that the basefont is not being supported by the browser. However, the font element does change the font for the text that is inside it, as we see in the text at the bottom.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <basefont face="verdana" size="4" color="red" />
  </head>
  <body>
    Visit xoax.net
    <font face="arial" size="6" color="blue"><p>Visit xoax.net</p></font>
  </body>
</html>

Output

Acronym, Big, Strike, and Teletype

In this example, we use the acronym, big, strike, and teletype elements. All of these are deprecated, but they are still supported. The acronym element is similar to the abbr element, which is considered a better alternative. The big element is merely presentational. So, CSS styling should be used instead of it. The strike element should be replaecd by the del element. Finally, we have several elements to use as an alternative to the teletype element: kbd, code, var, or samp.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Use <abbr title="Anno Domini">AD</abbr> 65, instead of
      <acronym title="Anno Domini">AD</acronym> 65.</p>
    <p>Visit xoax.net for <big>more</big> information</p>
    <p>Was <strike>$499.00</strike>, now $300.00</p>
    <p>Press <tt>Enter</tt> to continue.</p>
  </body>
</html>

Output

Center and Dir

The center element was used to center text, but it is now deprecated in favor of CSS styling. Likewise, the dir element, which was used for directory lists, has been deprecated in favor of unordered lists. Both are still supported, however.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <center><p>Visit xoax.net for more information</p></center>
    <dir>
      <li>C++</li>
      <li>JavaScript</li>
      <li>HTML</li>
    </dir>
  </body>
</html>

Output

Small, B, S, I, and U

The small, b, s, i, and u elements are not deprecated, but their usage is discouraged in favor of CSS styling, and the strong, del, em, and ins elements, respectively.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Some <small>small</small>, <b>bold</b>, <s>struck</s>,
    <i>italicized</i>, and <u>underlined</u> text.</p>
  </body>
</html>

Output

Frames and Applets

Frames were once used to display pages within a page and format the content. Now, frames are deprecated and their associated elements are no longer supported. The same functionality can be achieved with iframes, divs, and CSS styling. Java applets used to be a common feature of the web, allowing users to play games and run applications within a browser. The applet functionality is no longer supported. Instead, we can now use JavaScript for client-side programs.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <!-- Replace with iframe, divs, and styling-->
    <frameset rows="25%, 10%, *, 25%">
      <frame src="Frame1.html">
      <frame src="Frame2.html">
      <frame src="Frame3.html">
      <frame src="Frame4.html">
      <noframes>Your browser does not support frames (does not work).</noframes>
      <p>Your browser does not support frames.</p>
    </frameset>
    <applet code="MyGame.class" width="400" height="400"><p>Your browser does not support
    applets</p></applet>
  </body>
</html>