Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Expression Web

2010092101 Email to Ronx
 

Modern replacements for deprecated attributes

Dealing with the outdated tags and attributes, and newer constructs warning in Expression Web


When using Expression Web to edit a page originally produced in FrontPage some HTML tags or attributes may be underlined with an informative message indicating the tag or attribute should be changed to something else.

For example, consider the table depicted below:

Split view showing deprecated attribute

The width="200" is a deprecated attribute in XHTML - deprecated in this context means that there is a better way. Hovering over the red wavy line shows the error message:

The World Wide Web Consortium now regards the attribute "width" as outdated. Newer constructs are recommended

Below is a list of the more common "outdated" HTML elements or attributes, and the corresponding "newer constructs"

HTML Elements Newer Construct Comments and Examples
font CSS:
various attributes
The <font> tag is replaced by the CSS font, color and background attributes. This can be used to set text colour, size, style, font-family etc.
nobr CSS:
white-space: nowrap
The <nobr> and </nobr> tags are replaced by the white-space attribute in CSS styles sheets, style blocks or inline styles. For example:
<nobr>Web Faqs</nobr>  becomes
<span style="white-space: nowrap;">Web Faqs</span>

<nobr> tags are commonly used in FrontPage navigation bars. The tag has been illegal HTML since HTML2 - illegal meaning not in the tag definitions for the version of HTML in use.
AttributesNewer Construct Comments and Examples
width CSS width="200" is replaced by width: 200px; in a style sheet, style block or inline style.
height CSS height="200" is replaced by height: 200px; in a style sheet, style block or inline style.
align CSS align="center" is replaced by text-align: center; in a style sheet, style block or inline style.
valign CSS valign="top" is replaced by vertical-align: top; in a style sheet, style block or inline style.
bgcolor CSS bgcolor="white" is replaced by background-color: white; in a style sheet, style block or inline style. bgcolor is ignored by FireFox and some other (non IE) browsers.
bgsound <object> Use the <embed> or <object> tags within the page to embed a background sound. FireFox requires the <object> tag, whereas older versions of IE need the <embed>. <embed> can be placed inside an <object>. bgsound does not work in FireFox.
bordercolordark bordercolorlight CSS bordercolorlight and bordercolordark are attributes that only work in Internet Explorer, usually applied to a table's borders. These should be replaced with attribute border-color: #cccccc;  in a style block where #cccccc is the appropriate colour. The attribute should be added to the style definitions for the table, th and td tags.
clear CSS clear="all"
clear="left"
clear="right"
are replaced by clear:both;
clear:left;
clear:right;

Examples

<table border="1" bordercolorlight="#999999" bordercolordark="#eeeeee">
<tr>
<td>some content</td>
</tr>
</table>

is split into two parts - a style block placed in the <head> of the page (or in an external style sheet), plus a replacement for the original markup.

The style block is:

<style type="text/css">
table {border: 1px solid #999999;}
td {border: 1px solid #eeeeee;}
</style>

and the replacement markup is:

<table>
<tr>
<td>some content</td>
</tr>
</table>

The code segment:

<td valign="top" align="center" bgcolor="white" width="200" height="50">
<font color="red">blah blah</font>
</td>

can be written (using inline styles) as:

<td style="text-align: center; vertical-align: top; background: white;
 width: 200px; height: 50px; color: red;">
blah blah
</td>

though placing the styles in a style block is usually better practice, since they can be reused elsewhere in the page or web site.