Why you shouldn't use obsolete elements

Some elements that have been deprecated have not been treated kindly by time. Many browsers have all but forgotten them, and as the years pass by, the differences in how they are treated will get bigger and bigger. So although they are still usable, it's best to play it safe and replace those elements now.

basefont

Used to set the "base" font size, the font size that relative sizes are based on.

In a compliant browser, the following example would set the "base size" to 5, so the third and fourth texts would be displayed in font sizes 3 and 7, respectively - normal size, and the largest available.

  This is normal size;
  <basefont size="5">
  still normal;
  <font size="-2">and size -2</font>
  <font size="+2">and size +2</font>

In reality, most browsers ignore <basefont> completely, so the texts become size 1 and 5 (smaller and larger than the normal text), and IE v9 and lower treat it just like <font> (that is, not as a void element).

This is normal size; still normal; and size -2 and size +2

center

If you use this element, the results are not always the same in all browsers.

Given this HTML:

  <center>
   A center
   <table style="border:1px solid">
    <tr><td>with</td></tr>
    <tr><td>a table in the center</td></tr>
   </table>
  </center>

Older versions of IE (v10 and below) and Opera (v12.18 and below) center the table cells. All other browsers align the cells to the left, including IE11 in IE10 mode.

A center
with
a table in the center

dir and menu

When used as lists, these are just unordered lists, and they should be replaced by ul.
Most browsers do display them the same way as ul, but Chrome and Safari differ. In the case of menu, they put the bullets on the inside of the list items.

Example:

  <menu>
   <li>
    This is a test. This is a test. This is a test. This is a test.
    This is a test. This is a test. This is a test. This is a test.
    This is a test. This is a test. This is a test. This is a test.
    This is a test. This is a test. This is a test. This is a test.
   </li>
   <li>This is a test.</li>
  </menu>
  • This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
  • This is a test.
  • If you want to make the result look like Chrome, use list-style-position: inside for a style. Otherwise, using ul is enough. (Note that using menu {list-style-position:outside} doesn't work in Chrome.)

    dir looks OK at first sight, but if you nest a dir in an ul, Chrome and Opera don't collapse the margins of the inner list, whereas most other browsers will. Also, inner lists have white (open) circles for bullets in most browsers, but Chrome and Opera use black (solid) circles.

      <ul>
       <li>Outer list
        <dir>
         <li>Inner list (dir)</li>
        </dir>
       </li>
       <li>Rest of outer list</li>
      </ul>

    listing, xmp and plaintext

    These have (more or less) the same functionality as pre, and can be replaced with it without problems.
    Most browsers do display them the same way as pre, but Opera doesn't give listing or plaintext margins, and IE shows listing and xmp inline rather than as blocks, and it shows listing in a smaller font.

    Example:

      (reference text)
      <listing>This is a listing</listing>
      (reference text)
      <xmp>This is a xmp</xmp>
      (reference text)
    (reference text) This is a listing (reference text) This is a xmp (reference text)

    font

    The <font> element is still generally in working order, but you have to take care not to treat it the same way as you can the font style property.

    Given this HTML:

      <font face="'Courier New', 'Courier 10 Pitch'">
       This is a monospaced font face
      </font>

    Opera (v12 and below) and Safari do not like the apostrophes in the value of face and don't change the font family. Most other browsers do.

    This is a monospaced font face

    Without the apostrophes, it would work as expected in Opera, but then it stops working in Chrome and Konqueror.

      <font face="Courier New, Courier 10 Pitch">
       This is a monospaced font face
      </font>
    This is a monospaced font face

    Most other browsers are OK with either format.

    You should also look out with using colors other than the basic color names and 6 digit hex codes. <font> was not designed to be used with newer CSS features such as 3 digit hex codes or rgb(...).

      <font color="#050">So this is #050</font>
      <font color="rgb(0,85,0)">and this is rgb(0,85,0)</font>
    So this is #050 and this is rgb(0,85,0)

    For the first one, IE and older versions of Opera use #000500. For the second one, most modern browsers use #B08500; IE uses #00B000.

    So, again, just use CSS instead.

    Obsolete void elements

    Void elements (i.e. elements with no content and no end tag) that are obsolete should not be used, because not only don't they work the way they used to, browsers don't treat all of them as void any more.

    Examples:

      <style> bgsound, command, isindex {display:none;} </style>
      
      <div> <bgsound> bgsound is a void element </bgsound> </div>
      <div> <command> command is a void element </command> </div>
      <div> <isindex> isindex is a void element </isindex> </div>
    bgsound is a void element
    command is a void element
    isindex is a void element

    For Firefox, only bgsound out of these three is a void element. Chrome treats bgsound and command as void, IE treats all three as void, and Konqueror only isindex.

    As another example, nextid is treated as a void element in IE 9 and below, but not in IE 10 and up. Beware!

    rbc and rtc

    rbc and rtc elements were used in XHTML 1.1 to produce "complex" ruby annotation, but these elements never worked in the browsers the way they were supposed to. And they were declared obsolete later, to be replaced by nested ruby elements.

      <ruby><rbc><rb>ハ</rb><rb>ワ</rb><rb>イ</rb></rbc><rtc><rt>ha</rt><rt>wa</rt><rt>i</rt></rtc><rtc><rt rbspan="3">Hawaii</rt></rtc></ruby>
    hawaiHawaii

    Each of the characters , and should have its corresponding pronunciation (ha, wa and i) directly above (or below) it, and the translation Hawaii centered above it all. Like this:

    Hawaii
    hawai

    But no browser ever got that right. Support for the newer nested ruby is much better.