Skip navigation

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.

HTML – Validation

CSS – Validation

Validation by Uploading Files – Validate From Your Computer

Validators – Resources and Articles

HTML – Articles about Validation

Meta Tag – Validation

7 Comments

  1. Posted February 19, 2006 at 7:16 am | Permalink

    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?

  2. Posted February 19, 2006 at 9:03 am | Permalink

    Excellent question, Martin.

    According to the W3C Jigsaw CSS Validator, it covers CSS2. I believe that HTML Validator also covers CSS 2.1 or better, as does HTML Help CSS Check.

    When you are dealing with hacks, though, do not expect the CSS Validators to be familiar with all the different hacks. Check Fixing Browsers Bugs and Hacks and CSS Fixing Browser Bugs from the WordPress Codex to find more helpful information on figuring out the hacks done in that Theme.

    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.

  3. Gopi
    Posted February 15, 2007 at 8:18 pm | Permalink

    Can you give the code on how to wrap the text using tag

  4. Posted February 15, 2007 at 8:55 pm | Permalink

    I don’t understand what you are asking. Any code in a web page or WordPress post can be wrapped in an HTML tag such as:

    ...this is an <strong>example</strong> of using bold in a sentence...

    I just type it, or you can use the quicktag buttons in your WordPress post editor. Is this what you want to know?

  5. Posted July 30, 2007 at 8:16 am | Permalink

    It is really important to validate your code, cause otherwise search engines just omit the page incase its got too many errors.

    try using validator.w3.org its really helpful.

    all the best!

  6. Posted September 20, 2007 at 10:01 am | Permalink

    I can’t resist myself to praise this post. This compilation is just fantabulous. Almost everything is here, don’t have to search for anywhere. Thanks Lorelle.

  7. Jeffrey Morris
    Posted July 9, 2013 at 2:14 pm | Permalink

    Reblogged this on DCS Enterprise.


15 Trackbacks/Pingbacks

  1. [...] It is critical to ensure all such errors and road blocks are fixed. To put it simply, this means you need to test, test, test your web pages. [...]

  2. [...] 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. [...]

  3. [...] 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. [...]

  4. [...] Validating the Code Behind the Page [...]

  5. [...] Validating the Code Behind the Page [...]

  6. [...] Validating the Code Behind the Page [...]

  7. [...] Validating the Code Behind the Page [...]

  8. [...] Validating the Code Behind the Page [...]

  9. [...] Validating the Code Behind the Page [...]

  10. [...] Validating the Code Behind the Page [...]

  11. [...] It is critical to ensure all such errors and road blocks are fixed. To put it simply, this means you need to test, test, test your web pages. [...]

  12. [...] Validate Code [...]

  13. [...] Validate Code [...]

  14. [...] Validating the Code Behind the Page [...]

  15. […] 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. […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,691 other followers

%d bloggers like this: