Skip to main content

Visit Mozilla.org

Using Web Standards in your Web Pages:Benefits of using web standards

From MDC


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

Contents

[edit] The benefits for valid markup code are

  • 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.

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. There is no correct or incorrect rendering when browsers encounter invalid markup code. 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 David 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:

incorrect nesting of elements explained at WDG

Tag Soup: How UAs handle <x> <y> </x> </y> by Ian Hickson

  • 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>

More info: Tag Soup: Blocks-in-inlines (for advanced people) by Ian Hickson

By avoiding invalid markup code, a web author reduces risks of causing overlapping elements, misaligned or misplaced elements or strange layout problems. In some cases, a browser may even crash when encountering malformed markup code.

First example of malformed markup code causing crash: The importance of human-readable markup (May 2003) by Mark Pilgrim

Second example example of malformed markup code causing crash: IE vertical-align:top vulnerability (October 2003) by Jehiah Czebotar

More reading on markup validation:

[edit] The benefits for clear separation of content from presentation aspects (font, color, padding, margin, border, etc.) thanks to CSS implementation are

  • smaller files and faster download (Note 1)
  • better layout control
  • better interoperability across platforms, devices and media (Note 2)
  • easier maintenance and increased opportunities

Note 1: Why use CSS to separate content from presentation? from MaxDesign
What is the separation of content and presentation? Why is it important? from maccaws.org
Note 2: HTML 4.01, Section 2.4.1 Separate structure and presentation:
"Experience has shown that separating the structure of a document from its presentational aspects reduces the cost of serving a wide range of platforms, media, etc., and facilitates document revisions."

Explaining in detail how to implement CSS in webpages would go beyond the scope of this article. For people wishing to implement CSS into their webpages, we recommend the following tutorials:

[edit] The benefits for using valid CSS code are

  • consistent cross-browser rendering
  • problems with a webpage, in particular a DHTML-driven webpage, are easier to identify, to debug and to fix when it uses valid CSS code

[edit] Reduced browser incompatibilities

In the last 5 years, browser vendors and web-aware software manufacturers have provided accessible bug reporting systems and have been consistently improving and correcting their HTML and CSS rendering engines when a webpage triggers standards compliant rendering mode. That is particularly true for Opera browser, Safari browser, Icab browser and Mozilla-based browsers. So with time, newer versions of browsers have lesser incompatibilities as they comply more closely to W3C specifications.

[edit] 2 risks regarding editing with a WYSIWYG HTML editor

Many web author amateurs create their webpages with a WYSIWYG HTML editor, ie a graphical HTML editor like MS-Front Page, Nvu, DreamWeaver, KompoZer, etc. One risk involved with this kind of edition is that edition relies too much on the visual feedback of the editor. There are many web browsers and web-aware softwares that access webpages, not just 1. What the web author sees (while editing his webpage with such kind of software) may not be what his visitors will see because of different browsers (or different browser versions of the same browser name) involved, different configurations of the same browser, different media, different devices, different contexts in use. WYSIWYG webpage editors often lead web authors to the mistaken belief that what they see (while editing their webpage) is/should be good enough for everyone else. Unless a web author can test his webpages in multiple browsers, in multiple environments, media, with various devices, etc, the only realistic test and valuable, recommendable checking is to validate the markup code (and CSS code) of a webpage with a HTML validator (and a CSS validator). Markup validation is not browser dependent or browser specific; all graphical HTML editors are browser dependent and browser specific.

Another risk with WYSIWYG HTML editors is that these softwares have a tendency to add superfluous code (like many <br> and &nbsp;) in order to position or to fix elements within the webpage or within the viewport. So even though the markup code may be valid, the end result is a non-scalable, rigid (screen resolution dependent) webpage filled with spacer.gif, <br> and &nbsp; which bloat the markup code. This goes against the purpose of a clean, lean, streamlined markup code. In this context, spacer.gif, <br> and &nbsp; can be replaced most of the time by a wise usage of CSS properties like padding, margin or clear. It is beyond the scope of this article to elaborate on this issue but we wish to indicate that many <br> and &nbsp; is often the sign of bloated markup code and of a non-scalable webpage.

[edit] References on benefits of using web standards

Retrieved from "http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages:Benefits_of_using_web_standards"