Web standards are simply defined structures for how content should be created and distributed on the web. The W3C has set forth various languages and methods with specific guidelines as to what can and can't be used.

Examples include markup and presentation languages, such as XHTML, and CSS. There are others as well, such as the Document Object Model, but the main bread and butter of any web developer will be primarily XHTML and CSS.

Who cares?
On the surface, these standards may seem unimportant. After all, even if your code isn't exactly correct it will still display, right? Well, not exactly. Your page may look how you intended in one browser, but look completely different in another. Or it may not render at all. Invalid code can also become unmanageable more quickly, making your job harder, and at worst you may drive away visitors who can't read or display your site. It also keeps your site "future-proof" by ensuring it will be compatible with new browsers when they come out, and you won't have to go back and rewrite your code to keep it working.

I use Internet Explorer, and so does most everyone else. So as long as it looks ok in IE, I'm fine with that.
This is an unhealthy attitude some designers seem to have. Internet Explorer may have a large market share, but that's no reason you shouldn't ensure compatibility with other browsers as well. Complying with web standards ensures your page will work in all cases, no matter what the popular browser of the day is.

Accessibility
Web standards go hand in hand with ensuring your site is accessible to all as well. It is estimated that 10% of the population online today have some form of disability which may impair their ability to access your site. This can range from vision impairments like blindness or color blindness, to reduced motor skills or reaction times.

It's not only just a good idea to keep these people in mind, it's also the law. In the United States and other countries as well, a set of standards has been developed to ensure people with disabilities can still access content on the web. Examples include U.S. Section 508 Standards and the W3C's Web Content Accessibility Guidelines 1.0.

Other advantages
Even if the reasons above aren't good enough, using standards can help make your job as a developer easier. Keeping your markup clean and semantically correct makes it easier to read and maintain, and helps reduce bloat. Linking to a single CSS file sitewide is certainly easier than writing several thousand FONT tags.

Use of XHTML and CSS means your site is much more likely to work with up and coming technologies, such as browsers on TV, handhelds, phones, and other future devices.

Simple steps to complying with web standards
Developing in accordance with these standards and guidelines is easy. These steps are just some of the basics.

Pick a markup language and include a valid DOCTYPE.

Pick a standard language for your markup, and code in accordance to its guidelines. Add the proper DOCTYPE at the top so the browser gets a heads up as to how your page should look. A DOCTYPE is important because without it, the browser will usually fall back on "quirks mode", rendering whatever tags it comes across basically up to its own interperetation.

Put all style information about the page into CSS.

Many of the old style tags found in HTML4 are deprecated. CSS is the new standard for defining how a page should look. CSS code can be placed either inline with the markup, or linked to an external file.

Avoid vendor-specific tags.

Some companies like Microsoft and Netscape have added to the language by coming up with coming up with codes that only work in their browsers. These additions are not approved by the W3C (although sometimes they are incorporated later on) and they will not provide a consistent look and feel for your site.

Validate your code.

Use tools like The W3C Markup Validation Service for your HTML and The W3C CSS Validation Service to make sure your pages are up to spec. There are also tools for checking accessibility standards, such as Cynthia.

Use meaningful, well-formed link text.

Links are the heart and soul of hypertext pages. You want to make sure the text you use in your link is meaningful to the link it represents, even if it's out of context of the page. Don't ever use the phrase "click here". Most people already know what to when presented with a link, so these directions are redundant. Also it's not relevant to the page you're linking to. A good rule of thumb is to think of links as nouns, not verbs. So avoid linking to action words, only people, places, and things. One good reason to do this is because people with vision impairments may use screen readers when visiting your page. A screen reader is software that speaks the text on the page with the use of a text-to-speech engine. A user with a screen reader may be tabbing through the links on your page and they need to know what each link represents.

Avoid use of frames.

In almost all cases use of frames is not needed and results in problems in accessibility, browser compatibility, search engine spidering and links found in search results. Read more in /faq/11216

Test your pages in as many browsers and platforms as possible.

Don't test exclusively in one browser, use a variety. Also keep in mind that even the same browser will render differently on alternate platforms. Take a look at your page in Windows, Mac OS, and Linux to get a better feel for how others view your site. If you don't have access to some of these systems, ask for a site check in /forum/webmonk and many users will be happy to provide screenshots.

Reading more about it
This FAQ entry only scratches the surface of web standards and accessibility. There's a lot of good resources for learning more:
/faq/webmonks
World Wide Web Consortium
Web Standards Group
The Web Standards Project

got feedback? got feedback?

Any feedback you provide is sent to the owner of this FAQ for possible incorporation and shown publically as well.

by rjackson edited by big greg
last modified: 2005-07-16 08:45:31