Using Web Standards in your Web Pages

  • Revision slug: Using_Web_Standards_in_your_Web_Pages
  • Revision title: Using Web Standards in your Web Pages
  • Revision id: 37054
  • Created:
  • Creator: Remember the dot
  • Is current revision? No
  • Comment fixed some typos

Revision Content

"Browser makers are no longer the problem. The problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers."

A number of elements and practices for adding DHTML to web pages were excluded from the W3C HTML 4.01 and Document Object Model (DOM) specifications. Elements like <LAYER> and collection of objects like document.layers[] (Netscape 4) or document.all (Internet Explorer 5+), for example, are actually not a part of any web standard. Browsers that comply with the W3C web standards, such as Firefox, Mozilla and Netscape 6/7, do not support these non-compliant elements and these proprietary DOM collections.

This article provides an overview of the process for upgrading the content of your web pages to conform to the W3C web standards. The various sections identify some practices which are at odds with the standards and suggest replacements. Every proposed web standards replacement in this article has been tested, verified and is working without a problem in modern browsers like MSIE 6, Netscape 7+, Firefox 1.x, Opera 7+, Safari 1.2+, Konqueror 3.x, etc. The final section, {{template.Anch("Summary of changes")}}, outlines all the changes described in this article.


Upgrading layer elements (Netscape 4)

This section explains how to replace Netscape 4 <layer> and <ilayer> elements with standards-compliant HTML 4.01. Because <layer> and <ilayer> elements are not part of any W3C web standards, Netscape 6/7, Firefox and Mozilla and other browsers that comply with the W3C web standards do not support <layer> and <ilayer> elements.

The document.layers[] collection of objects and other specific features of the Netscape 4 Layer DOM are not supported either and are discussed the {{template.Anch("Using the W3C DOM")}} section below.

In Netscape 4, <layer> elements are used primarly for two purposes:

  1. to embed external HTML content inside a webpage and
  2. to position a defined block of HTML content; such block of HTML content is usually named, referred as layer or DHTML layer by web authors, books and references.

Replacing <layer> and <ilayer> as embedded external HTML content

If you have:

<LAYER SRC="foo.html" height="300" width="400"> </LAYER>

... then you can for HTML 4.01 Transitional documents replace it with:

<iframe src="foo.html" height="300" width="400">
  <a href="foo.html">Foo content</a>
</iframe>

Note: User agents and very old visual browsers which do not support IFRAME (like Netscape 4) will render its content: here, it is a link. In this manner, accessibility to content (content degradation) for older browsers is assured and is as graceful as it can be.

... or, for HTML 4.01 Strict documents, you can replace it with:

<object data="foo.html" type="text/html" height="300" width="400">
  <a href="foo.html">Foo content</a>
</object>

Note: Again, the link will be rendered in user agents and browsers which do not support the object element, therefore assuring access to content.

The general accessibility strategy when using <iframe> or <object> is to embed the most common and most supported element inside <iframe> or <object>: that way, an user agent which is not able to render the <iframe> or <object> will render its content serving it as an alternative. The general rule applied by most browsers when meeting an unknown element is to render its content as best as it can.1

More on embedding HTML content:

Notes on embedded documents from W3C HTML 4.01

1 "If a user agent encounters an element it does not recognize, it should try to render the element's content.": Notes on invalid documents

Replacing <layer> as positioned block of HTML content

To upgrade positioned <layer> elements, the best W3C web standards compliant replacement is to use <div>. A <div> element can not transclude, can not import HTML content external to the webpage; so, defining a src attribute in a <div> element will be ignored by W3C compliant browsers.

If you have

<LAYER style="position: absolute;" top="50" left="100"
width="150" height="200">
   ... content here ...
</LAYER>

then you can replace it with:

<div style="position: absolute; top: 50px; left: 100px;
width: 150px; height: 200px;">
   ... content here ...
</div>

Deprecated Elements

The function of several of the deprecated elements (and of some excluded elements, as well) has been assumed by the W3C Cascading Style Sheets recommendation. Style sheets provide powerful presentation and organization capabilities. A full discussion of CSS is beyond the scope of this document.

APPLET

The APPLET element has been deprecated in HTML 4.01 in favor of OBJECT.

<p>
    <applet code="HelloWorldApplet.class" width="350" height="200">
        Your browser does not seem to have java support enabled or it does not have a Java Plug-in.<br/>
        <a href="http://www.java.com/en/download/manual.jsp">You can download the latest Java Plug-in here. (free download; 15MB)</a>
    </applet>
</p>

can be converted to:

<p>
    <!-- Mozilla 1.x, Firefox 1.x, Netscape 7+, and others will use the outer object -->
    <object classid="java:HelloWorldApplet.class" width="350" height="200">
        
        <!-- IE will use the inner object -->
        <object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="350" height="200" codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0" codetype="application/java">
            <param name="code" value="HelloWorldApplet.class"/>
            
            <!-- Browsers without Java support will display this message -->
            <p>
                Your browser does not seem to have java support enabled or it does not have a Java Plug-in.<br>
                <a href="http://www.java.com/en/download/manual.jsp">You can download the latest Java Plug-in here. (free download; 15MB)</a>
            </p>
        </object>
    </object>
</p>

The above code will work for MSIE 6, Mozilla-based browsers and other standards-based browsers; also, it will validate in either HTML 4.01 transitional or HTML 4.01 strict.

Explanations on the code:

According to HTML 4.01 recommendation, when an <object> is not rendered (e.g. because its content type is unsupported or e.g. because the browser does not support the ActiveX control called, requested by the <object>), then the browser should render its contents instead: here, it is another <object>, an alternate <object>. Here, the outer <object> will be rendered by most browsers, and the inner <object> will be rendered by IE.

classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93":

this clsid value identifies an ActiveX control; in MSIE 6, it makes the browser use the highest possible version (installed on the user's machine) of JRE. Sometimes, MSIE 6 users have several JRE plug-in versions installed.

codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0":

the codebase defines the minimum version for the JRE; here it is 1.4.2. In case the browser does not have a java plug-in or if its version is earlier than 1.4.2, then an automatic download of the latest 1.4.2 version will start. This may be a debatable choice: on one hand, the latest available JRE plug-in has several security patches and bug fixes, on the other hand, forcing a 15MB download without a prior explicit consent of the user can not be best.

More on applet to object conversion:

FONT

The deprecated FONT element is still frequently seen in webpages; its purpose is to specify typeface, color and size of the enclosed text. This functionality has been offloaded from HTML to CSS. The FONT element can be directly replaced with a SPAN element that includes the same style information:

<P><FONT color="blue" face="Helvetica">
A really <FONT size="+1">big</FONT> shoe.
</FONT></P>

... becomes:

<P><SPAN style="color: blue; font-family: Helvetica, sans-serif;">
A really <SPAN style="font-size: larger;">big</SPAN> shoe.
</SPAN></P>

... or even more concisely:

<P style="color: blue; font-family: Helvetica, sans-serif;">
A really <SPAN style="font-size: larger;">big</SPAN> shoe.
</P>

This is appropriate usage for a local change to the font. However, this is not the best use of styles; the strength of CSS lies in the ability to gather text and other styling into logical groupings that can be applied across a document, without repeating the specific styling on every element that requires it.

More on conversion of <FONT>:

W3C Quality Assurance tip for webmaster:

Care With Font Size, Recommended Practices: Forget <font>, use CSS

Other deprecated elements and deprecated attributes

Deprecated Element and Attribute W3C Replacement
CENTER or align="center" CSS1: text-align: center
The text-align property specifies how text or inline elements are aligned within an element.
CENTER or align="center" CSS1: margin-left: auto; margin-right: auto; for block-level elements
When both margin-left and margin-right are auto they are set to equal values, thus centering a block-level element within its parent.
CSS1 horizontal formating
Worth mentioning is the excellent tutorial:
Centring using CSS by D. Dorward
bgcolor attribute CSS1: background-color: ;
CSS1 background-color
S
STRIKE
CSS1: text-decoration: line-through;
CSS1 text-decoration
U CSS1: text-decoration: underline;
CSS1 text-decoration
DIR
MENU
HTML 4.01: <UL>

Recommendable resources, tutorials on learning, using CSS and on upgrading webpages thanks to CSS:

Other excluded elements

There are a number of proprietary elements used for animation and other tricks that are not a part of any web standard. This section highlights those elements and suggests practices for achieving the same effect with W3C HTML 4.01:

Excluded Element W3C Replacement
BLINK
NS2+
CSS1 text-decoration: blink;
User agents are required by the CSS1 specification to recognize the blink keyword, but not to support the blink effect, so CSS1-compliant browsers may or may not make the text blink on the screen. The best approach is not to make content blink at all.
MARQUEE
IE2+
HTML 4.01 DIV or SPAN, with content string rotated over time by JavaScript via the DOM level 1.
As with blinking text, this sort of effect is discouraged. Studies have shown that constantly moving objects or moving text disturb reading and weakens peripherical vision. DHTML marquee also greatly consumes user system resources (cpu, RAM) on tested browsers and will put modest systems under considerable stress. If after webpage assessment and consideration, you still want to include a marquee effect in your page, then you can use the following tutorials:
Cross-browser and web standard compliant Stock Ticker example by D. Rosenberg
Comprehensive web standard compliant alternative to <marquee> by D. Rosenberg
Note: Mozilla 1.4+, NS 7.2 and Firefox 1.x support the non-standard <marquee> element. On the other hand, users can disable such support using this tip
BGSOUND
IE2+
HTML 4.01 OBJECT, e.g.:
<object data="audiofile.wav" type="audio/wav">
See this DevEdge article for information on rendering a sound OBJECT invisible within the page.
Web page background sound often slows down considerably web page loading; like the text effects above, music or sound accompanying a page is seldom appreciated. According to the survey page What we really hate on the web, 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.
Why Playing Music on your Web Site is a Bad Idea by A. Gulez</object>
EMBED
NS2+,IE3+
HTML 4.01 OBJECT. See this DevEdge article for information on translating EMBED tags into OBJECT tags.
EMBED has never been part of a W3C HTML recommendation, yet it is still supported by Gecko and other modern browsers. Quality of support varies; Internet Explorer's support is incompatible with most Netscape plug-ins. Support for OBJECT is not universal, either, particularly for older browsers.

Using the W3C DOM

The document objects for some browsers have properties for accessing arrays of elements and types of elements. document.all[], for example, is used by Internet Explorer to access particular elements within the document. Many of these arrays were not made a part of the W3C specification for the Document Object Model and will cause JavaScript errors in standards-compliant browsers like Mozilla, Firefox and Netscape 6/7.

The W3C Document Object Model exposes almost all of the elements in an HTML page as scriptable objects. In general the attributes and methods of the W3C DOM are more powerful than the proprietary object models used in DHTML programming. The attributes and methods of the W3C DOM are overall well supported by modern browsers like MSIE 6, Opera 7+, Safari 1.x, Konqueror 3.x and Mozilla-based browsers (Firefox, Mozilla, Netscape 6/7): so there is no gain from relying on proprietary object models.

Unsupported DOM-related properties

The following document object properties are not supported in the W3C Document Object Model:

  • document.layers[]
  • id_attribute_value
  • document.all
  • document.all.id_attribute_value
  • document.all{{mediawiki.external('id_attribute_value')}}

The following form related properties (originally from Internet Explorer) are not supported in the W3C Document Object Model:

  • FormName.InputName.value
  • InputName.value
  • FormCtrlName
  • document.forms(0)

Scripts that use these properties will not execute in Firefox, Mozilla and Netscape 6/7 or other standards-compliant browsers. Instead, use the W3C DOM access attributes and access methods described in the next section; since these are supported by Internet Explorer too, then there is no need to use MSIE-specific attributes and methods.

Accessing elements with the W3C DOM

The best and most supported practice for getting scriptable access to an element in an HTML page is to use document.getElementById(id). All modern browsers (NS 6+, Mozilla, MSIE 5+, Firefox, Opera 6+, Safari 1.x, Konqueror 3.x, etc.) support document.getElementById(id). This method returns a reference to the uniquely identified element, which can then be used to script that element. For example, the following short sample dynamically sets the left margin of a div element with an id of "inset" to half an inch:

// in the HTML: <div id="inset">Sample Text</div>
document.getElementById("inset").style.marginLeft = ".5in";
IE-specific ways to access elements W3C web standards replacements
id_attribute_value document.getElementById(id_attribute_value)
document.all.id_attribute_value document.getElementById(id_attribute_value)
document.all{{mediawiki.external('id_attribute_value')}} document.getElementById(id_attribute_value)
FormName.InputName.value document.forms{{mediawiki.external('\"FormName\"')}}.InputName.value or
document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"InputName\"')}}.value
InputName.value document.forms{{mediawiki.external('\"FormName\"')}}.InputName.value or
document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"InputName\"')}}.value
FormCtrlName document.forms{{mediawiki.external('\"FormName\"')}}.FormCtrlName or
document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"FormCtrlName\"')}}
document.forms(0) document.forms{{mediawiki.external(0)}}

More on accessing forms and form elements:

Referencing Forms and Form Controls by comp.lang.javascript newsgroup FAQ notes

DOM 2 specification on accessing forms and form elements

For accessing a group of elements, the DOM specification also includes getElementsByTagName, which returns a list of all the elements with the given tag name in the order they appear in the document:

var arrCollection_Of_Anchors = document.getElementsByTagName("a");
var objFirst_Anchor = arrCollection_Of_Anchors[0];
alert("The url of the first link is " + objFirst_Anchor.href);

In addition to these access methods, the W3C DOM2 specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events raised as the user interacts with the document itself.

Manipulating document style and content

Changing an element's style using the DOM

The following table describes standards-based methods for accessing and updating style rules defined for various HTML elements in a web page. See the W3C DOM2 Recommendation, CSS2 Extended Interface.

DOM level 2 provides for the assignment of new values to the CSS properties of an element using the ElemRef.style object reference. You can get a reference to the element to which that style corresponds by using the DOM's getElementById or one of the other methods described in {{template.Anch("Accessing elements with the W3C DOM")}} above.

Deprecated coding practices Appropriate DOM 2 replacements
NS4: ElemRef.visibility = value; DOM level 2: ElemRef.style.visibility = value;
NS4: ElemRef.left
IE5+: ElemRef.style.pixelLeft
DOM level 2: parseInt(ElemRef.style.left, 10)
NS4: ElemRef.top
IE5+: ElemRef.style.pixelTop
DOM level 2: parseInt(ElemRef.style.top, 10)
NS4: ElemRef.moveTo(x,y);
IE5+: ElemRef.style.pixelLeft = x;
ElemRef.style.pixelTop = y;
DOM level 2:
ElemRef.style.left = x + "px";
ElemRef.style.top = y + "px";
W3C DOM2 reflection of an element's CSS properties

Keep in mind that according to the W3C Recommendation, the values returned by the style property of an element reflect static settings in the element's STYLE attribute only, not the total "computed style" that includes any inherited style settings from parent elements. Therefore, if you wish to read and write these properties from JavaScript through the DOM2, use one of these two approaches:

  1. Place all of the element's static CSS declarations (if it has any) in the element's STYLE attribute.
  2. Use no static CSS declarations for the element and initialize its CSS properties from JavaScript through the DOM.
W3C DOM2 reflection of an element's CSS positioning properties

The values returned by the W3C DOM2 style.left and style.top properties are strings that include the CSS unit suffix (such as "px"), whereas Netscape 4 ElemRef.left and IE5+ ElemRef.style.pixelLeft (and the corresponding properties for top) return an integer. So, if you want to get the element's inline STYLE settings for left and top as integers, parse the integer from the string by using parseInt(). Conversely, if you want to set the element's inline STYLE settings for left and top, make sure to construct a string that includes the unit (such as "140px") by appending the unit string to the integer value.

CSS1 and CSS 2.x specifications require that non-zero values must be specified with a length unit; otherwise, the css declaration will be ignored. Mozilla-based browsers, MSIE 6, Opera 7+ and other W3C standards-compliant browsers enforce such handling of parsing error.

CSS1 Forward-compatible parsing

CSS2.1 Rules for handling parsing errors

Changing the element's text using the DOM

Changing the actual text content of an element has changed substantially compared to the normal means of operation. Each element's content is broken up into a set of child nodes, consisting of plain text and sub-elements. In order to change the text of the element, the script operates on the node.

The node structure and supporting methods are defined in the W3C DOM level 1 recommendation.

If the element has no sub-elements, just text, then it (normally) has one child node, accessed as ElemRef.childNodes{{mediawiki.external(0)}}. In such precise case, the W3C web standards equivalent of ElemRef.innerText is ElemRef.childNodes{{mediawiki.external(0)}}.nodeValue.

The following examples show how to modify the text of a SPAN element that already exists in the HTML file.

<body>
  <P>Papa's got <SPAN id="dynatext">a lot of nerve</SPAN>!</P>

  <script type="text/javascript">
    // get reference to the SPAN element
    var SpanElemRef = document.getElementById("dynatext");

    // implement SpanElemRef.innerText = "a brand new bag"
    var new_txt = document.createTextNode("a brand new bag");
    SpanElemRef.replaceChild(new_txt, SpanElemRef.childNodes[0]);

    // alternate, slightly more dangerous implementation
    //   (will not work if childNodes[0] is not a text node)
    SpanElemRef.childNodes[0].nodeValue = "a brand new bag";

    // implement SpanElemRef.innerHTML = "a brand <b>new</b> bag"
    var new_el = document.createElement(SpanElemRef.nodeName);
    new_el.appendChild(document.createTextNode("a brand "));
    var bold_el = document.createElement("B");
    bold_el.appendChild(document.createTextNode("new"));
    new_el.appendChild(bold_el);
    new_el.appendChild(document.createTextNode(" bag"));
    span_el.parentNode.replaceChild(new_el, SpanElemRef);
  </script>
</body>

The first example shows the relatively simple method of replacing the text in the SPAN by substituting a new text node for the original. The assumption here is that the SPAN has a single, text child; the code would work even if that were not true, but the results might be unexpected.

The second example shows a more concise but brute-force technique of accomplishing the same thing. As noted, if the first child node is not a text node, this action will not work: although sub-element nodes have a nodeValue, the contents of that field are not displayed in the document.

The final example shows a technique equivalent to setting innerHTML. First, it constructs a new element, created as the same type (SPAN) as the original. Next it adds three nodes: an initial text node, a B element with its own text node, and a final text node. The script then accesses the SPAN element's parent (the P element), and substitutes the new element for the original SPAN in the parent's list of child nodes.

It should be clear that translating scripts to modify document content is not a trivial undertaking. The benefit of such a conversion is that the script will work in modern, W3C DOM-compliant browsers such as Netscape 6/7 and other Gecko-based programs. Requirements of backward compatibility, however, will not only prolong but worsen the difficulties of dealing with multiple platforms.

Developing cross browser/cross platform pages

An important practice when doing cross-browser, cross-platform pages and DHTML development involves the ability to determine the capabilities of the browser which loads your web page. As a web author, you understandably want to avoid script errors and page layout problems and you may want to ensure your scripts reach as wide an audience as possible. There are 2 known approaches for such goals: the browser identification approach (also known as userAgent string detection and often referred as "browser sniffing") and the Object/Feature support detection approach. The browser identification approach is now known to be complicated, unreliable and difficult to maintain.

Browser identification approach (aka "browser sniffing"): not best, not reliable approach

This approach, still commonly used nowadays, attempts to identify the browser and makes the web author at design time decide what that implies in terms of capabilities of the visiting browser. Such approach is fraught with problems and difficulties. It requires from the web author to have knowledge of the capabilities of all current browsers that may visit the page and then to code appropriately for these. It requires from the web author to make assumptions about what will happen with future browsers or to decide to provide future browsers a safe fallback service. It assumes that web authors are able to correctly identify browsers and browser versions in the first place... which is far from being a reliable and easy task to achieve.

The browser identification approach relies on functions that check the browser type string value and browser version string value and that search for certains characters or sub-strings in the navigator.userAgent property string. Once "detected", the web author then uses different functions (aka code branching) or points the user to different pages (aka site branching) or web content. Site branching can be particularly dangerous as people may enter a page through a link, bookmark, search engine or cache with a "wrong" browser.

Let's see a basic example of this approach.

Incorrect Example
if (navigator.appVersion.charAt(0) == "7")
{
   if (navigator.appName == "Netscape")
   {
     isNS7 = true;
     alert("NS7");
   };
}
else if (navigator.appVersion.indexOf("MSIE") != -1)
   {
    isIE = true;
    alert("IE");
   };

While this kind of checking in the above code can work in a crude sense, sharp readers may wonder what happens when IE 7 is released or when an Opera 7.x user visits the page or even when an user with any non-Netscape browser starting with a "7" character in the appVersion string visits that page. As new browsers are released, it becomes necessary to make updates to such code which attempts to narrow down the browser and browser version and to make the appropriate switches.

Another major problem with this approach is that the browser identity can be "spoofed" because, in many modern browsers, the navigator.appVersion and navigator.userAgent string properties are user configurable strings. For example,

  • Firefox 1.x users and users of any/all Mozilla-based browsers can customize the "general.useragent.*" string properties to any value.
  • Opera 6+ allows users to set the browser identification string via a menu
  • MSIE uses the Windows registry
  • Safari and Icab browsers mask their browser identity under Internet Explorer or Netscape labels

A user or browser distributor can put what they want in the navigator.userAgent string and this may trick your code into executing a "wrong" block of code. Moreover, there are many cases where even the accurately-identified browser does not perform as it is reputed/expected to.

So if "browser sniffing" is unreliable and difficult, how do you code safely for different browsers and different browser versions? ...

Using object/feature detection approach: best and overall most reliable

When you use object/feature detection, you only implement those features whose support you have first tested and verified on the visiting browser. This method has the advantage of not requiring you to test for anything except whether the particular features you code are supported in the visiting browser.

Let's see a basic, simple object detection example.

Correct Example
function hideElement(id_attribute_value)
{
   if (document.getElementById &&
         document.getElementById(id_attribute_value) &&
            document.getElementById(id_attribute_value).style)
   {
   document.getElementById(id_attribute_value).style.visibility="hidden";
   };
}

// example:
// <button type="button" onclick="hideElement('d1');">hide div</button>
// <div id="d1">Some text</div>

These repeated calls to document.getElementById are not the most efficient way to check for the existence of particular objects or features in the browser's DOM implementation, but they serve to illustrate clearly how object detection works.

The top-level if clause looks to see if there is support for a method called getElementById on the document object, which is the one of the most basic levels of support for the DOM in a browser. If there is, the code sees if document.getElementById(id_attribute_value) returns a reference to an existing element, which it then checks for a style object. If the style object exists on the element, then it sets that object's visibility property. The browser will not error if you set this unimplemented property, so you do not need to check that the visiblity property itself exists.

So, instead of needing to know which browsers and browser versions support a particular DOM method (or DOM attribute or DOM feature), you can verify the support for that particular method in the visiting browser. With this approach, you ensure that all browsers -- including future releases and browsers whose userAgent strings you do not know about -- will continue working with your code.

More on object/feature detection:
A Strategy That Works: Object/Feature Detecting by comp.lang.javascript newsgroup FAQ notes
Browser detection - No; Object detection - Yes by Peter-Paul Koch

Summary of changes

This section outlines all of the element and practice updates described in this article. For a complete discussion of these items, see the sections in which they are described.

Proprietary or Deprecated Feature W3C Feature or Recommended Replacement
NS4 LAYER as positioned
block of HTML content
HTML 4.01 DIV
NS4 ILAYER iframe in HTML 4.01 transitional or
object in HTML 4.01 strict
NS4 LAYER SRC=, DIV SRC= iframe src= in HTML 4.01 transitional or
object data= in HTML 4.01 strict
IE2+ MARQUEE HTML 4.01 DIV plus scripting
NS2+ BLINK CSS1 text-decoration: blink;
IE2+ BGSOUND HTML 4.01 OBJECT
NS2+, IE3+ EMBED HTML 4.01 OBJECT
deprecated APPLET HTML 4.01 OBJECT
deprecated FONT HTML 4.01 SPAN plus
CSS1 color: ; font-family: ; font-size: ;
deprecated CENTER or align="center" CSS1 text-align: center; for inline elements
deprecated CENTER or align="center" CSS1 margin-left: auto; margin-right: auto;
for block-level elements
deprecated bgcolor CSS1 background-color: ;
deprecated U, S, STRIKE CSS1 text-decoration: underline, line-through;
deprecated DIR, MENU HTML 4.01 UL
Proprietary or Deprecated Feature W3C Feature or Recommended Replacement
NS4 document.layers[] DOM level 2:
document.getElementById(id)
IE5+
id_attribute_value
document.all.id_attribute_value
document.all{{mediawiki.external('<i>id_attribute_value</i>')}}
DOM level 2:
document.getElementById(id_attribute_value)
IE5+ FormName.InputName.value DOM level 1:
document.forms{{mediawiki.external('\"<i>FormName</i>\"')}}.InputName.value
IE5+ InputName.value DOM level 1:
document.forms{{mediawiki.external('\"<i>FormName</i>\"')}}.InputName.value
IE5+ FormCtrlName DOM level 1:
document.forms{{mediawiki.external('\"<i>FormName</i>\"')}}.FormCtrlName
IE5+ document.forms(0) DOM level 1:
document.forms{{mediawiki.external(0)}}
NS4 document.layers{{mediawiki.external('<i>id</i>')}}.document.write()
IE ElemRef.innerText
DOM Level 1 (Core) interface
NS4 ElemRef.visibility = value; DOM level 2:
ElemRef.style.visibility = value;
NS4 ElemRef.left
IE5+ ElemRef.style.pixelLeft
DOM level 2:
parseInt(ElemRef.style.left, 10)
NS4 ElemRef.top
IE5+ ElemRef.style.pixelTop
DOM level 2:
parseInt(ElemRef.style.top, 10)
NS4 ElemRef.moveTo(x, y);
IE5+ ElemRef.style.pixelLeft = x;
ElemRef.style.pixelTop = y;
DOM level 2:
ElemRef.style.left = x + "px";
ElemRef.style.top = y + "px";
Proprietary or Deprecated Feature W3C Feature or Recommended Replacement

You can learn more on using web standards from these sites:

Original Document Information

  • Author(s): Mike Cowperthwaite, Marcio Galli, Jim Ley, Ian Oeschger, Simon Paquet, Gérard Talbot
  • Last Updated Date: September 18, 2005
  • Copyright Information: Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license | Details.

Revision Source

<p>
</p>
<blockquote>"Browser makers are no longer the problem. The problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers."<div style="text-align:right;"><a class="external" href="http://webstandards.org/about/history/">-Web Standards Project</a></div></blockquote>
<p>A number of elements and practices for adding DHTML to web pages were excluded from the <a class="external" href="http://www.w3.org/">W3C</a> HTML 4.01 and Document Object Model (DOM) specifications. Elements like <code>&lt;LAYER&gt;</code> and collection of objects like <code>document.layers[]</code> (Netscape 4) or <code>document.all</code> (Internet Explorer 5+), for example, are actually not a part of any web standard. Browsers that comply with the W3C web standards, such as Firefox, Mozilla and Netscape 6/7, do not support these non-compliant elements and these proprietary DOM collections.
</p><p>This article provides an overview of the process for upgrading the content of your web pages to conform to the W3C web standards. The various sections identify some practices which are at odds with the standards and suggest replacements. Every proposed web standards replacement in this article has been tested, verified and is working without a problem in modern browsers like MSIE 6, Netscape 7+, Firefox 1.x, Opera 7+, Safari 1.2+, Konqueror 3.x, etc. The final section, {{template.Anch("Summary of changes")}}, outlines all the changes described in this article.
</p><p><br>
</p>
<h3 name="Upgrading_layer_elements_.28Netscape_4.29"> Upgrading layer elements (Netscape 4) </h3>
<p>This section explains how to replace Netscape 4 <code>&lt;layer&gt;</code> and <code>&lt;ilayer&gt;</code> elements with standards-compliant HTML 4.01. Because <code>&lt;layer&gt;</code> and <code>&lt;ilayer&gt;</code> elements are not part of any W3C web standards, Netscape 6/7, Firefox and Mozilla and other browsers that comply with the W3C web standards do not support <code>&lt;layer&gt;</code> and <code>&lt;ilayer&gt;</code> elements.
</p><p>The <code>document.layers[]</code> collection of objects and other specific features of the Netscape 4 Layer DOM are not supported either and are discussed the {{template.Anch("Using the W3C DOM")}} section below.
</p><p>In Netscape 4, <code>&lt;layer&gt;</code> elements are used primarly for two purposes:
</p>
<ol><li> to embed external HTML content inside a webpage and
</li><li> to position a defined block of HTML content; such block of HTML content is usually named, referred as layer or DHTML layer by web authors, books and references.
</li></ol>
<h4 name="Replacing_.3Clayer.3E_and_.3Cilayer.3E_as_embedded_external_HTML_content"> Replacing <code>&lt;layer&gt;</code> and <code>&lt;ilayer&gt;</code> as embedded external HTML content </h4>
<p>If you have:
</p>
<pre>&lt;LAYER SRC="foo.html" height="300" width="400"&gt; &lt;/LAYER&gt;
</pre>
<p>... then you can for HTML 4.01 Transitional documents replace it with:
</p>
<pre>&lt;iframe src="foo.html" height="300" width="400"&gt;
  &lt;a href="foo.html"&gt;Foo content&lt;/a&gt;
&lt;/iframe&gt;
</pre>
<p>Note: User agents and very old visual browsers which do not support IFRAME (like Netscape 4) will render its content: here, it is a link. In this manner, accessibility to content (content degradation) for older browsers is assured and is as graceful as it can be.
</p><p>... or, for HTML 4.01 Strict documents, you can replace it with:
</p>
<pre>&lt;object data="foo.html" type="text/html" height="300" width="400"&gt;
  &lt;a href="foo.html"&gt;Foo content&lt;/a&gt;
&lt;/object&gt;
</pre>
<p>Note: Again, the link will be rendered in user agents and browsers which do not support the object element, therefore assuring access to content.
</p><p>The general accessibility strategy when using <code>&lt;iframe&gt;</code> or <code>&lt;object&gt;</code> is to embed the most common and most supported element inside <code>&lt;iframe&gt;</code> or <code>&lt;object&gt;</code>: that way, an user agent which is not able to render the <code>&lt;iframe&gt;</code> or <code>&lt;object&gt;</code> will render its content serving it as an alternative. The general rule applied by most browsers when meeting an unknown element is to render its content as best as it can.<sup>1</sup>
</p><p>More on embedding HTML content:
</p><p><a class="external" href="http://www.w3.org/TR/html401/struct/objects.html#h-13.5">Notes on embedded documents from W3C HTML 4.01</a>
</p><p><sup>1</sup> "If a user agent encounters an element it does not recognize, it should try to render the element's content.": <a class="external" href="http://www.w3.org/TR/html4/appendix/notes.html#h-B.1">Notes on invalid documents</a>
</p>
<h4 name="Replacing_.3Clayer.3E_as_positioned_block_of_HTML_content"> Replacing <code>&lt;layer&gt;</code> as positioned block of HTML content </h4>
<p>To upgrade positioned <code>&lt;layer&gt;</code> elements, the best W3C web standards compliant replacement is to use <code>&lt;div&gt;</code>. A <code>&lt;div&gt;</code> element can not transclude, can not import HTML content external to the webpage; so, defining a src attribute in a <code>&lt;div&gt;</code> element will be ignored by W3C compliant browsers.
</p><p>If you have
</p>
<pre>&lt;LAYER style="position: absolute;" top="50" left="100"
width="150" height="200"&gt;
   ... content here ...
&lt;/LAYER&gt;
</pre>
<p>then you can replace it with:
</p>
<pre>&lt;div style="position: absolute; top: 50px; left: 100px;
width: 150px; height: 200px;"&gt;
   ... content here ...
&lt;/div&gt;
</pre>
<h3 name="Deprecated_Elements"> Deprecated Elements </h3>
<p>The function of several of the deprecated elements (and of some excluded elements, as well) has been assumed by the W3C <a class="external" href="http://www.w3.org/TR/REC-CSS2/">Cascading Style Sheets</a> recommendation. Style sheets provide powerful presentation and organization capabilities. A full discussion of CSS is beyond the scope of this document.
</p>
<h4 name="APPLET"> APPLET </h4>
<p>The APPLET element has been deprecated in HTML 4.01 in favor of OBJECT.
</p>
<pre>&lt;p&gt;
    &lt;applet code="HelloWorldApplet.class" width="350" height="200"&gt;
        Your browser does not seem to have java support enabled or it does not have a Java Plug-in.&lt;br/&gt;
        &lt;a href="http://www.java.com/en/download/manual.jsp"&gt;You can download the latest Java Plug-in here. (free download; 15MB)&lt;/a&gt;
    &lt;/applet&gt;
&lt;/p&gt;
</pre>
<p>can be converted to:
</p>
<pre>&lt;p&gt;
    &lt;!-- Mozilla 1.x, Firefox 1.x, Netscape 7+, and others will use the outer object --&gt;
    &lt;object classid="java:HelloWorldApplet.class" width="350" height="200"&gt;
        
        &lt;!-- IE will use the inner object --&gt;
        &lt;object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="350" height="200" codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0" codetype="application/java"&gt;
            &lt;param name="code" value="HelloWorldApplet.class"/&gt;
            
            &lt;!-- Browsers without Java support will display this message --&gt;
            &lt;p&gt;
                Your browser does not seem to have java support enabled or it does not have a Java Plug-in.&lt;br&gt;
                &lt;a href="http://www.java.com/en/download/manual.jsp"&gt;You can download the latest Java Plug-in here. (free download; 15MB)&lt;/a&gt;
            &lt;/p&gt;
        &lt;/object&gt;
    &lt;/object&gt;
&lt;/p&gt;
</pre>
<p>The above code will work for MSIE 6, Mozilla-based browsers and other standards-based browsers; also, it will validate in either HTML 4.01 transitional or HTML 4.01 strict.
</p><p><b>Explanations on the code:</b>
</p><p>According to HTML 4.01 recommendation, when an <code>&lt;object&gt;</code> is not rendered (e.g. because its content type is unsupported or e.g. because the browser does not support the ActiveX control called, requested by the <code>&lt;object&gt;</code>), then the browser should render its contents instead: here, it is another <code>&lt;object&gt;</code>, an alternate <code>&lt;object&gt;</code>. Here, the outer <code>&lt;object&gt;</code> will be rendered by most browsers, and the inner <code>&lt;object&gt;</code> will be rendered by IE.
</p><p><b>classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93":</b>
</p>
<blockquote>this clsid value identifies an ActiveX control; in MSIE 6, it makes the browser use the highest possible version (installed on the user's machine) of JRE. Sometimes, MSIE 6 users have several JRE plug-in versions installed.</blockquote>
<p><b>codebase="<span class="plain">http://java.sun.com/products/plugin/autodl/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0</span>":</b>
</p>
<blockquote>the codebase defines the minimum version for the JRE; here it is 1.4.2. In case the browser does not have a java plug-in or if its version is earlier than 1.4.2, then an automatic download of the latest 1.4.2 version will start. This may be a debatable choice: on one hand, the latest available JRE plug-in has <b>several security patches</b> and bug fixes, on the other hand, forcing a 15MB download without a prior explicit consent of the user can not be best.</blockquote>
<p>More on applet to object conversion:
</p>
<ul><li> <a class="external" href="http://ww2.cs.fsu.edu/~steele/XHTML/appletObject.html">Java applet using &lt;object&gt; tag</a> by Shayne Steele
</li><li> <a class="external" href="http://www.w3.org/TR/html401/struct/objects.html#edef-APPLET">HTML 4.01 on Including an applet</a>
</li><li> <a class="external" href="http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT">HTML 4.01 on Including an object</a>
</li></ul>
<h4 name="FONT"> FONT </h4>
<p>The deprecated <code>FONT</code> element is still frequently seen in webpages; its purpose is to specify typeface, color and size of the enclosed text. This functionality has been offloaded from HTML to CSS. The <code>FONT</code> element can be directly replaced with a <code>SPAN</code> element that includes the same style information:
</p>
<pre>&lt;P&gt;&lt;FONT color="blue" face="Helvetica"&gt;
A really &lt;FONT size="+1"&gt;big&lt;/FONT&gt; shoe.
&lt;/FONT&gt;&lt;/P&gt;
</pre>
<p>... becomes:
</p>
<pre>&lt;P&gt;&lt;SPAN style="color: blue; font-family: Helvetica, sans-serif;"&gt;
A really &lt;SPAN style="font-size: larger;"&gt;big&lt;/SPAN&gt; shoe.
&lt;/SPAN&gt;&lt;/P&gt;
</pre>
<p>... or even more concisely:
</p>
<pre>&lt;P style="color: blue; font-family: Helvetica, sans-serif;"&gt;
A really &lt;SPAN style="font-size: larger;"&gt;big&lt;/SPAN&gt; shoe.
&lt;/P&gt;
</pre>
<p>This is appropriate usage for a local change to the font. However, this is not the best use of styles; the strength of CSS lies in the ability to gather text and other styling into logical groupings that can be applied across a document, without repeating the specific styling on every element that requires it.
</p><p>More on conversion of <code>&lt;FONT&gt;</code>:
</p><p><a class="external" href="http://www.w3.org/QA/Tips/font-size#goodpractice">W3C Quality Assurance tip for webmaster:</a>
</p><p><a class="external" href="http://www.w3.org/QA/Tips/font-size#goodpractice">Care With Font Size, Recommended Practices: Forget &lt;font&gt;, use CSS</a>
</p>
<h4 name="Other_deprecated_elements_and_deprecated_attributes"> Other deprecated elements and deprecated attributes </h4>
<table cellpadding="5px" class="toc" rules="all">
  <tbody><tr style="text-align:center;">
    <th>Deprecated Element and Attribute</th>
    <th>W3C Replacement</th>
  </tr>
  <tr>
    <td><code>CENTER</code> or <code>align="center"</code></td>
    <td>CSS1: <code><a class="external" href="http://www.w3.org/TR/REC-CSS1#text-align">text-align</a>: center</code><br>The text-align property specifies how text or inline elements are aligned within an element.</td>
  </tr>
  <tr>
    <td><code>CENTER</code> or <code>align="center"</code></td>
    <td>CSS1: <code>margin-left: auto; margin-right: auto;</code> for block-level elements<br>When both <code>margin-left</code> and <code>margin-right</code> are <code>auto</code> they are set to equal values, thus centering a block-level element within its parent.<br><a class="external" href="http://www.w3.org/TR/REC-CSS1#horizontal-formatting">CSS1 horizontal formating</a><br>Worth mentioning is the excellent tutorial:<br><a class="external" href="http://dorward.me.uk/www/centre/">Centring using CSS</a> by D. Dorward</td>
  </tr>
  <tr>
    <td><code>bgcolor</code> attribute</td>
    <td>CSS1: <code>background-color: ;</code><br><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS1 background-color</a></td>
  </tr>
  <tr>
    <td><code>S</code><br><code>STRIKE</code></td>
    <td>CSS1: <code>text-decoration: line-through;</code><br><a class="external" href="http://www.w3.org/TR/CSS1#text-decoration">CSS1 text-decoration</a></td>
  </tr>
  <tr>
    <td><code>U</code></td>
    <td>CSS1: <code>text-decoration: underline;</code><br><a class="external" href="http://www.w3.org/TR/CSS1#text-decoration">CSS1 text-decoration</a></td>
  </tr>
  <tr>
    <td><code>DIR</code><br><code>MENU</code></td>
    <td>HTML 4.01: <code>&lt;UL&gt;</code></td>
  </tr>
</tbody></table>
<p>Recommendable resources, tutorials on learning, using CSS and on upgrading webpages thanks to CSS:
</p>
<ul><li> <a class="external" href="http://www.westciv.com/style_master/academy/css_tutorial/">Complete CSS Guide</a>
</li><li> <a class="external" href="http://tutorials.alsacreations.com/">CSS lessons and tutorials</a>
</li><li> <a class="external" href="http://www.htmldog.com/">CSS lessons and tutorials</a>
</li><li> <a class="external" href="http://www.456bereastreet.com/lab/developing_with_web_standards/css/#css">Tips and resources on CSS</a>
</li></ul>
<h3 name="Other_excluded_elements"> Other excluded elements </h3>
<p>There are a number of proprietary elements used for animation and other tricks that are not a part of any web standard. This section highlights those elements and suggests practices for achieving the same effect with W3C HTML 4.01:
</p>
<table cellpadding="5px" class="toc" rules="all">
  <tbody><tr style="text-align:center;">
    <th>Excluded Element</th>
    <th>W3C Replacement</th>
  </tr>
  <tr>
    <td><code>BLINK</code><br><i>NS2+</i></td>
    <td>CSS1 <code>text-decoration: blink;</code><br>
User agents are required by the CSS1 specification to recognize the blink keyword, but not to support the blink effect, so CSS1-compliant browsers may or may not make the text blink on the screen. The best approach is not to make content blink at all.</td>
  </tr>
  <tr>
    <td><code>MARQUEE</code><br><i>IE2+</i></td>
    <td>HTML 4.01 DIV or SPAN, with content string rotated over time by JavaScript via the DOM level 1.<br>As with blinking text, this sort of effect is discouraged. Studies have shown that constantly moving objects or moving text disturb reading and weakens peripherical vision. DHTML marquee also greatly consumes user system resources (cpu, RAM) on tested browsers and will put modest systems under considerable stress. If after webpage assessment and consideration, you still want to include a marquee effect in your page, then you can use the following tutorials:<br><a class="external" href="http://developer-test.mozilla.org/docs/DHTML_Demonstrations_Using_DOM/Style:Stock_Ticker">Cross-browser and web standard compliant Stock Ticker example</a> by D. Rosenberg<br><a class="external" href="http://devedge-temp.mozilla.org/toolbox/examples/2002/xb/xbMarquee/index_en.html">Comprehensive web standard compliant alternative to &lt;marquee&gt;</a> by D. Rosenberg<br>Note: Mozilla 1.4+, NS 7.2 and Firefox 1.x support the non-standard <code>&lt;marquee&gt;</code> element. On the other hand, users can disable such support using <a class="external" href="http://www.mozilla.org/support/firefox/tips#lay_marquee">this tip</a></td>
  </tr>
  <tr>
    <td><code>BGSOUND</code><br><i>IE2+</i></td>
    <td>HTML 4.01 OBJECT, e.g.:<br><code><object data="audiofile.wav" type="audio/wav"><br>See <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/intro.html#1003240">this DevEdge article</a> for information on rendering a sound OBJECT invisible within the page.<br>Web page background sound often slows down considerably web page loading; like the text effects above, music or sound accompanying a page is seldom appreciated. According to the survey page <a class="external" href="http://www.lowendmac.com/musings/02/0528.html">What we really hate on the web</a>, 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.<br><a class="external" href="http://www.wowwebdesigns.com/power_guides/music_off.php">Why Playing Music on your Web Site is a Bad Idea</a> by A. Gulez</object></code></td>
  </tr>
  <tr>
    <td><code>EMBED</code><br><i>NS2+,IE3+</i></td>
    <td>HTML 4.01 OBJECT. See <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/intro.html#1003240">this DevEdge article</a> for information on translating <code>EMBED</code> tags into <code>OBJECT</code> tags.<br><code>EMBED</code> has never been part of a W3C HTML recommendation, yet it is still supported by Gecko and other modern browsers. Quality of support varies; Internet Explorer's support is incompatible with most Netscape plug-ins. Support for <code>OBJECT</code> is not universal, either, particularly for older browsers.</td>
  </tr>
</tbody></table><code>
<h3 name="Using_the_W3C_DOM"> Using the W3C DOM </h3>
<p>The <code>document</code> objects for some browsers have properties for accessing arrays of elements and types of elements. <code>document.all[]</code>, for example, is used by Internet Explorer to access particular elements within the document. Many of these arrays were not made a part of the W3C specification for the Document Object Model and will cause JavaScript errors in standards-compliant browsers like Mozilla, Firefox and Netscape 6/7.
</p><p>The <a class="external" href="http://www.w3.org/DOM/DOMTR">W3C Document Object Model</a> exposes almost all of the elements in an HTML page as scriptable objects. In general the attributes and methods of the W3C DOM are more powerful than the proprietary object models used in DHTML programming. <b>The attributes and methods of the W3C DOM are overall well supported by modern browsers like MSIE 6, Opera 7+, Safari 1.x, Konqueror 3.x and Mozilla-based browsers (Firefox, Mozilla, Netscape 6/7): so there is no gain from relying on proprietary object models.</b>
</p>
<h4 name="Unsupported_DOM-related_properties"> Unsupported DOM-related properties </h4>
<p>The following <code>document</code> object properties are not supported in the W3C Document Object Model:
</p>
<ul><li> <code>document.layers[]</code>
</li><li> <code>id_attribute_value</code>
</li><li> <code>document.all</code>
</li><li> <code>document.all.id_attribute_value</code>
</li><li> <code>document.all{{mediawiki.external('id_attribute_value')}}</code>
</li></ul>
<p>The following form related properties (originally from Internet Explorer) are not supported in the W3C Document Object Model:
</p>
<ul><li> <code>FormName.InputName.value</code>
</li><li> <code>InputName.value</code>
</li><li> <code>FormCtrlName</code>
</li><li> <code>document.forms(0)</code>
</li></ul>
<p>Scripts that use these properties will not execute in Firefox, Mozilla and Netscape 6/7 or other standards-compliant browsers. <b>Instead, use the W3C DOM access attributes and access methods described in the next section; since these are supported by Internet Explorer too, then there is no need to use MSIE-specific attributes and methods.</b>
</p>
<h4 name="Accessing_elements_with_the_W3C_DOM"> Accessing elements with the W3C DOM </h4>
<p><b>The best and most supported practice for getting scriptable access to an element in an HTML page is to use <code>document.getElementById(id)</code>.</b> All modern browsers (NS 6+, Mozilla, MSIE 5+, Firefox, Opera 6+, Safari 1.x, Konqueror 3.x, etc.) support <code>document.getElementById(id)</code>. This method returns <b>a reference to the uniquely identified element</b>, which can then be used to script that element. For example, the following short sample dynamically sets the left margin of a <code>div</code> element with an <code>id</code> of "inset" to half an inch:
</p>
<pre>// in the HTML: &lt;div id="inset"&gt;Sample Text&lt;/div&gt;
document.getElementById("inset").style.marginLeft = ".5in";
</pre>
<table cellpadding="5px" class="toc" rules="all">
  <tbody><tr style="text-align:center;">
    <th>IE-specific ways to access elements</th>
    <th>W3C web standards replacements</th>
  </tr>
  <tr>
    <td>id_attribute_value</td>
    <td>document.getElementById(id_attribute_value)</td>
  </tr>
  <tr>
    <td>document.all.id_attribute_value</td>
    <td>document.getElementById(id_attribute_value)</td>
  </tr>
  <tr>
    <td>document.all{{mediawiki.external('id_attribute_value')}}</td>
    <td>document.getElementById(id_attribute_value)</td>
  </tr>
  <tr>
    <td>FormName.InputName.value</td>
    <td>document.forms{{mediawiki.external('\"FormName\"')}}.InputName.value or<br>document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"InputName\"')}}.value</td>
  </tr>
  <tr>
    <td>InputName.value</td>
    <td>document.forms{{mediawiki.external('\"FormName\"')}}.InputName.value or<br>document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"InputName\"')}}.value</td>
  </tr>
  <tr>
    <td>FormCtrlName</td>
    <td>document.forms{{mediawiki.external('\"FormName\"')}}.FormCtrlName or<br>document.forms{{mediawiki.external('\"FormName\"')}}.elements{{mediawiki.external('\"FormCtrlName\"')}}</td>
  </tr>
  <tr>
    <td>document.forms(0)</td>
    <td>document.forms{{mediawiki.external(0)}}</td>
  </tr>
</tbody></table>
<p>More on accessing forms and form elements:
</p><p><a class="external" href="http://jibbering.com/faq/faq_notes/form_access.html">Referencing Forms and Form Controls</a> by comp.lang.javascript newsgroup FAQ notes
</p><p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357">DOM 2 specification on accessing forms and form elements</a>
</p><p>For accessing a group of elements, the DOM specification also includes <code>getElementsByTagName</code>, which returns a list of all the elements with the given tag name in the order they appear in the document:
</p>
<pre>var arrCollection_Of_Anchors = document.getElementsByTagName("a");
var objFirst_Anchor = arrCollection_Of_Anchors[0];
alert("The url of the first link is " + objFirst_Anchor.href);
</pre>
<p>In addition to these access methods, the W3C DOM2 specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events raised as the user interacts with the document itself.
</p>
<h4 name="Manipulating_document_style_and_content"> Manipulating document style and content </h4>
<h5 name="Changing_an_element.27s_style_using_the_DOM"> Changing an element's style using the DOM </h5>
<p>The following table describes standards-based methods for accessing and updating style rules defined for various HTML elements in a web page. See the W3C DOM2 Recommendation, <a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-extended">CSS2 Extended Interface</a>.
</p><p>DOM level 2 provides for the assignment of new values to the CSS properties of an element using the <code>ElemRef.style</code> object reference. You can get a reference to the element to which that style corresponds by using the DOM's <code>getElementById</code> or one of the other methods described in {{template.Anch("Accessing elements with the W3C DOM")}} above.
</p>
<table cellpadding="5px" class="toc" rules="all">
  <tbody><tr style="text-align:center;">
    <th>Deprecated coding practices</th>
    <th>Appropriate DOM 2 replacements</th>
  </tr>
  <tr>
    <td>NS4: <i>ElemRef</i>.visibility = <i>value</i>;</td>
    <td>DOM level 2: <i>ElemRef</i>.style.visibility = <i>value</i>;</td>
  </tr>
  <tr>
    <td>NS4: <i>ElemRef</i>.left<br>IE5+: <i>ElemRef</i>.style.pixelLeft</td>
    <td>DOM level 2: parseInt(<i>ElemRef</i>.style.left, 10)</td>
  </tr>
  <tr>
    <td>NS4: <i>ElemRef</i>.top<br>IE5+: <i>ElemRef</i>.style.pixelTop</td>
    <td>DOM level 2: parseInt(<i>ElemRef</i>.style.top, 10)</td>
  </tr>
  <tr>
    <td>NS4: <i>ElemRef</i>.moveTo(x,y);<br>IE5+: <i>ElemRef</i>.style.pixelLeft = x;<br><i>ElemRef</i>.style.pixelTop = y;</td>
    <td>DOM level 2:<br><i>ElemRef</i>.style.left = x + "px";<br><i>ElemRef</i>.style.top = y + "px";</td>
  </tr>
</tbody></table>
<h6 name="W3C_DOM2_reflection_of_an_element.27s_CSS_properties"> W3C DOM2 reflection of an element's CSS properties </h6>
<p>Keep in mind that according to the W3C Recommendation, the values returned by the style property of an element reflect static settings in the element's <code>STYLE</code> attribute only, not the total "computed style" that includes any inherited style settings from parent elements. Therefore, if you wish to read and write these properties from JavaScript through the DOM2, use one of these two approaches:
</p>
<ol><li> Place all of the element's static CSS declarations (if it has any) in the element's <code>STYLE</code> attribute.
</li><li> Use no static CSS declarations for the element and initialize its CSS properties from JavaScript through the DOM.
</li></ol>
<h6 name="W3C_DOM2_reflection_of_an_element.27s_CSS_positioning_properties"> W3C DOM2 reflection of an element's CSS positioning properties </h6>
<p>The values returned by the W3C DOM2 <code>style.left</code> and <code>style.top</code> properties are strings that include the CSS unit suffix (such as "px"), whereas Netscape 4 <code><i>ElemRef</i>.left</code> and IE5+ <code><i>ElemRef</i>.style.pixelLeft</code> (and the corresponding properties for top) return an integer. So, if you want to get the element's inline <code>STYLE</code> settings for left and top as integers, parse the integer from the string by using parseInt(). Conversely, if you want to set the element's inline STYLE settings for left and top, make sure to construct a string that includes the unit (such as "140px") by appending the unit string to the integer value.
</p><p><b>CSS1 and CSS 2.x specifications require that non-zero values must be specified with a length unit; otherwise, the css declaration will be ignored.</b> Mozilla-based browsers, MSIE 6, Opera 7+ and other W3C standards-compliant browsers enforce such handling of parsing error.
</p><p><a class="external" href="http://www.w3.org/TR/REC-CSS1#forward-compatible-parsing">CSS1 Forward-compatible parsing</a>
</p><p><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">CSS2.1 Rules for handling parsing errors</a>
</p>
<h5 name="Changing_the_element.27s_text_using_the_DOM"> Changing the element's text using the DOM </h5>
<p>Changing the actual text content of an element has changed substantially compared to the normal means of operation. Each element's content is broken up into a set of child nodes, consisting of plain text and sub-elements. In order to change the text of the element, the script operates on the node.
</p><p>The node structure and supporting methods are defined in the W3C <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM level 1</a> recommendation.
</p><p>If the element has no sub-elements, just text, then it (normally) has one child node, accessed as <code>ElemRef.childNodes{{mediawiki.external(0)}}</code>. In such precise case, the W3C web standards equivalent of <code>ElemRef.innerText</code> is <code>ElemRef.childNodes{{mediawiki.external(0)}}.nodeValue</code>.
</p><p>The following examples show how to modify the text of a <code>SPAN</code> element that already exists in the HTML file.
</p>
<pre>&lt;body&gt;
  &lt;P&gt;Papa's got &lt;SPAN id="dynatext"&gt;a lot of nerve&lt;/SPAN&gt;!&lt;/P&gt;

  &lt;script type="text/javascript"&gt;
    // get reference to the SPAN element
    var SpanElemRef = document.getElementById("dynatext");

    // implement SpanElemRef.innerText = "a brand new bag"
    var new_txt = document.createTextNode("a brand new bag");
    SpanElemRef.replaceChild(new_txt, SpanElemRef.childNodes[0]);

    // alternate, slightly more dangerous implementation
    //   (will not work if childNodes[0] is not a text node)
    SpanElemRef.childNodes[0].nodeValue = "a brand new bag";

    // implement SpanElemRef.innerHTML = "a brand &lt;b&gt;new&lt;/b&gt; bag"
    var new_el = document.createElement(SpanElemRef.nodeName);
    new_el.appendChild(document.createTextNode("a brand "));
    var bold_el = document.createElement("B");
    bold_el.appendChild(document.createTextNode("new"));
    new_el.appendChild(bold_el);
    new_el.appendChild(document.createTextNode(" bag"));
    span_el.parentNode.replaceChild(new_el, SpanElemRef);
  &lt;/script&gt;
&lt;/body&gt;
</pre>
<p>The first example shows the relatively simple method of replacing the text in the <code>SPAN</code> by substituting a new text node for the original. The assumption here is that the <code>SPAN</code> has a single, text child; the code would work even if that were not true, but the results might be unexpected.
</p><p>The second example shows a more concise but brute-force technique of accomplishing the same thing. As noted, if the first child node is not a text node, this action will not work: although sub-element nodes have a <code>nodeValue</code>, the contents of that field are not displayed in the document.
</p><p>The final example shows a technique equivalent to setting <code>innerHTML</code>. First, it constructs a new element, created as the same type (<code>SPAN</code>) as the original. Next it adds three nodes: an initial text node, a <code>B</code> element with its own text node, and a final text node. The script then accesses the <code>SPAN</code> element's parent (the <code>P</code> element), and substitutes the new element for the original <code>SPAN</code> in the parent's list of child nodes.
</p><p>It should be clear that translating scripts to modify document content is not a trivial undertaking. The benefit of such a conversion is that the script will work in modern, W3C DOM-compliant browsers such as Netscape 6/7 and other Gecko-based programs. Requirements of backward compatibility, however, will not only prolong but worsen the difficulties of dealing with multiple platforms.
</p>
<h3 name="Developing_cross_browser.2Fcross_platform_pages"> Developing cross browser/cross platform pages </h3>
<p>An important practice when doing cross-browser, cross-platform pages and DHTML development involves the ability to determine the capabilities of the browser which loads your web page. As a web author, you understandably want to avoid script errors and page layout problems and you may want to ensure your scripts reach as wide an audience as possible. There are 2 known approaches for such goals: the browser identification approach (also known as userAgent string detection and often referred as "browser sniffing") and the Object/Feature support detection approach. The browser identification approach is now known to be complicated, unreliable and difficult to maintain.
</p>
<h4 name="Browser_identification_approach_.28aka_.22browser_sniffing.22.29:_not_best.2C_not_reliable_approach"> Browser identification approach (aka "browser sniffing"): not best, not reliable approach </h4>
<p>This approach, still commonly used nowadays, attempts to identify the browser and makes the web author at design time decide what that implies in terms of capabilities of the visiting browser. Such approach is fraught with problems and difficulties. It requires from the web author to have knowledge of the capabilities of all current browsers that may visit the page and then to code appropriately for these. It requires from the web author to make assumptions about what will happen with future browsers or to decide to provide future browsers a safe fallback service. It assumes that web authors are able to correctly identify browsers and browser versions in the first place... which is far from being a reliable and easy task to achieve.
</p><p>The browser identification approach relies on functions that check the browser type string value and browser version string value and that search for certains characters or sub-strings in the <code>navigator.userAgent</code> property string. Once "detected", the web author then uses different functions (aka code branching) or points the user to different pages (aka site branching) or web content. Site branching can be particularly dangerous as people may enter a page through a link, bookmark, search engine or cache with a "wrong" browser.
</p><p>Let's see a basic example of this approach.
</p>
<div style="border:3px dashed #FF0000;padding:5px;"><font color="#666666"><b>Incorrect Example</b></font>
<pre>if (navigator.appVersion.charAt(0) == "7")
{
   if (navigator.appName == "Netscape")
   {
     isNS7 = true;
     alert("NS7");
   };
}
else if (navigator.appVersion.indexOf("MSIE") != -1)
   {
    isIE = true;
    alert("IE");
   };
</pre>
<p>While this kind of checking in the above code can work in a crude sense, sharp readers may wonder what happens when IE 7 is released or when an Opera 7.x user visits the page or even when an user with any non-Netscape browser starting with a "7" character in the appVersion string visits that page. As new browsers are released, it becomes necessary to make updates to such code which attempts to narrow down the browser and browser version and to make the appropriate switches.
</p>
</div>
<p>Another major problem with this approach is that the browser identity can be "spoofed" because, in many modern browsers, the <b><code>navigator.appVersion</code> and <code>navigator.userAgent</code> string properties are user configurable strings</b>. For example,
</p>
<ul><li> Firefox 1.x users and users of any/all Mozilla-based browsers can customize the "general.useragent.*" string properties to any value.
</li><li> Opera 6+ allows users to set the browser identification string via a menu
</li><li> MSIE uses the Windows registry
</li><li> Safari and Icab browsers mask their browser identity under Internet Explorer or Netscape labels
</li></ul>
<p><b>A user or browser distributor can put what they want in the <code>navigator.userAgent</code> string</b> and this may trick your code into executing a "wrong" block of code. Moreover, there are many cases where even the accurately-identified browser does not perform as it is reputed/expected to.
</p><p>So if "browser sniffing" is unreliable and difficult, how do you code safely for different browsers and different browser versions? ...
</p>
<h4 name="Using_object.2Ffeature_detection_approach:_best_and_overall_most_reliable"> Using object/feature detection approach: best and overall most reliable </h4>
<p>When you use object/feature detection, you only implement those features whose support you have first tested and verified on the visiting browser. This method has the advantage of not requiring you to test for anything except whether the particular features you code are supported in the visiting browser.
</p><p>Let's see a basic, simple object detection example.
</p>
<div style="border:3px double #00FF00;padding:5px;"><font color="#666666"><b>Correct Example</b></font>
<pre>function hideElement(id_attribute_value)
{
   if (document.getElementById &amp;&amp;
         document.getElementById(id_attribute_value) &amp;&amp;
            document.getElementById(id_attribute_value).style)
   {
   document.getElementById(id_attribute_value).style.visibility="hidden";
   };
}

// example:
// &lt;button type="button" onclick="hideElement('d1');"&gt;hide div&lt;/button&gt;
// &lt;div id="d1"&gt;Some text&lt;/div&gt;
</pre>
<p>These repeated calls to <code>document.getElementById</code> are not the most efficient way to check for the existence of particular objects or features in the browser's DOM implementation, but they serve to illustrate clearly how object detection works.
</p><p>The top-level if clause looks to see if there is support for a method called <code>getElementById</code> on the document object, which is the one of the most basic levels of support for the DOM in a browser. If there is, the code sees if <code>document.getElementById(id_attribute_value)</code> returns a reference to an existing element, which it then checks for a style object. If the style object exists on the element, then it sets that object's visibility property. The browser will not error if you set this unimplemented property, so you do not need to check that the visiblity property itself exists.
</p>
</div>
<p>So, instead of needing to know which browsers and browser versions support a particular DOM method (or DOM attribute or DOM feature), you can verify the support for that particular method in the visiting browser. With this approach, you ensure that all browsers -- including future releases and browsers whose userAgent strings you do not know about -- will continue working with your code.
</p><p>More on object/feature detection:<br>
<a class="external" href="http://jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD">A Strategy That Works: Object/Feature Detecting</a> by comp.lang.javascript newsgroup FAQ notes<br>
<a class="external" href="http://www.quirksmode.org/js/support.html">Browser detection - No; Object detection - Yes</a> by Peter-Paul Koch
</p>
<h3 name="Summary_of_changes"> Summary of changes </h3>
<p>This section outlines all of the element and practice updates described in this article. For a complete discussion of these items, see the sections in which they are described.
</p>
<table cellpadding="5px" class="toc" rules="all">
  <tbody><tr style="text-align:center;">
    <th>Proprietary or Deprecated Feature</th>
    <th>W3C Feature or Recommended Replacement</th>
  </tr>
  <tr>
    <td>NS4 <code>LAYER</code> as positioned<br>block of HTML content</td>
    <td>HTML 4.01 <a href="en/Using_Web_Standards_in_your_Web_Pages#Replacing_.3Clayer.3E_as_positioned_block_of_HTML_content">DIV</a></td>
  </tr>
  <tr>
    <td>NS4 <code>ILAYER</code></td>
    <td><a href="en/Using_Web_Standards_in_your_Web_Pages#Replacing_.3Clayer.3E_and_.3Cilayer.3E_as_embedded_external_HTML_content">iframe in HTML 4.01 transitional or<br>object in HTML 4.01 strict</a></td>
  </tr>
  <tr>
    <td>NS4 <code>LAYER SRC=, DIV SRC=</code></td>
    <td><a href="en/Using_Web_Standards_in_your_Web_Pages#Replacing_.3Clayer.3E_and_.3Cilayer.3E_as_embedded_external_HTML_content">iframe src= in HTML 4.01 transitional or<br>object data= in HTML 4.01 strict</a></td>
  </tr>
  <tr>
    <td>IE2+ <code>MARQUEE</code></td>
    <td>HTML 4.01 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_excluded_elements">DIV plus scripting</a></td>
  </tr>
  <tr>
    <td>NS2+ <code>BLINK</code></td>
    <td>CSS1 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_excluded_elements">text-decoration: blink;</a></td>
  </tr>
  <tr>
    <td>IE2+ <code>BGSOUND</code></td>
    <td>HTML 4.01 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_excluded_elements">OBJECT</a></td>
  </tr>
  <tr>
    <td>NS2+, IE3+ <code>EMBED</code></td>
    <td>HTML 4.01 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_excluded_elements">OBJECT</a></td>
  </tr>
  <tr>
    <td>deprecated <code>APPLET</code></td>
    <td>HTML 4.01 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes">OBJECT</a></td>
  </tr>
  <tr>
    <td>deprecated <code>FONT</code></td>
    <td>HTML 4.01 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes">SPAN plus<br>CSS1 color: ; font-family: ; font-size: ;</a></td>
  </tr>
  <tr>
    <td>deprecated <code>CENTER</code> or <code>align="center"</code></td>
    <td>CSS1 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes">text-align: center; for inline elements</a></td>
  </tr>
  <tr>
    <td>deprecated <code>CENTER</code> or <code>align="center"</code></td>
    <td>CSS1 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes">margin-left: auto; margin-right: auto;<br>for block-level elements</a></td>
  </tr>
  <tr>
    <td>deprecated <code>bgcolor</code></td>
    <td>CSS1 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes">background-color: ;</a></td>
  </tr>
  <tr>
    <td>deprecated <code>U, S, STRIKE</code></td>
    <td>CSS1 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes">text-decoration: underline, line-through;</a></td>
  </tr>
  <tr>
    <td>deprecated <code>DIR, MENU</code></td>
    <td>HTML 4.01 <a href="en/Using_Web_Standards_in_your_Web_Pages#Other_deprecated_elements_and_deprecated_attributes">UL</a></td>
  </tr>
  <tr style="text-align:center;">
    <th>Proprietary or Deprecated Feature</th>
    <th>W3C Feature or Recommended Replacement</th>
  </tr>
  <tr>
    <td>NS4 <code>document.layers[]</code></td>
    <td>DOM level 2:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Accessing_elements_with_the_W3C_DOM">document.getElementById(<i>id</i>)</a></td>
  </tr>
  <tr>
    <td>IE5+<br><code><i>id_attribute_value</i><br>document.all.<i>id_attribute_value</i><br>document.all{{mediawiki.external('&lt;i&gt;id_attribute_value&lt;/i&gt;')}}</code></td>
    <td>DOM level 2:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Accessing_elements_with_the_W3C_DOM">document.getElementById(<i>id_attribute_value</i>)</a></td>
  </tr>
  <tr>
    <td>IE5+ <code><i>FormName</i>.<i>InputName</i>.value</code></td>
    <td>DOM level 1:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Accessing_elements_with_the_W3C_DOM">document.forms{{mediawiki.external('\"&lt;i&gt;FormName&lt;/i&gt;\"')}}.<i>InputName</i>.value</a></td>
  </tr>
  <tr>
    <td>IE5+ <code><i>InputName</i>.value</code></td>
    <td>DOM level 1:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Accessing_elements_with_the_W3C_DOM">document.forms{{mediawiki.external('\"&lt;i&gt;FormName&lt;/i&gt;\"')}}.<i>InputName</i>.value</a></td>
  </tr>
  <tr>
    <td>IE5+ <code><i>FormCtrlName</i></code></td>
    <td>DOM level 1:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Accessing_elements_with_the_W3C_DOM">document.forms{{mediawiki.external('\"&lt;i&gt;FormName&lt;/i&gt;\"')}}.<i>FormCtrlName</i></a></td>
  </tr>
  <tr>
    <td>IE5+ <code>document.forms(0)</code></td>
    <td>DOM level 1:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Accessing_elements_with_the_W3C_DOM">document.forms{{mediawiki.external(0)}}</a></td>
  </tr>
  <tr>
    <td>NS4 <code>document.layers{{mediawiki.external('&lt;i&gt;id&lt;/i&gt;')}}.document.write()</code><br>IE <code><i>ElemRef</i>.innerText</code></td>
     <td><a href="en/Using_Web_Standards_in_your_Web_Pages#Manipulating_document_style_and_content">DOM Level 1 (Core) interface</a></td>
  </tr>
  <tr>
    <td>NS4 <code><i>ElemRef</i>.visibility = <i>value</i>;</code></td>
    <td>DOM level 2:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Manipulating_document_style_and_content"><i>ElemRef</i>.style.visibility = <i>value</i>;</a></td>
  </tr>
  <tr>
    <td>NS4 <code><i>ElemRef</i>.left</code><br>IE5+ <code><i>ElemRef</i>.style.pixelLeft</code></td>
    <td>DOM level 2:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Manipulating_document_style_and_content">parseInt(<i>ElemRef</i>.style.left, 10)</a></td>
  </tr>
  <tr>
    <td>NS4 <code><i>ElemRef</i>.top</code><br>IE5+ <code><i>ElemRef</i>.style.pixelTop</code></td>
    <td>DOM level 2:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Manipulating_document_style_and_content">parseInt(<i>ElemRef</i>.style.top, 10)</a></td>
  </tr>
  <tr>
    <td>NS4 <code><i>ElemRef</i>.moveTo(x, y);</code><br>IE5+ <code><i>ElemRef</i>.style.pixelLeft = x;</code><br><code><i>ElemRef</i>.style.pixelTop = y;</code></td>
    <td>DOM level 2:<br><a href="en/Using_Web_Standards_in_your_Web_Pages#Manipulating_document_style_and_content"><i>ElemRef</i>.style.left = x + "px";<br><i>ElemRef</i>.style.top = y + "px";</a></td>
  </tr>
  <tr style="text-align:center;">
    <th>Proprietary or Deprecated Feature</th>
    <th>W3C Feature or Recommended Replacement</th>
  </tr>
</tbody></table>
<p>You can learn more on using web standards from these sites:
</p>
<ul><li> <a class="external" href="http://webstandards.org/learn/faq/#p3">What are web standards and why should I use them?<br>What are the advantages of using web standards?</a> from <a class="external" href="http://webstandards.org/">Web Standards Project</a>
</li><li> <a class="external" href="http://www.w3.org/QA/2002/04/Web-Quality">Web Quality Assurance tips for webmasters:<br>My Web site is standard! And yours?</a> from <a class="external" href="http://www.w3.org/QA/Tips/">W3C Quality Assurance</a>
</li><li> <a class="external" href="http://maccaws.org/">Making A Commercial Case for Adopting Web Standards</a>
</li><li> <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/media-farm/index_en.html">Case Study in a Successful Standards-Based Migration</a>
</li><li> <a class="external" href="http://webstandardsgroup.org/standards/">Web Standards Group</a>
</li><li> <a class="external" href="http://developer.apple.com/internet/webcontent/bestwebdev.html">Web Page Development: Best Practices</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/web-developer/faq.html">Mozilla Web Author FAQ</a>
</li><li> <a class="external" href="http://www.reloco.com.ar/mozilla/compat.html">Making your web page compatible with Mozilla</a>
</li><li> <a class="external" href="http://www.westciv.com/style_master/academy/css_tutorial/">Complete CSS Guide</a>
</li><li> <a class="external" href="http://tutorials.alsacreations.com/">CSS lessons and tutorials</a>
</li><li> <a class="external" href="http://www.htmldog.com/">HTML and CSS lessons and tutorials</a>
</li><li> <a class="external" href="http://www.digital-web.com/articles/preparing_for_standard_compliant_browsers_part1/">Preparing for standard-compliant browsers, Part 1</a>
</li><li> <a class="external" href="http://www.digital-web.com/articles/preparing_for_standard_compliant_browsers_part2/">Preparing for standard-compliant browsers, Part 2</a>
</li></ul>
<div class="originaldocinfo">
<h2 name="Original_Document_Information"> Original Document Information </h2>
<ul><li> Author(s): Mike Cowperthwaite, Marcio Galli, Jim Ley, Ian Oeschger, Simon Paquet, Gérard Talbot
</li><li> Last Updated Date: September 18, 2005
</li><li> Copyright Information: Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.
</li></ul>
</div>
</code>
Revert to this revision