Validating the Code Behind the Page

Checking Content
Begin your web page validation by checking the content of your page. It’s actually fairly simple. Is everything spelled correctly? Are the sentences compete? Is the grammar right? While this should be done at the time of creation, after you’ve messed around with the code for a while, you often have a fresh perspective on the content, so take another look to make sure it says what you want it to say, and it says it well and accurately. Many web pages flop due to horrible misspellings and simple grammar mistakes so easily fixed with today’s built-in spell and grammar checking programs. Take time to triple check the content to be sure.

Validating the code behind your web page isn’t limited to a check to see if the HTML or CSS codes are right. You need to check the content of the page, test and verify accessibility, and thoroughly test your page under different viewing conditions in order to know if the design will indeed be accessible: visible and usable by everyone.

The order for checking and validating your pages should be:

Content

HTML tags

CSS codes

Accessibility

Links

Creating “accessible” web pages is not just a standard from the W3C Organization. It is considered a requirement by some search engines. Getting noticed means being “seen” by search engines, so do your best to meet their needs, too. Don’t limit your audience by creating limited pages. It’s not hard to make your page accessible, and it will help you in the future as the rules become more stringent on this topic.

By checking the content and basic coding, including the HTML and CSS style sheets, you are making sure the web pages can easily be read by others, no matter their software. After all, if your page is doing strange things because of screwed up bits of code, it makes it difficult to read and people will click away from you quickly. Checking for accessibility guarantees your page will be able to be read by not only any Internet browser software, but by anyone.

Just because a web page looks good on your screen doesn’t mean that all the coding is accurate or that it will look good on someone else’s screen. Begin by checking your page against the W3 validator. If you have left a tag without a closing or have too many tags that don’t match, or the elements within a tag aren’t right, these will show up in your validation report. Any little bugs in the CSS style sheets will also be found.

To check your style sheets thoroughly, run it through W3’s CSS Validator separately. Fix and correct the mistakes and pass it through the tests again. When you get it right, the official validators reward you with an icon to post on your site to tell the world “I passed the test!” Don’t put this on every page on your site, but assign it to a nice “wall” on your “about us” or information page, just so those who are really interested in whether or not you passed can find it.

Most web page validators offer a link to help you understand what element is missing or needed to fix the code. About.com’s article about Using an HTML Validator discusses the most common errors to help you understand how to fix them if you need more information.

Different validators check for different problems. Some only check the HTML while others check both the HTML and CSS. There are validators to check your scripts, too. Some even check your layout to make sure all the containers are lined up as they should be and not spread all over the place overlapping, even though you can’t see it. Take the time to run your test pages through a variety of validation tests to catch all the little problems that might be there.

Helpful Validation Resources

The following are resources that will help you validate your web pages and code and help you understand a little more about how validation works.

7 Comments

Lorelle, you mention the CSS validator. The Jigsaw trick I always call it :). I have encountered a problem with it. For now it only checks CSS 1.0, am I right? But the current regulus theme by BinaryMoon is using some odd CSS selectors, to say the least. They all begin with an underscore. Like ‘_height’. I read somewhere that it is a socalled crossbrowser hack. What do you know about it and is there a way to make it work and valid according to the Jigsaw trick?

Hacks like this are a major problem and tie up a lot of volunteer energy on the WordPress Support Forums. Kubrick, now the Default Theme for WordPress, was fabulous but pushed the limits too much for “Default” Theme and caused much angst as volunteers had to scramble to learn about all these hacks in order to help people figure out how to do and undo them. Same applies to Regulus. It’s fabulous, but has a lot of non-standard, and possibly non-compliant, features.

I wish someone would dissect the Regulus Theme as has been done with the WordPress Site Architecture 1.5 to help people understand what is really going on under the hood. The interaction with WordPress Plugins to control how it works is fantastic.

[…] After you’ve validated your web page’s code, content for search engines, is there anything else you can do to maximize your search engine ranking? Yes, there is. It’s known as linkability or link popularity. […]

[…] Search engines won’t check your pages for proper tags and coding, but if it isn’t correct, it can lead the robot or spider in a wrong direction or confuse it. If it has difficulty moving through your pages, it will stop and look elsewhere. […]

[…] You should see a “preview” copy of your post as it would actually appear on your blog. Using Firefox Web Development Extensions you can easily run your post through several validation tests from the Web Development toolbar. If you are not using Firefox, then visit any of the validation test sites found in my post on Validating the Code Behind the Page. […]