In my role as CommerceTuned UI lead, an essential part of the development process of our CSS/XHTML overhauls has been to validate all my CSS and XHTML code using the various W3C validation tools available. At first this was chiefly for debugging purposes – if the page looks strange then it could be as a result of mistakes in hand-coded XHTML or CSS – but the benefits of validation are by no means limited to aiding the website development process.
Search engines love to crawl semantic mark-up
Imagine search engine spider’s behaviour as like someone reading through the pages of a word document. A well-structured, validated xhtml page should be laid out with logical, ordered headings and paragraphs that describes the content to the ‘reader’, and therefore helps it to understand the information.
Conversely, imagine that due to invalid markup a misplaced tag tells the spider that a paragraph ends half-way through the content, or perhaps you may have by used a tag that is not part of the specified language of the document, thus the spider might not understand the context. Worse still, imagine you failed to correctly close a tag – this could mean that this portion of text gets skipped until the robot finds a closing tag. Validation helps to prevent all this from occurring.
Your website will be forward-compatible
Code standards are always defined taking anticipated developments into account, so by definition valid code will ensure your website’s future is in safe hands. By taking shortcuts or ‘hacks’ that you know work for existing browsers (or other user-agents), you are running the risk that these same shortcuts may not work in later versions of the same device. In extreme circumstances you may need to re-write pages – or your entire website – to fix something that with a bit of forethought could have been easily avoided.
Validation and accessibility
Another positive from valid XHTML markup is that it will automatically pass some of the checkpoints that are covered in the ‘Single A’ level of the Web Content Accessibility Guidelines (WCAG). In the UK, passing all these checkpoints is a legal requirement as part of the Disability Discrimination Act 1995 (DDA).
For higher-level WCAG Guideline 3 also explicitly states that websites should Use markup and style sheets and do so properly, which implies validated code.
Validating for presentation
Using a pure CSS-based layout allows you to create semantically structured XHTML pages. Table tags should only be used when presenting data. As the <p> & </p> tags describe the opening and closing of a paragraph, so a table data tag (<td>) should be used to indicate a section of tabular data.
Valid CSS and XHTML tend to work pretty well together, and helps you in achieving complex layouts without having to resort to <table> tags. There are known inconsistencies between browsers for rendering CSS-driven pages, but validating your code could help eliminate many of these problems. If you are still having presentational issues, do try to avoid code ‘hacks’ for the same forward-compatibility reasons outlined earlier.
When is it OK to use invalid code?
On occasion, it may be difficult to achieve validity. Perhaps your website uses a CMS which generates its own invalid code through a ‘what-you-see-is-what-you-get’ text editor. It might be unrealistic cost-wise to address this problem. If this is the case, then you may want to investigate whether or not you can edit the HTML directly, and if so invest in basic HTML training for your website editor.
Or maybe you want to use a CSS style declaration that will not validate as it is from a newer specification (such as CSS3). As long as you understand that the declaration may not be widely supported, then there seems little point in dropping it just to achieve validity.
Achieving validity
There are quite a few tools available to make the process of validation easier. Rather than having to visit a specific validation site, plug ins that work via the browser can make it very easy to check your code as you develop it. I’d recommend:
- HTML validator (based on Tidy and OpenSP) [for the Mozilla Firefox browsers]. Gives you a quick-reference icon to indicate valid / invalid HTML / XHTML code.
- Web Developer [for the Mozilla Firefox browsers] – Excellent CSS editing and validation features, including the ability to validate local CSS.
- Microsoft Developer Toolbar [for Internet Explorer browsers] – similar in some respects to the Firefox toolbar above (but better to use the Firefox one if that is your browser of choice).
I personally can’t recommend any Mac developer tools as I mostly work on windows, but the Web Inspector for Safari might be worth a look.
Validation makes your life better
In summary, all these ‘pros’ for validation are for your benefit. It:
- Helps you get traffic to your website through organic search results
- Helps maintain and debug your code
- Keeps your site up-to-date and consistent in presentation.
Initially, validating code may seem a like a bit of a pain but – as with any new approach to working – it gets easier and more natural the more you do it. And great fun too. OK, maybe not that.