Validating your code to W3 standards

Hello everyone! This is Sue Jenkins with productivity tips for web designers. Today, you'll discover how to use Dreamweaver to validate your web code to W3C standards and make corrections, if needed, before you publish your site. Code validation refers to a process that checks whether the code on your pages is standards compliant according to the latest guidelines and recommendations promoted by the word wide web consortium, or W3C. The best way to validate your code is to use a code validator.

Code validators can check for and identify things like improper HTML and CSS syntax, missing tags and attributes, broken links, 508 and WAI accessibility standards, and browser related display issues. The ultimate goal of a code validator is to ensure that your code is clean and error free, as well as accessible and standards compliant, plus SEO friendly. As an added benefit, valid code ensures a consistent experience for visitors across multiple devices and operating systems.

Valid code also often results in faster loading pages with a lighter server load, but most importantly, valid code is a positive sign of a competent web designer. In the past, Dreamweaver has used its own set of tools to allow you to check your code. Today, Dreamweaver connects you instantly with the W3C's own code validator tool. To run the validation tool in Dreamweaver, open the file you'd like to validate and select window results validation.

This opens the validation tab inside the results panel, which you'll see is docked to the bottom of your document window directly below your properties inspector. At the top left corner of the panel, you'll click the W3C validate button. That's the big triangle, and choose validate current document. When the W3C validator notification appears, go ahead and click ok to proceed. The results panel then lists all the issues it finds by file name, line number, and description.

Double clicking on an item in the panel will select the corresponding code in your open file. To learn more about any specific issue, right click the issue, and choose more info from the context menu. Let's take a look at some of the errors and warnings that the validator uncovered on this sample page. On line 61, it says there's an unclosed element strong. And if we look to our code, we'll see that there's a typo.

Here's another one. No p element scope, but a p end tag seen, so we'll double click it, and we'll see that yeah, there's a stray p tag which we can just delete with our keyboard. Be sure that you scroll up in the results panel because it does drop you at the very bottom of your list, so go through them one at a time. If you're not sure what it's referring to, definitely right click on it and choose more info so you can read a longer description and possibly even see a suggestion for how you can correct it. Depending on how many errors, warnings, and other coding issues the validator identifies on each page, the process of validation may add as little as 10 to 20 minutes to your work, or possibly several days.

Since valid code is your ultimate goal, however, consider adding this step to key points in your web development workflow. For example, if you build a master page or a template page, before you build the rest of your site, validate the code on that page before you create any new pages from it. You may also want to validate again after creating each new page to catch any new coding errors that you may have made while adding content and developing new CSS styles. In addition, it would be a good practice to validate all the pages one final time during testing prior to site launch or site publication.

This would give you the opportunity to find and fix any last minute coding issues. Since you can only validate one page at a time, it's best to run the process systematically in some way, such as alphabetically through the files panel. Then, as you work on each page, try your best to correct the code identified by the validator. Here are some helpful resources on validation. To learn more about the benefits of validating, check out the validator on the W3.org website.

There, you can also validate online by URI, file upload, or direct input, and for a good list of validators or resources for Wordpress, visit the Wordpress.org website. While you're validating your code, don't be dismayed if you see a lot of errors. Part of what makes you a good designer is learning what not to do by making mistakes. With effort, the more you validate, the fewer warnings and error messages you'll see, and if you're lucky, you might even see a message that says no errors or warnings found.