Replacing "Deprecated" Tags

HTML was originally designed as a "page description language." This meant that the tags described the function of the text they enclosed, not the appearance. As HTML grew, many tags were added, some formally and some unilaterally by the key players in the growth of the language (Netscape® & Microsoft®) which went against the original concept by describing only appearance. W3C is now trying to get a handle on the language and has been "deprecating" (removing support for) tags which only set appearance. The tags presented in this document are not supported in the strict implementation of HTML 4. Most of these do not effect current designs, but others (e.g. <font>) have far reaching consequences and will force Web page writers to learn some elements of Cascading Style Sheets.

This document will cover procedures for replacing many of the deprecated tags. It is not comprehensive and the techniques presented are, for the most part, the author's.


Basefont

The <basefont> tag was used to set the default font size, color and face for a web page. It can be replaced with a CSS declaration for the <body> tag of the form:
body {font-size: 12pt; font-family: Times New Roman, Times, serif; font-color: black;}

Physical Text Styles

In general, the Logical Text Styles such as <cite> and <em> should be used in place of the Physical Text Styles such as <b> and <i>. The Logical styles give more information about the function of the text. They can be defined within a Style Sheet so that their physical representation is uniform across browsers.

Several tags will not be supported in the proposed HTML 5. Substitutions should be considered for all new and edited documents.

This is an <u>Underline</u> text example. NOTE: underlining is used by most browsers to indicate a Hyperlink. CSS.
<strike>This is an example of strikethrough text</strike>. (deprecated - use DEL) CSS.
<s>This is an example of strikethrough text</s>. (deprecated - use DEL) CSS.
This is a <tt>Typewriter Text</tt> text example (uses a non-proportional font). CSS
This is a <big>big</big> text example.CSS
This is a <small>small</small> text example. CSS
Both <big> and <small> can be nested: big bigger biggest regular small smaller. Note that <small> has taken on an entirely new meaning in HTML5 and no longer can be nested.

<font>

HTML version 3 introduced a new tag that lets you specify or vary the size and color within a line of text. The format for the tag is:

<font size="+|-|#" color="literal|rgb" face="face1[,face2,...]">text</font>
The font tag is not supported in strict HTML 4 and XHTML and will not be supported in HTML 5. All of the functions of the font tag can be performed using Cascading Style Sheets. Substitutions should be considered. The attributes are:
This is an example of using the FONT tag in all seven sizes.
This is an example of creating colored text.

face="Arial,Helvetica,sans-serif"
face="Times New Roman,times,serif"
face="Comic Sans MS,Helvetica,sans-serif"

The Font tag is by far the most difficult tag to replace. Each of its three attributes size, color, and face, must be handled differently.


size

The Size attribute can be handled in several ways. The first, and most straight forward is to use the <big> and <small> tags. These tags can be nested to provide various sizes:

Changing Font Sizes using <big> & <small> Tags and font-size CSS property.
Font tag Font tag Big tag CSS
size= 7 size= +4 <big> <big> <big> <big> <span style="font-size: xx-large">
size= 6 size= +3 <big> <big> <big> <span style="font-size: x-large">
size= 5 size= +2 <big> <big> <span style="font-size: large">
size= 4 size= +1 <big> <span style="font-size: medium">
size= 3 size= +0 no tag needed <span style="font-size: small">
size= 2 size= -1 <small> <span style="font-size: x-small">
size= 1 size=- 2 <small><small> <span style="font-size: xx-small">

If the Sized text is also bolded and is on a line by itself, use Header tags.

Changing Font Sizes using <h#> Tags
Font tag Font tag Header tag
<b>size=6</b><p>

<b>size=+3</b><p>

<h1>

<b>size=5</b><p>

<b>size=+2</b><p>

<h2>

<b>size=4</b><p>

<b>size=+1</b><p>

<h3>

<b>size=3</b><p>

<b>no size</b><p>

<h4>

<b>size=2</b><p>

<b>size=-1</b><p>

<h5>
<b>size=1</b><p>

<b>size=-2</b><p>

<h6>

Note that the Header tags will cause a full paragraph break. This can make vertical centering difficult or impossible. If you wish to valign="middle" use the Big or Small forms.

For font sizes above <big><big><big>big> or <h1>, or font-size: xx-large; you can use the Cascading Style Sheet element font-size with an absolute font size. For example:

.huge {font-size: 48pt;}
The font-size style with an absolute size should be used with EXTREME care. Unlike the Big, Small and Header tags, or the Larger and Smaller parameters of the font-size attribute, when the font size is set absolutely by the style, it cannot be adjusted by most browsers! This is highly non-inclusive. It keeps partially sighted individuals and anyone with difficulty focusing on small text (which includes almost everyone over 40) from increasing the font size for better viewing. NEVER use this style element to set any font size that can be set using Big, Small or Header tags, or the Bigger and Smaller parameters of the font-size attribute.


color

Changing the color or font face without using the Font tag requires using a Cascading Style Sheet. I will show only enough of this technology to perform these tasks. A detailed CSS Tutorial is also available.

<style type="text/css">
<!-- 
body {font-family: Arial,Verdana,Helvetica,sans-serif;}
.fontchange {font-family: comic sans MS,cursive;}
.maize {color: #FF9900;}
.gray {color: #666666;}
.rouge {color: #EB0000;}
.grass {color: green;}
// -->
</style>
The Style Sheet must be placed between the <head> and </head> tags. The first and last two lines begin and end the Style Sheet -- copy them exactly. I will discuss the third and fourth lines in the Face section. The remaining lines each define a color Class. The lines start with a period and a symbolic name (it is best not to use the same name as the color literal). Within the curly brackets ({}) is the word color: followed by a colon, a space, and either the RGB color number or the color literal, and finally a semicolon.

To invoke the color, add class="symbolic_name" to any tag. For instance: this text began with a <b class="grass"> tag. To only add color, use the Span tag: this text begins with the <span class="rouge"> tag. To change both the size and color, add the class= attribute to the Big, Small or Header tags (as I have done throughout this document).


face

Like the Color attribute, the Face attribute must use a Style Sheet for its substitution. Line 3 of the Style Sheet in the Color section sets the base font for the entire body of the document. This line replaces the <basefont> tag which is also deprecated in HTML 4. Line 4 of the Style Sheet sets a font face class. The line start with a period and a symbolic name (it is best not to use the same name as the font). Within the curly brackets ({}) is the word font-face: followed by a colon, a space, and one or more exact font names and/or a font family name separated by commas, and finally a semicolon. The font names must be exact; however capitalization is not required. Whenever possible, a Macintosh® font should be included in the list (e.g. Helvetica in the body list). A font family should also should also be included. There are 5 font families: serif (e.g. Times New Roman or Times), sans-serif (e.g. Verdana or Helvetica), monospace (e.g. Courier), cursive (e.g. Comic Sans MS), fantasy (e.g. Fantasy varies, often Dingbats).

To change the font face, as with color, include the class="symbolic_name" to any tag. For instance: this text began with a <b class="fontchange"> tag.


<dir> & <menu>

These tags fell out of favor some time ago. Substitute the Unordered List (<ul>) for any remaining instances of these tags.


<center>

The Center tag has multiple direct, equivalent substitution:
  1. substitute <div align="center"> for all Center tags(<center>)
  2. substitute </div> for all end Center tags(</center>)
Centering can also be done using the <p align="center"> ... </p>; however, this can only align one paragraph at a time. To avoid this inconvenience, use the Div tag.

In addition to these two methods, the align="center" or, preferably, the style="text-align: center" attribute can be added to most tags (e.g. the tables on this page). If a tag is always centered, it can be defined in the CSS Style Sheet. For example:
h1, h2, hr {text-align: center;}
in the style sheet of this page indicates that all H1 and H2 headers as well as Horizontal rules should be centered.


<xmp> & <plaintext>

The Example and Plaintext tags do not have an exact substitute. Version 5 & 6 browsers substitute the Pre tag, but it does not perform all of the same functions. Like the Pre tag, the Example and Plaintext tags renders text in a non-proportional font with all spaces and carriage returns preserved. Unlike the Pre tag, the Example and Plaintext tags ignored all other tags and special characters in the text.

To properly substitute the Pre tag, perform the following steps in the exact order shown:

  1. In the text to be surrounded by the Pre tags, substitute &amp; for all ampersands (&)
  2. Substitute &lt; for all less than angle brackets (<) and substitute &gt; for all greater than angle brackets (>)


<listing>

The Listing tag is nearly identical to the Pre tag which should be used as a substitute. The only difference is that the Listing tag sometimes rendered the text one size smaller than other text. To exactly match this functionality, enclose the Pre tags in Small tags or add style="text-size: smaller" to the Pre tag.


<nobr>

The No-break tag can be replaced with the CSS style="white-space: nowrap;" in the surrounding tags or surround the text with <span style="white-space: nowrap;"> tags. The <WBR> tag has been reintroduced in HTML5.


Frames

CSS has the ability to do absolute placement of block level elements (e.g. div, p, header, footer, section, article, aside, nav). This can be used as a rough aproximation of frames; however, the method is not as straight forward as frames and is not as flexible. The redesign of this page to eliminate frames required a series of compromises that were not necessary in the old framed page. Among the many problems are the inability to set up multiple frames using percentages and the inability to dynamically resize the frames.