Web Standards is a term that represents the set of HTML and supporting languages/technologies recommended by the W3C organization for use on the web.

Web Standards are awesome! They reduce the cost of web development, site maintenance and hosting. They result in web pages that render faster for improved user experience and rank higher in Google. They also result in web sites that are more accessible for people with disabilities and users with mobile devices.

This article focuses on some presentation-layer Web Standards (CSS and XHTML specifically); this article does not address other server-related standard protocols (such as, SOAP and HTTP).

History

The Web was created with a simple idea: wouldn’t it be nice to travel from one document to another by simply clicking on linked text?

Users were liberated from the traditional ways to reference documents, such as contents, indexes, footnotes and endnotes, when the power of the Web was unleashed. Anyone who uses Wikipedia today understands the elegance and power of hyperlinked documents. The language behind the linked documents is called HTML or Hyper Text Markup Language. It started out as a simple collection of markup tags that was easy to learn and only took a weekend to master.

Then everything changed. Enter the browser wars of the mid 90’s.

HTML was created to be a very forgiving language. To prevent web browsers from becoming obsolete following version upgrades, browsers were built to ignore unfamiliar HTML tags. This way, as new tags were added to the HTML spec, browsers would remain backward compatible and web pages that used the new version of HTML could still be rendered in older browsers.

Once the fight for browser market-share was in full swing by Netscape and Microsoft, pitting Navigator against Internet Explorer, these companies exploited this loophole in HTML and began creating new HTML tags outside of the official HTML spec. Each company built new, flashier tags into its specific browser’s library, knowing the other browser would just ignore the code. With each new custom tag, web pages in the respective browser would look more appealing and inviting, as opposed to the same rendered page in the competitor’s browser.

The commercialization of the web followed suit. As the web transformed into a highly visible medium, the demand for great looking web sites grew as businesses desired to appear cutting edge and professional.

Pure text-based documents failed to effectively convey sophisticated marketing messages. Photoshop became the essential web design tool, producing professional looking designs and layouts just like those created for traditional print media. To transfer these sophisticated designs and layouts to the web, the HTML <table> tag became misused, creating an invisible structure to the web visitor, but an inherent problem on the back end (i.e., in the code). The problem of too many nested table tags caused many problems, including:

• Increased cost of web site production and browser compatibility testing

• Increased cost of maintenance

• Poor accessibility for the disabled and people with mobile devices

• Barriers to search engines attempting to index the site

• Bloated HTML file size (producing slower downloads)

• Create complex and visually interesting page layouts by easily moving page elements around on the page

• Transform simple bulleted lists into tabbed, drop down, fly out, or expanding menus

• Attach background graphics to elements, create textures and layers that work in planes instead of tables

1) Reduced Cost, Zippier Experience. Each page on the web site is dramatically reduced in file size due to leaner HTML. This reduces the cost associated with hosting the site. And, when CSS files are loaded externally, they are cached by the browser. Once they are loaded, they do not need to be loaded again.  This all results in a faster page load.

2) Search Engine Visibility. Since the HTML is leaner, there is a higher proportion of actual content to HTML tags. A perfect treat for search engine spiders, pages created in Web Standards usually rank much higher in search engines.

3) Accessibility. Web Standards are written with accessibility in mind. Working with XHTML/CSS incorporates accessibility requirements into the development of the web site, instead of adding it on as an afterthought.

4) Mobile Devices. Web Standards can create a style sheet specifically for mobile devices. So there is no need to create a separate web site. Visitors can easily access your web site from their PDAs, web-enabled mobile phones and any other device that can connect to the web.

5) Easy Maintenance. With Web Standards, the presentation layer is separated from the content. Quickly change the look and feel of your web site by updating the CSS file. No complete web redesign is required.