Project Management optimize

Quick Tip: Validate your code

Ryan Boudreaux discusses the best practice of validating your code for the web, offers some tips to streamline the process, and highlights some handy tools.

This is another one of the "Do's" on the list of Do's and Don'ts that all web developers should employ as part of their web development process. And I know there is a crowd of dissenters who reject the notion that their code or web documents need to be verified, poked, prodded, tested, and validated before going live to public viewing.

Several of the opponents to validating code argue that there is no guarantee that a web document missing the correct syntax will not display as expected; their thinking is that if the page does what we want and the user experience is a positive one, why care about quality assurance, standards, technical specifications, and guidelines? Another point made for defying validation includes the time needed to conduct the processing for all the code, especially with development involving large numbers of web documents that could take up a lot of resources, time, and effort. Yet another point in the revolt against validation is that the average visitor does not look at the source code, so if the page looks good in the browser, then they are happy.

All I can tell the rebel web slayers out there is that validation is considered a best practice, and best practices are just what they mean, the best way of doing things -- not always the right way for everyone or every organization, but typically it is the best way of managing and controlling code development.

Let's face it; no one likes to be told that their code is invalid; for that reason, I'm providing several quick tips here that will help you with getting over the perceived stigma, and send you on your way to honorable code.

Validation ensures that your code will be rendered in the best possible way for all known user agents whether it is written in HTML, XHTML, SMIL, MathML, etc. The online W3C Validation Service W3C validation provides several options. The most popular is to validate by URL scan, just copy in the address, click "check," and voila -- your scan report is generated in seconds. Other options include the ability to scan specific content such as RSS/Atom feeds, CSS stylesheets, MobileOK content, or to find broken links. And there are other valuators and tools available. You may have your own validation application, and that is fine too; these tips can be used in either situation.

Tips and tricks to streamlining your validation process:

  1. Upon running a validation test scan, your code may return several warnings and errors. Note that the errors have more priority over the warnings.
  2. Consequently, you will want to address the errors first in an orderly fashion concentrating on one error at a time. The validation errors and warning list will be presented in descending order, the same order that it appears in the code from line 1 on down to the end of the code.
  3. Knock out each error individually, and then run your validation test again to ensure you tackled every single one.
  4. Then concentrate on the warnings: What you might find is that when you correct one error or warning it may resolve several others. So it is good to run the validation several times as you address the issues, especially if the code generated a lot of errors and warnings.
  5. If you have time constraints to validating your web documents, start with templates first, then create a system for validating code after major design changes are dealt with. I like the saying "You can only eat an elephant one fork full at a time." Therefore, if your web document directories and folders are the size of an elephant, break it into manageable sections. Set aside one hour a day or several hours a week to conduct validation.

Besides the online W3C Validation Service, there are others out there available for free, both online or downloadable applications and I have listed a few of them below:

HTMLTidy: Dave Raggett's excellent HTML Tidy application download lives at SourceForge, where they collect all the bugs and patches and have refactored Tidy into a free-standing C library.

Tidy Your HTML: The online "Tidy" tool.

Web Page Purifier: Enter the URL, select the HTML purity level, then run the view page to validate; you can also view the CGI Perl source code.

Web Page Backward Compatibility Viewer: Allows you to check off any features that you would like to include or exclude from the scan. This tool also allows you to enter the browser ID string; the results of the scan can be viewed in CGI Perl source code.

A-Prompt Web Accessibility Verifier: This downloadable application checks for web pages' accessibility-readiness for people with disabilities; it actually performs repairs on code with queued response. The tool examines web pages for any barriers to readability and access for people who are blind and who rely on screen readers to synthesize speech from the computer.

IDI Web Accessibility Checker: Another tool that checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone.

Do you have any other tips, tricks, or resources for code validation that you use in your practice?

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

6 comments
Ron_007
Ron_007

I like to look at validation roughly as the equivalent of "old school" compiling your code. Unless you are the 1 in a hundred "perfect" coder, I find it is easier to validate (compile) small pieces of code and build, and validate, up from there. As the story points out, one coding mistake can generate a cascade of messages.

Shane10101
Shane10101

Does anyone know of a decent validator that will show "errors" for non-cross-platform compatible HTML for email? (Perhaps one written in 2001 and never updated ;) We have a lot of clients who run e-blasts, and inevatibly designers who are used to coding for modern web browsers have no idea how far behind email platforms are.

ian3880
ian3880

For a number of reasons (mainly relating to actual not perceived security issues with other browsers) I choose to use the Opera browser, and have done so since mid 90's. For instance, Opera is consistently reported by Secunia as being error-free. So ... I can assure all your nay-sayers that if your web pages are correctly written (not just for Internet Explorer and Netscape aka Firefox) it will be correctly displayed in ALL browsers conforming to current web standards. The fact that so many BAD web pages display correctly in Opera is because of Opera's attention to creating javascript(?) code to correct bad code. The single worst group of offenders are in the financial services sectors - big banks - who still insist their code written exclusively for IE6 (and often earlier) is secure. Try to validate these pages and you'll find they often have hundreds of major coding errors by current W3C standards. For users, VALIDATING YOUR CODE is essential, near enough is NOT good enough. The irony is that now that IE8 + (has finally attempted to conform to W3C standards) IE8+ reportedly seems to have exactly the same problems as other browsers. MS apparently also has to provide javascript(?) corrections to view earlier poor web page programming for IE6 and earlier. So ... if this is correct, proper programming in the first place (and validation) would have saved all this hassle. BTW - validating this page with W3C produced " Result: 197 Errors, 221 warning(s)". Maybe TechRepublic should get its own website in order before entering into an article about correct web page coding!

lastchip
lastchip

According to the W3C validation service, this page alone has 164 errors and 170 warnings - part of the problem of using a content management system as compared to writing the code yourself. Personally, I get almost paranoid about validation, but through reasons outside of my control, have to admit to not achieving it 100% of the time. Most commonly, when using third party scripts. Doesn't mean I don't try though and like the previous posts, I like the Web Developers Toolbar, which I tend to use extensively.

usr19x@
usr19x@

is another FF add-on that simplifies code validation. It also has features for working with cookies, CSS, forms, and images. It contains tools to resize the page and outline the document elements. There are three (3) active icons that display green check marks for correct HTML, CSS and Scripting or display red Xs for errors. I leave it on when online and it is interesting the number of major sites (including tech sites) with bad code.