Skip to main content

Visit Mozilla.org

User:Dria:Migration Work (temp)

From MDC

"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." - Web Standards Project

This article provides an overview of the process for upgrading the content of your web pages to conform to the W3C web standards. The first 2 sections address exclusively validation issues, benefits of validation, deprecated elements, deprecated attributes. How to upgrade a webpage markup code to pass validation and how to implement CSS are addressed by providing recommendations, tutorials and references. The other sections address DOM and DHTML coding practices which are at odds with the W3C web standards and suggest replacements. Every proposed W3C web standards replacement in this article is working without a problem in modern browsers like MSIE 6+, Netscape 7+, Firefox 1+, Opera 8+, Safari 2.x, Konqueror 3.4+, Icab 3.x, etc. The final section, Summary of Changes, outlines all the changes described in this article.

Contents


[edit] Benefits of using web standards

The benefits of using web standards (W3C recommendations and language specifications regarding webpage authoring) are numerous, important, often underestimated and often misunderstood.

[edit] The benefits for valid markup

  • consistent cross-browser rendering
  • markup code is forward-compatible (future-proof)
  • webpage is more accessible
  • problems with a webpage are easier to identify, to debug and to fix when it uses valid markup code
  • webpages are faster to develop and easier to maintain

Valid markup code is important to achieve because of one particular reason which is often ignored: there is no error correction mechanism provided by the HTML 4.01 specification.

Note: HTML 4.01, Section B.1 Notes on invalid documents states:

"This [HTML 4.01] specification does not define how conforming user agents handle general error conditions, including how user agents behave when they encounter elements, attributes, attribute values, or entities not specified in this document."

So when a browser encounters a particular error in the markup code, the browser has no specific, predefined mechanism (or response) provided by the HTML 4.01 specification: the error part will be rendered in various ways by different browsers. Invalid markup code is outside the HTML 4.01 specification and is therefore rendered entirely thanks to non-standard browser interpretation. This phenomenon is particularly true for syntaxical errors such as:

  • missing end quote in attribute values: "There's also the missing quotes problem, e.g., leaving a close quote off a link href. Browsers employ complicated heuristics to try to match up unclosed quotes that depend on the number of quotes in the document, their positions, and other factors." from Hyatt's blog
  • Incorrect nesting of elements Elements must close in the right order; elements must not overlap each other.

    The following code example is invalid syntax because of incorrect nesting of elements: 

    <p>These are 2 <strong>strong words.</p></strong>

    This type of markup error happens often to beginners and to unaware web authors; it is detected and reported by HTML validators. An HTML validator will report this typical error message:

    "end tag for 'STRONG' omitted, but its declaration does not permit this. (...) you used something inside this tag that was not allowed, and the validator is complaining that the tag should be closed before such content can be allowed. (...)"

    The following code example is valid syntax and correct nesting of elements: 

    <p>These are 2 <strong>strong words</strong>.</p>

    More info:

  • misused or misplaced elements: Another frequently encountered markup error is to have a block-level element (e.g. <p>, <div>, <table>) nested inside an inline element (e.g. <span>, <strong>, <big>).

    The following markup code example is invalid syntax because an inline element (<b>) wraps a block-level element (<p>): 

    <b><p>This is a bold paragraph.</p></b>

    This type of markup error happens often to beginners and to unaware web authors; it is detected and reported by HTML validators. An HTML validator will report this typical error message:

    "document type does not allow element 'B' here (...) One possible cause for this message is that you have attempted to put a block-level element (such as '<p>' or '<table>') inside an inline element (such as '<a>', '<span>')."

    The following code example is valid markup syntax because the inline element (<b>) is nested inside the block-level element (<p>): 

    <p><b>This is a bold paragraph.</b></p>
Retrieved from "http://developer.mozilla.org/en/docs/User:Dria:Migration_Work_%28temp%29"