Web Standards

The web design community is now undergoing a similar shift in attitude, and web standards are key to this transformation. Standards can solve common problems of design and production. No book can cover every problem and solution. If your site must look great in 4.0 browsers, you might be interested in the hybrid techniques like XHTML, CSS, XML etc.

Hybrid layouts

Website must look almost as good(almost the same) in old noncompliant browsers as it does in newer. When a site that is big and commercial adopts CSS layout techniques, the day of web standards is at hand. Although the site initial use of standards was neither purist nor perfect (ESPN.com).

• All CSS positioning – there are no tables for layout in sponsored elements beyond the design teams control.
• No font tags.
• Page markup use more structure markup – greater bandwidth savings would be attained.
• Only one style sheet for all browser – the site looks more or less identical in all browsers.

The World Wide Web Consortium (W3C), along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call 'web standards', are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web. Designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market."

What are web standards?

Web standards are continuum, not a set of inflexible rules. In moving to web standards you might not achieve perfect separation of structure form presentation in your first site or even your fifth. Your early efforts at accessibility might deliver only the minimum required by WAI priority and you might not get all of it exactly right.

Structural Languages

• Extensible Hypertext Markup Language (XHTML) 1.0
• XHTML 1.1
• Extensible Markup Language (XML) 1.0

• Cascading Style Sheets (CSS) Level1.
• CSS Level2.
• CSS Leve3.

• Document Object Model (DOM) Level 1 (Core).
• DOM Level 2.

A document object model (DOM) is an approach that treats your document as a collection of individually addressable objects, rather than a single solid unit. This gives developers programmatic access to the components to enable dynamic display of web page contents.

Scripting Languages

• ECMAScript 262 (the standard version of JavaScript).

• Mathematical Markup Language (MathML) 1.01.
• MathML 2.0.
• Scalable Vector Graphics (SVG) 1.0.

The point is to begin, there might me a fear of imperfection
Our site won’t attain forward compatibility if we don’t start somewhere,
deleting font tags might be where you start. Or you might replace nonstructureal markup with meaning full <h….> and <p> tags this is often an excellent place , later we have to consider modern markup and XHTML.

How the web works and how it should be built is undergoing profound and continual transformation. Web standards will soon be as widely discussed and studied as we usability and information architecture and these will be considered as essential as disciplines No book can deliver all things to all people, and the books can give general direction whose path you must find your self. You might disagree which some parts, in six months or tow years from now, the point is to begin making changes that will help your projects reach the most people for the longest time, and often at the lowest cost.

Reasons to follow Web Standards

• Information Superhighway.
• Web is about delivering information.
• Design must be secondary.
• You cannot control what user agent will open the page, so you must be ready.
• Backward and forward compatibility is essential.

• Declare the DOCTYPE.
• Tag and attributes in lower case.
• Attributes must have quoted values .
• All tags must have an end tag (<br />).
• Nest tags correctly .
• Validate the page (http://validator.w3.org).

• More Accessible.
• Eliminates silly mistakes in code.
• Renders more accurately in browsers.
• Backward AND forward compatible.

• More compliant user agents get better designed / presented information.
• Not committed to one platform / browser.
• Ready for what the future brings.
• PDA.
• Cell phone.
• TV.
• Screenreaders.

• Using web standards saves on bandwidth.
• Code reduction with limited markup provides cleaner and simpler code.
• CSS files are cached.

• Without caching CSS: ~2KB.
• With caching CSS: ~9KB.

• You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers.


• You’ve written valid XHTML and CSS.


• You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements.


• Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.


• Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page.


• DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.


• DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win.


• A recent DOCTYPE that includes a full URI (a complete web address) tells these browsers to render your page in standards–compliant mode, treating your (X)HTML, CSS, and DOM as you expect them to be treated.

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">


• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">


• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

• Web Standards is a journey.
• Not a quick fix, so don’t expect it.
• Major benefits!
• Forward / Backward compatible.
• Bandwidth savings.
• Easier transitions for future updates.
• Printer Friendly!