Web Standards > Validation

by Megan McDermott, 9 December 2007 - 3:16pm

Many programmers seem to think that complying with web standards means passing the validator. Validation is an important part of standards compliance but it is not the whole story.

The HTML validator can be compared to a spell checker in a word processor. It can compare your words to a standard dictionary and point out where you’ve gone wrong. The spell checker can also suggest alternate words, just as the validator can suggest where you’ve gone wrong with your HTML. However, the spell checker cannot tell when you’ve used words incorrectly. Your school teachers may have shown you a poem such as this one. Although this poem passes a spell checker, it is certainly not correct use of English!

Just as the spell checker cannot tell if you’re using their instead of there, the HTML validator cannot tell if you are using the HTML tags incorrectly. HTML is a structural mark-up language. That means that all tags should be used to define the structure of a document. A list should be defined with <ul> or <ol> and <li> tags. A header should be defined with the proper <hx> tags, not with <p> and <strong>.

What about those elements that don’t seem to have a structure? You may need to consider carefully how to mark up certain elements when there doesn’t seem to be a logical HTML equivalent. What is a navigation menu? Well, that one’s clearly a list. What is a page layout? Sorry to break it to you, but it’s definitely not a table! In these cases you may use the <div> (division) tag to segment portions of a page and format them appropriately.

CSS and Semantics

Another problem programmers often have is naming of CSS classes and id's. The impulse for many is to name the class to describe what it is doing – making text red, for example. In that case you may do something like this:

Or you may try to reduce your file size by using short forms such as this:

What if you decided to change this red text to orange? Then your class name is no longer accurate and is sure to cause confusion. This class only describes the appearance of the text, not it’s meaning. Why is the text red? CSS class names should describe the purpose of the formatting, not the appearance. You may be using this red text to format an error message. In that case, the class should look like this:

This way, even if the formatting of the element changes, the class name continues to make sense.

Why you should care

There are many practical reasons why you should use standards compliant mark-up. They include:

1. Working well with others: if your HTML is used correctly and CSS classes are named semantically, future developers will not have a problem figuring out your work. Let’s face it – you will not be working on this project forever! At some point, some other person may need to edit your code. Using web standards means that any other standards based developer will be able to modify your code without having to spend a lot of time figuring out how it works.
2. Separating presentation from structure: this is the key benefit of web standards for a couple of reasons. Firstly, it makes it easy to change a design without having to make a lot of changes to the mark-up. Secondly, it makes it possible for you and your designer to work independently. You develop the structure and interactivity with HTML and your programming language of choice while the designer creates the visual design using CSS. Thirdly, it makes it easier for you to distribute your application for use on other sites. Non-programmers can easily customize the display just by editing the CSS.
3. Search engine optimization: most popular search engines will use your code to figure out the structure of your document. If you are using <p><strong> to define a header, the search engine cannot tell that it’s a header and therefore important. It thinks it’s a paragraph and will treat it as such. If the search engine knows what text is, it can pick out the important text on your page and use that information to rank your site. Of course, this does not mean that it’s appropriate to mark up full paragraphs of text as a header just to get better rankings with the search engines!
4. Accessibility: Disabled users may be using any number of devices to access your site. Screen readers will operate in a similar way to the search engines. They can’t see what your page looks like, so they have to depend on the code to tell them what’s what. Proper HTML mark-up will help them to read your site properly and navigate more easily. Partially sited or otherwise disabled users may be using a regular browser with a custom stylesheet (check out the accessibility view in Opera’s user mode). If you have used proper HTML mark-up the site will work properly whether the user is using your stylesheet or their own. You don’t want to be the store with five steps and no wheelchair ramp, do you?
5. Faster downloading: Using web standards properly usually makes for much smaller web pages which, of course, download much faster. As a programmer you must know that bloated code is not a good thing.
6. Cross browser and future compatibility: web standards were developed to ensure consistency across browsers. If you use standards correctly your web applications will display the same way in all browsers that support standards. It also means that your application will display properly in future browsers. The doctype you use to start your HTML will tell the browser what specification to use to render it. This means that even years from now, when new standards are being used, the browsers won’t have to guess at how to display your page.

Summary

Complying with web standards means much more than passing a validator. Writing proper HTML and CSS can be tough at first, especially if you don’t have a good understanding of design to begin with. You may protest this point, thinking that you have to use tables a lot because you don’t know how else to make things line up. Never fear, there are many resources at your fingertips. Usually a quick google search for a particular problem will bring up a wealth of results.

Discussion

To discuss, ask questions or comment on this article please see the Webmaster Forums discussion about this article.

References:

• The World Wide Web Consortium (W3C)
• Div-itis: What it is and How to Avoid it