Note: This is a re-post of my latest SEO Blog postfor LyrisHQ.com:
Web StandardsAs a new industry begins to grow, the need arises for a base set of standards to guide it’s growth in the right direction. Without them, an industry can grow wildly out of control making it hard for companies to be effective, and impossible for consumers to choose the best solution for their needs. Standards ensure that the industry follows a set of rules –

– that meets the needs both of consumers and of the industry itself.

The topic of Web standards has actually been around for quite a while, and the standards to be discussed here have been used by many designers and developers for years. That said, we still see non-standards compliant sites over and over, and businesses seem to continuously fall into the same traps when deploying new sites or redesigning old sites. We see it so often that I was compelled to write this article to remind people of the real advantages of using Web standards.

What are Web Standards?

When a Web site or Web page is described as complying with Web standards, it means that the site or page has valid or nearly valid HTML (XHTML), CSS and JavaScript while also meeting accessibility and semantic guidelines. Having a set criteria of Web standards ensures that sites which follow them enable the highest number of different users (human and artificial alike) to effectively use the sites, while also making them easier to update, maintain and grow. Web standards also make it much easier to produce Web applications, providing a benchmark from which applications can be developed and a set of rules to adhere to.

The driving force behind all of the current Web standards initiatives is the World Wide Web Consortium (W3C), a collective that has been working for years to establish and maintain Web standards.

The Basics

While trying not to get too technical, the basics of what makes a site “standards compliant” translates to the following key elements (with some examples):

1. Use valid (X)HTML

Using valid HTML (and preferably XHTML) is the first huge step towards compatibility with current (and future) browsers along with better rendering in the old ones, essentially future-proofing your site. XHTML requires that you use proper tag structures and hierarchy which not only make it easier for search engines to read and index, but also provides a much better user experience for visitors (see #3 below). To assess your Web pages for valid (X)HTML, use the W3C HTML Validator.

2. Use semantic Web techniques

It’s important to separate presentational elements from code and content because it provides a clean and clear page for both spiders and text-readers to parse through. Other benefits include reducing the physical size of pages so that they load faster, maintaining a consistent look and feel throughout the site, and making style and content changes easier to manage. Semantic Web techniques include:

  • Using semantic code organization to keep your page structure in order.
  • Using proper headings and paragraphs to organize Web page content. Do not use tables for anything more than representing tabular data. There are still many sites using tables to control the layout of content within a site. Not only does this make a page non-standards-compliant, but it also makes it near impossible for non-visual visitors (i.e. visually impaired via text-readers or search engine spiders) or non-computer browser visitors (i.e. mobile visitors) to determine the flow of your content.
  • Avoiding the use of presentational markup, that is, any style information in the code of your page (i.e. old-school font-tags). Instead, link to the layout and presentation information in well-defined CSS files. Linked style sheets allow the presentation to be removed completely from the page structure of your site, and allow much quicker application of global changes to the site. Having the XHTML only reflect the structure and function also makes it much easier for non-visual visitors to read through the page content based on the use of proper XHTML hierarchy. It also guarantees that everybody can adjust the rendering to their needs and preferences including providing separate style sheets for different rendering engines (i.e. mobile, monitor, text reader, etc.). The CSS Validator by W3C detects any non-compliant use of the CSS technologies.
  • If there is an absolute need to add style information in the markup itself, ensure that you are using proper CSS in the head of the page, or proper inline style format in the XHTML tags.

3. Make your site and content accessible

An accessible site benefits all of your users and broadens your current audience by allowing text-readers, and by default search engine spiders, to accurately “read” and follow your site. These days, another advantage of meeting accessibility requirements is that your site will also be usable on the many mobile devices available to consumers.

Web accessibility is normally based upon the Web Content Accessibility Guidelines[1] published by the W3C’s Web Accessibility Initiative. Although there are 3 Priority levels, a site should at the very least always meet Priority 1. Some of the basic guidelines include:

  • Use HTML tag attributes and text equivalents for all non-text elements on a page such as images (i.e. alts and longdesc), and media components such as Flash.
  • Use a proper semantic hierarchy in your XHTML and separate your content from your site structure (see #2 above). This standard is required by law in some countries and is also required by many individual businesses and government agencies.
  • Use appropriate text for elements such as links and image alts as much as possible. For example, naming an image “image1.jpg” does nothing to explain the content of the image, just as naming a link “Click here” does nothing to explain the function of the link or where it is going.

Although not standard accessibility requirements, adding these simple tools can provide great benefits to your users:

  • Text-zoom – enlarges Web site text on the fly for those with visual deficits
  • Color Switchers – provide a higher contrast for people with visual deficits, or monochrome for those who are color-blind
  • “skip-nav” – allows text-readers and mobile users to skip your navigation and go directly to the page content.

To recap, here are the top reasons why you should be using Web Standards:

  • Increasing site accessibility will result in a larger target audience.
  • Improved user experience for all potential visitors.
  • Cross-browser and cross-platform compatibility (mobile devices included) will also result in a larger target audience. Compatibility with the widest range of browsers and platforms results in a future-proof implementation of your site.
  • More accurate crawling and indexing by search engines – as long as you target standards and accessibility you’ll automatically also be optimizing your site structure.
  • Removing presentational markup from your pages and using properly structured XHTML will result in reduced page weight (physical size) and as a result your pages will load faster.
  • Placing all of your design and layout information into external CSS files allows for centralization and quick adjusting of site look and feel – thus allowing you to make global changes quickly and easily while maintaining a consistent look and feel for the site. Easy-to-maintain Web pages will also result in huge management cost savings.
Additional resources

When Web standards are discussed, the following publications are considered to be foundational: