The benefits of Web Standards to your visitors, your clients and you!

Published: 23 February 2004

This article explores the benefits of web standards for developers including valid, sematic and accessible markup, as well as who benefits most from these practices.

1. The Web Standards

"Web standards are intended to be a common base... a foundation for the world wide web so that browsers and other software understand the same basic vocabulary".

Eric Meyer

The W3C (World Wide Web Consortium) and other standards bodies have established technologies for creating and interpreting web-based content. The actual standards are:

1.1. Structural Languages

1.2. Presentation Languages

1.3. Object Models

1.4. Scripting Languages

ECMAScript 262 (the standard version of JavaScript)

1.5. Additional Presentation Languages (Markup)

2. What are Web Standards about?

These 'Web Standards' are designed to:

deliver the greatest benefits to the greatest number of web users
ensure the long-term viability of any web document
simplify code and lower the cost of production
deliver sites that are accessible to more people and more types of Internet devices
continue to function correctly as browsers evolve, and as new devices come to market

For web designers and developers, Web Standards are about using standards (Structural, presentational, Object and Scripting languages) and best practices (valid, semantic and accessible code) to benefit your users, your clients and yourself.

3. A mindset change

3.1.Traditional website

Traditional website development is an extension of the printed media - designed to make sites look pixel-perfect in the 5-6 main browsers. Common characteristics include:

Table-based layouts
Presentation within the content (font tags)
Invalid code
Inaccessible code
Semantically incorrect code

3.2. "Web Standards" website

Web Standards are about accepting the web as a broad communication tool that can be accessed by a wide variety of users and a variety of devices. Common characteristics include:

Semantically correct markup
Valid code
Accessible code (for humans and devices)
Cascading Style Sheets (CSS) to separate content from presentation

4. Semantically correct markup

Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)

You should use standard HTML elements for your markup and avoid styling HTML elements to look like other HTML elements. In simple terms, this means:

for headings, use heading elements starting with H1
for paragraphs of text, use a paragraph element
for lists, use a list elements

5. What is valid code?

Validation is a process of checking your documents against a formal standard, like those published by the W3C. A document that has been checked and passed is considered valid.

5.1. Why use valid code?

Valid code will render faster than code with errors
Valid code will render better than invalid code
Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML

5.2. How do you check if your code is valid

W3C Markup Validation Service
W3C CSS Validation Service
WDG HTML Validator
Many software products now have inbuilt validation tools

5.3. How do you make your code valid?

Start with the right doctype
Be aware of doctype modes (standards compliant, quirks mode etc)
Use a character set
Close HTML elements
Use alt tags for images
Avoid HTML hacks
Use HTML validators regularly
Fix any bugs you find before you go live
Make validation part of your normal work process

6. Why use accessible code?

Allows your site to be accessible to a larger audience (vision impaired, motor skill impaired, cognitive impaired)
Allows your site to be accessed by wider range of devices (hand helds, screen readers, text browsers, search engines)
Is a requirement for Federal and State Government sites

6.1. How do you make your code accessible?

Provide text equivalents for non-text elements
Use accessible data tables (identify row and column headers)
Use accessible forms (label for, id, fieldset, legend)
Use markup rather than images to convey information.
Provide visible skip menus
Provide access keys
Use style sheets with relative units to control layout and presentation
Make sure documents can be read without style sheets
Provide metadata to add semantic information

7. Why use CSS to separate content from presentation?

The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.

More accessible to a wider variety of devices
Easier to make site-wide changes - one css file rather than all pages
Smaller files/ faster download - less code on the page
Less code on the page - easier to code
Allows users to customise to their own needs - style switchers
More control over code - can deliver code in preferred order for screen readers

8. A CSS based site in action

One of the powerful aspects of CSS is that content can be re-purposed to suit your needs - without changing a line of html code.

9. How do your VISITORS benefit from Web Standards?

Files will download faster (less code, no overall tables, valid code)
Content is accessible to wider range of users (normal users, blind users, vision impaired users, dislexic users, motor skill impaired users etc)
Content is accessible to wider range of devices (screen readers, browsers, text based browsers, hand helds, search robots, printers, fridges etc)
Allows users to customize site appearance (style switchers)
Provides print friendly versions for all pages

10. How do your CLIENTS benefit from Web Standards?

Easier to maintain (less code, modular code)
Cheaper hosting costs (less code)
Better search engine ranking
Content can be restyled easily without changing code
Provides users with customization
Provides print versions without replicating content
Improves accessibility (essential for Government clients)

11. How do YOU benefit from Web Standards?

Easier to code (modular code)
Easier to maintain (less code, modular code)
Less device dependent coding (stable across wider variety of devices)
Provides a competitive edge as more of the world moves to using Web Standards.

12. What are the downsides

Steep learning curve
Browser compatibility issues
Some layouts can be achieved much more easily using tables than CSS

13. How do you achieve Web Standards?

Web Standards are not a black and white issue. All developers should be aiming to gradually move towards Web Standards-based sites.

The move from traditional to Web Standards based development takes time and practice. Rather than jump in and quickly becoming frustrated, set achievable goals and gradually move towards Web Standards. For example:

13.1. Basic changes

Add a correct doctype to all pages
Add alt text to all images
Add meaningful page titles

13.2. Intermediate changes

valid code
semantically correct code
replacing inline font tags and inline colour with CSS
accessible forms, data tables and skip menus

13.3. Advanced changes

Basic positioning with CSS (padding, margins etc) while using overall table for layout
full positioning with CSS - no tables for layout

13.4. Practice CSS layouts

read CSS tutorials and books to get an understanding of practical CSS
set aside time to learn CSS positioning without external pressure
practice a variety of CSS layouts until you are confident

14. Conclusion

Web Standards deliver:

faster file download
accessible code to wider range of users and devices
user customization
easy implementation of print friendly versions
cheaper hosting costs
better search engine ranking
faster and more efficient site maintenace
a competitive edge over competitors