Go Home

Uncle Jim's Web Designs and Tutorials

Site Design Optimization

HTML and CSS Validation

Author: Jim Stiles



Made with CSS
Valid CSS!
Valid HTML 4.01!

 

Validating Your Web Site:

HTML and CSS validation validation are two very hot topics with current web developers. This article will outline some of the various positions taken on these topics and provide additional perspectives on the issue of compliancy and conformity in today's web development.

Validating a web page, or more accurately stated, validating your HTML or CSS code, basically refers to using a program or an online service to check that the web page that you created is free of errors. An HTML validation system checks your web page to ensure the HTML code on that page complies with the standards set forth by the W3 Consortium, who oversees the HTML standards. There are various types of validators that will perform this function. While some only check for errors, others will show addtional warnings or offer suggestions on how to better format your code.

What exactly is Validating HTML or CSS?

A CSS validator checks your Cascading Style Sheets in the same manner to make sure they comply with the CSS standards set by the W3 Consortium. There are a few which will also tell you which CSS features are supported by which browsers (since not all browsers are equal in their CSS implementation).

You can obtain this free on-line validation for your style sheets from the W3 Consortium:
http://jigsaw.w3.org/css-validator/

There are numerous other validators around, both free and commercial, focusing on various aspects of ensuring that your code will run trouble-free across multiple browsers and platforms. I should also include that validating your web page does not ensure that it will appear as you want in various browsers. It merely ensures that your code is without HTML or CSS syntax errors. Ensuring that your code appears correctly in different browsers requires cross browser testing.

To see what a validation service does, simply click on the W3C-CSS or W3C-HTML-4.01 buttons located in the top, right corner of this page. This will automatically examine the page and advise you if the page correctly validates. In addition, you will be shown a list of page errors and/or warnings along with suggestions on how to correct the problem(s).

What are the Benefits of Validate Your HTML Code?

The proponents of HTML validation (and CSS validation, of course) say that there are a number of reasons why you should validate your code:

  • It Helps Cross-Browser, Cross-Platform and Future Compatibility

    Although you may be able to create a web page that appears to work on your favourite browser (whatever that may be), your page may contain HTML errors (or CSS errors) that do not show up with that browser due to an existing quirk or bug. Another person using a different browser that does not share that particular bug will wind up viewing a page that does not show up correctly. It is also possible that later versions of your browser will fix that bug, and your page will be broken when people use the latest incarnation of the browser.

    Coding your pages so that it is correct without errors will result in pages that are more likely to work across browsers and platforms (ie, different systems). It is also a form of insurance against future versions of browsers, since all browsers aim towards compliance with the existing HTML and CSS standards.


  • Search Engine Visibility

    When there are errors in a web page, browsers typically try to compensate in different ways. Hence some browsers may ignore the broken elements while others make assumptions about what the web designer was trying to achieve. The problem is that when search engines obtain your page and try to parse them for keywords, they will also have to make certain decisions about what to do with the errors. Like browsers, different search engines will probably make different decisions about those errors in the page, resulting in certain parts of your web page (or perhaps even the entire page if your error is early in the page) not being indexed.

    The safest way, it is held, is to make sure that your web page validates error-free. That way, there is no dispute about which part of your page should be scanned for keywords and the like.


  • Professionalism

    Even if you test your web site with all the various browsers in existence on all the platforms in use (Mac, Linux, Windows, FreeBSD, etc) and find that it works perfectly in all, errors in your site reflect poorly on your skill as a web developer.

    The issue is two-fold: firstly, a poorly coded web page reveals that either the web designer does not know his stuff or is a sloppy worker; secondly, it affects his marketability.


Why doesn't everyone Validate?

Those who are against a blanket rule about validation often cite the following reasons:

  • Validation is No Guarantee that Page Works

    Even if you validate your code, you still have to test it in the various browsers. Having code with no syntax errors does not mean that the HTML or CSS code does what you want. Hence some of the proponents of this view argue that the main goal when designing a web page is to make sure it is viewable and usable by your visitors, not some esoteric goal of standards compliance.


  • Time Constraint for Conversion

    In an ideal world, you want all your pages to be usable and error free. In the real world however, many web designers with thousands of existing pages will be hard-pressed to find time to convert all those pages so that they validate correctly. Since these pages are already doing well on the web, both with existing browsers and search engines, time is better spent doing work that is actually productive.


  • The Average Visitor Does Not Check Your Source Code

    Against the argument about professionalism is the counter-argument that the average visitor to your site is not likely to go around your site viewing the source code to your pages in an effort to locate HTML or CSS errors. To the visitor, how the page appears in his/her browser is the true test of the web designer's skill.


Is there a Solution or Compromize?

Like some web designers, I started designing web sites long before I realized that there were tools that could validate my pages for correctness. By the time I started validating and correcting my pages, I already had hundreds of existing pages that I needed to correct on multiple web sites.

My concerns were primarily cross-browser and cross-platform compatibility as well as search engine indexability. I didn't want an error on my pages that I might miss seeing with my browser but that creeps up in other browsers, systems or the search engines. However, the problem was that converting hundreds of pages is not exactly my idea of a pleasant day's work.

I decided to take the approach I saw on a website. If I remember correctly, I think it was the W3 Consortium's own website that mentioned this method. At that time, they had a notice stating that they knew that not all their pages complied with the standards. However, all new pages they created will validate correctly, as will any old pages that they updated.

I realise that this is not the "ideal" that some webmasters argue for; but it is a practical solution for a web designer with many existing pages. If you are in the same boat, with too many existing pages to contemplate revamping everything, you might want to consider taking this route. It may not salve your pride (ie, the craftsman's pride at producing a perfect work), but at least it will help you cope with the workload.

How Often Should I Validate?

Some people validate every time they make a modification to their pages on the grounds that careless mistakes can occur any time. Others validate only when they make a major design change.

I always validate the template for my pages when I make a major design change. I try to validate my pages each time I make modifications, although I must admit that I sometimes forget to do so (with the occasional disastrous consequence; Murphy's Law doesn't spare webmasters).

I find that having an off-line validator helps to make sure that I remember to validate: having to go online just to validate my pages tends to make me put off validation till later, with the result that it'll occasionally get overlooked. For those not familiar with the terminology I use, when I say "offline validator" I simply mean a validator that I can download and install in my own computer so that I can run it on my pages without having to go to the W3 Consortium's website. You can find offline validators on the free validators page

The HTML Tidy validator (listed on that page) is available for numerous platforms (including Linux, Mac, Windows, etc) and has proven helpful to many webmasters the world over.

Conclusion

Validating your HTML and CSS code for standards compliance has certain benefits: it protects your pages from problems arising from syntax errors in your code due to different ways of interpreting errors by the search engines and other browsers. If, however, you have a large number of existing pages that have not been validated and corrected, but nonetheless work well in search engines and other browsers, you might need to consider some sort of strategy (such as the one I used) to prevent webmaster-overload.


HTML & CSS Validators and Browser Compatibility Checkers

CSE HTML Validator Lite
Checks HTML and XHTML web pages for syntax errors.

W3C HTML Validation Service
The authoritative source for checking your web pages for standards compliance.

HTML Tidy (HTML Validator)
Correct and repair bad HTML code

Tidy Online
On-line version of the HTML Tidy validator.

Web Page Purifier
Check your HTML pages for compliance ("purity") with various HTML standards.

Web Page Backward Compatibility Viewer
Set filters and check your web pages to see if they are compatible with browsers that lack certain features.

W3C MarkUp Validation Service
Online HTML and XHTML validator.

Validome
Online HTML, XHTML, and XML validator available in German and English.

Validator-Lite
Free HTML and XHTML validator for Linux and other Unix-like systems.

XML schema validator
Checks XHTML 1.0 documents against XML schemas, with detection of errors not found by other validators.

SP
James Clark's multi-platform SGML parser that includes the SGML validator nsgmls.

HTML TIDY
Dave Raggett's free cross-platform utility for cleaning up HTML.

BBEdit
Shareware text and HTML editor for the Macintosh that includes an HTML validator.

STG XML Validation Form
Syntax validator for XML documents.

Web Page Backward Compatibility Viewer
Allows authors to view a page with selected tags unsupported--a good tool for ensuring cross-browser compatibility.

Web Page Purifier
Allows authors to view a page "purified" to be compliant with HTML 2.0, HTML 2.0+Tables, HTML 3.2, or webtv 1.1.

Watchfire WebXACT
Checks HTML for accessibility.

W3C CSS Validation Service
A free, easy-to-use CSS checker.

W3C Link Checker
A free, easy-to-use link checker.

Watchfire WebQA
Link checker and site management tool for Windows.

MOMspider
Perl-based link checker and analyzer for Unix.

Robots.txt Checker
Online checker for robots.txt syntax.

UITest.com resources
A good collection of links to validators, accessibility checkers, and more.

Open Directory HTML Validators and Debuggers
A list of validation and checking links.



Other Articles and Tutorials by Jim Stiles:

Introduction to Cascading Style Sheets

Developing Cross-Browser Style Sheets

Website Optimization

Securing Your Website

Introduction to Dynamic HTML

Microsoft Office Application Tutorials

Introduction to Computer Maintenance

Computer and Browser Security

Understanding Computer Viruses

Home Network Security

Web Site Security Vulnerabilities

Fighting Email Spammers

Fighting Forum Spammers