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.
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).
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.
with |
a table in the center |
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>
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>
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)
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.
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>
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>
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.
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>
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 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>
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 | ||
---|---|---|
ハ | ワ | イ |
ha | wa | i |
But no browser ever got that right. Support for the newer nested ruby is much better.