Is Your Website W3C Validated? If not, Why?

I’m proud today to announce to the world that Site Sketch 101 has been validated by the World Wide Web Consortium as valid XHTML 1.0 Strict.

When I first stopped by W3C’s validator, I was faced with over 180 major errors on home page. Yet after about 3 hours of carefully digging through the suggestions that it provided, I was able to receive the hearty approval of W3C.

I actually started out to earn the gold star for XHTML 1.0 Transitional which I’ve learned is a bit easier to obtain than the XHTML 1.0 Strict.  After accomplishing that first task, I then stepped it up and went after the Strict validation and the CSS validation.  I’m proud to say that I now what both.

I’m sure that some of you are sitting back and wondering what I’m talking about.  I know that if I would have read the beginning of this article about 2 years ago, I wouldn’t have a clue what I was reading.  Stick with me.  Let me teach you what you need to know to get going.

What is W3C Validation?

The World Wide Web Consortium (W3C) is an international organization that develops the standards on which web pages are built.  It develops rules for coding and development that the online  community agrees to use in order to create a consistent online experience across browsers and across operating systems.

In other words, they are the organization that brings Internet Explorer, Mozilla Firefox, and Safari web browsers into agreement to deliver the same browsing experience to people on each browser.

If a website is coded according to the standards setup by W3C then it should appear the same in all browsers.  If you’re a website designer then you’ve probably experienced the headache that is trying to get a web page to appear the same across multiple internet browsers.  Validating your site’s code according to the W3C standards is the first step to simplifying that sometimes daunting task.

Most of the variations in display that we see across browsers are simply the result of various browsers attempting to make their best guess at how to display broken or invalid code.  If your source code has unclosed tags or elements that aren’t universally accepted then they can display it however they want to.  If the code is valid, however, then it should appear the same in all browsers.

Why is W3C Validation Important?

There are, in fact, several reasons that you should take the time to validate your website to the standards of the World Wide Web Consortium.

  • Validation creates consistency across multiple internet browsers.
  • Validation supports better search engine listings.
  • Validation is a sign of professionalism.

There’s really no wrong reason to get your site’s code to be W3C validated.

How do I Get Started With W3C Validation?

If you know anything about the basics of html then getting started won’t be difficult. Simply click through to the W3C Validator, type in the name of your website, and then follow the instructions that it provides you for resolving each issue.

If you have questions simply drop them in the comments section below or you can do like I did and ask your followers on Twitter.  I was very pleasantly surprised at how helpful some of my friends were.

I believe that one of the three fundamental principles for building a successful blog is to develop a brilliant design.  I understand that as bloggers many of you know very little about coding html, xhtml and css so I’ve decided that I’m going to work to provide you with one article each week where I’ll work to educate you on the basics of code.

Learning how to edit or write this code can be incredibly complex so I’ll be sure to make it as easy as possible to understand.  I promise that you’ll be able to pick it up.

Group Reflection

Has your site been validated by the World Wide Web Consortium? Why not?

How can I help you as you work toward creating a website with valid code?  What errors is the validator presenting you with?

Share your Opinion

and be a part of the discussion

  1. *Name (no keywords)

    *Mail

    Website

    * Indicates Required Fields
    Your Comment


60 Vibrant Comments

We would love to hear yours!


  1. December 29, 2009

    Eric B. said:

    Currently, my site is using valid HTML 5 code. I decided to choose this because I wanted to test out the new HTML 5 doctype (but still be usable in older browsers).

    I’ve written about the importance of HTML/CSS validation before, and I decided that HTML validation has some importance, but not so much for CSS.

    HTML validation is more important because HTML controls the structure of the document, and if there are some errors, for example elements not properly nested, it could possible cause a browser to mess it up, and make your site unusable.

    CSS validation, however, is less important because it only focuses on the presentation, and not the structure and content itself. It’s okay to get away with invalid CSS for using features in CSS3, etc. However, I think it’s not okay to have invalid CSS because of poor coding.
    My Latest Blog Post: 7 Ways to Boost Your Development Productivity


    • December 29, 2009

      Nicholas Cardot said:

      There is literally only 1 thing that is currently holding me back from my HTML 5 validation and that is whitespace in the URLs of the social bookmarks that I’ve coded into the bottom of each post. I use WordPress’s tag the_title_attribute(); and when it generates the title in the URL it doesn’t use the html version of white space (%20). If I can find a way to filter it then I’ll be good to go.


      • December 29, 2009

        Eric B. said:

        I believe that PHP can escape URLs for you, with something like this:

        echo 'http://example.com/' . urlencode('part of url with spaces');

        That would return:

        http://example.com/part+of+url+with+spaces

        • December 29, 2009

          Nicholas Cardot said:

          Here’s what I’m currently using to create the social buttons. The class attribute is used to generate the icon and set the width and height. I’m not using the because I want the overall page to load faster. Each of the buttons basically looks similar to this one. It’s the_title_attribute(); that is creating the spaces. How would you rewrite this particular line of code? Also, as you can tell, this chunk of code is not inside any php like in an echo or anything. Only those tags are. What would you advise?

          a class=”sbdelicious” href=”http://delicious.com/post?url=< ?php the_permalink() ?>&title=< ?php the_title_attribute(); ?>

          Ignore the extra spaces and the lack of a < at the beginning. I couldn’t get the code to display on here and this was the only way to share it in the comments without it showing off the button instead of the code for the button.


          • December 29, 2009

            Eric B. said:

            According to the codex, the_title_attribute can accept a few parameters, including whether to echo or to return. It echos it by default.

            So to apply urlencode to the_title_attribute:

            <?php echo urlencode(the_title_attribute('echo=0')); ?>

            • December 29, 2009

              Nicholas Cardot said:

              It worked. Thank you. A million thank yous. Now I’m going to spend the next few minutes incorporating that into the rest of the site (home page and single page). Thanks so much.

              Now that it conforms properly as both XHTML 1.1 Strict and HTML5 Experimental, which is better? Would I be better off waiting until more browsers support HTML5 before switching the DOCTYPE information?


              • December 29, 2009

                Eric B. said:

                It doesn’t really matter. If a web browser supports XHTML 1.0 Strict, it’ll support HTML 5. You just can’t use some HTML 5-specific features like <header>, <aside>, etc.


                • December 30, 2009

                  Nicholas Cardot said:

                  Oh. Okay. Do you know when HTML5 will no longer be experimental?


                  • December 30, 2009

                    Eric B. said:

                    Probably when everybody stops using Internet Explorer. I actually don’t know exactly when, but it seems like IE is the only browser that does not support at least part of HTML 5.

                    So my site could pretty much be XHTML 1.0 Strict valid if I removed the target=”_blank” attributes, but the way the HTML 5 doctype is structured, it will at least put non-supporting browsers into standards-compliance mode.
                    My Latest Blog Post: FWebDe Is Now Hosted at WPWebHost


  2. December 29, 2009

    Ron Leyba said:

    My blog is still not yet validated by the W3C, its just like, if I fix the recent errors, new errors will come up. It was like I’m on a continuous loop.
    My Latest Blog Post: Sikat Ang Pinoy


    • December 29, 2009

      Eric B. said:

      Looking at your site, it seems that your only error is an extra ul ending tag. I’ve had this problem in WordPress before, caused by an empty widged area. Perhaps that’s the problem? (Sorry, didn’t check the actual location of the error)
      My Latest Blog Post: 7 Ways to Boost Your Development Productivity


      • December 29, 2009

        Nicholas Cardot said:

        I checked the source code and he actually has an empty set of ul tags with nothing it in. It just needs removed and the site would be completely valid.


        • December 29, 2009

          Eric B. said:

          Yeah, it looks like lists have to have at least one item to validate properly.

          The comments around it say that it is part of a section called “bottom widebar”, which according to the site for the theme, is a widget area.

          So, to fix that, you could either put a widget in there, or you could just remove the widget area. If you have some basic knowledge of PHP, you could also set it up to check if there are widgets in that area, and if there aren’t, display some default stuff (like an empty li)
          My Latest Blog Post: 7 Ways to Boost Your Development Productivity


  3. December 29, 2009

    Gordie said:

    I’ve never even heard of this. I’m crap at code. I’m more of a content person.

    I will try it. Looking forward to your lessons on code. I want to have some basics. Thanks in advance.
    My Latest Blog Post: Beyond Blogging.


  4. December 29, 2009

    Ryhen Satch said:

    After a year of trying out all sorts of ridiculous things on my blog, I somehow learned the basics of HTML. I don’t think I could go any more beyond that, but I appreciate being informed about things like this. W3C… yeah, sounds cool. Does it come with fries and a softdrink?

    Thanks for sharing, Nick. Oh, and Happy New Year!!
    My Latest Blog Post: Suffering & Pipe Dreams Of A Virtual Bodhisattva


  5. December 29, 2009

    Senthil Ramesh said:

    Hey Nick, most of the themes now is W3C validated. Does this mean wordpress users having W3C validated theme doesn’t have to check it again or often?
    My Latest Blog Post: 5 Ways to get more followers on Twitter


    • December 29, 2009

      Nicholas Cardot said:

      Most premium themes are valid, yes but many free themes are just thrown together by people working to create bait to get people to visit their websites and are often filled with coding horrors. It’s always good to check it out after upgrading. It’s also important to check after installing new plugins. Many of the errors on my site were actually caused by poorly written plugins. I actually opened the plugin files and modified the xhtml that was being output by it.


  6. December 29, 2009

    Vikas| vikas-gupta.in said:

    Congratulations! :)

    I have many errors on my blog (some theme errors) but have no time or tech knowledge to correct them. I will surely work on this later. You must have a lot of tech knowledge because you did it in just 3 hours!

    BTW you can now show a ‘W3C validated logo’ on your blog! :)

    BTW, even the official Google blog has errors! On 14 June 2009 it had 412 errors and 109 warnings LOL! :mrgreen:

    Ok now a suggestion. Please publish a post (tutorial) on how to make a custom page for comment subscription manager. I really like it whenever I come here to unsubscribe to comments (the default WP GUI sucks!). Thanks.
    My Latest Blog Post: My Nokia 1100 phone has completed four successful years


    • December 29, 2009

      Nicholas Cardot said:

      I spent hours customizing that subscription page. I essentially had to wrap the entire plugin in a custom template page. It wasn’t very easy and it’s completely different for every single theme being used.


  7. December 29, 2009

    Glen said:

    My site passed the XHTML Transitional test. Haven’t checked the Strict yet.
    The CSS test showed a number of areas for improvement.

    Nice article on an often forgotten topic.

    Thanks.
    My Latest Blog Post: Make Your New Year’s Resolutions Count


  8. December 29, 2009

    Keith said:

    I have validated and I have a couple of issues from 3rd party widgets, but they are minor and I just haven’t had time to search my code for them to fix.
    My Latest Blog Post: Do you Use Disqus Or Other Comment Sign In App?


    • December 29, 2009

      Nicholas Cardot said:

      Time is a valuable asset that a lot of people seem to find themselves having a shortage of. I completely understand if you don’t have the time right now to sort it out.


  9. December 29, 2009

    Eric said:

    I just checked my blog and the validator says there’s 17 errors and 1 warning for XHTML 1.0 Transitional.

    I know quite a bit HTML and some CSS and a bit of XHTML enough to get me by but not enough to build a great website or anything of that sort.

    Am looking forward to the course on coding you’re going to be sharing with us here.


  10. December 29, 2009

    sernan said:

    nice find.. tested my site and found 30 errors! My goodness!
    I’d better start now, fixing those errors before the new year ends… Thanks and Happy New Year Nick!
    My Latest Blog Post: What type of worst "Boss" are you?


  11. December 29, 2009

    Tony said:

    Good thing we have something called, “New Year’s Resolutions.”
    My Latest Blog Post: 4 Ways to Maximize Your WordPress.com Blog


  12. December 30, 2009

    Tony said:

    Just checked my site. The results weren’t pretty. Sigh.
    My Latest Blog Post: 4 Ways to Maximize Your WordPress.com Blog


  13. December 30, 2009

  14. December 30, 2009

  15. December 30, 2009

    Tisha C said:

    I am finally back in action and trying to catch up…my comp was down for 3 weeks. I am currently taking a web design class and we use the WC3 Validator religiously!!! I have to say that my instructor swears by it. It has saved me alot of head aches. It is a very good tool to use. In learning xhtml code with out using this tool I would have a whole lot of mistakes floating around out there!!!
    T


    • January 1, 2010

      Nicholas Cardot said:

      It’s a good habit to get into. It’s good that you use it a lot. It will save you a lot of hassle down the road. Do you have any websites up yet that you’ve made?


  16. January 1, 2010

    chandan said:

    My blog is on blogger and I think my blog is by default w3 validated. is not it Nick?
    My Latest Blog Post: Wish you all happy 2010


  17. January 1, 2010

    Tisha C said:

    I do have a church website that I created but it is way outdated and I am in the process of revamping the whole site. It is alot of fun to see the finished product.


  18. January 1, 2010

    Web Design Company said:

    Hi,

    I had recently validated my website and that has successfully passed. But, I really didnt thought for the blog which is installed in a sub directory apart from the web pages.

    I just tested it and it has 52 errors and 19 warnings…poor me :(

    I am to fix them as soon as possible.

    - J.
    My Latest Blog Post: 8 Don’ts For htaccess


  19. January 2, 2010

    Web Design Company said:

    Yes,

    That’s poor how I could make such a mistake, but true human make mistakes :(

    Almost all fixed. Need a little more to check and than I to upload.

    These errors brought up after the theme update which I did not care, my previous theme was fully W3C compliant as of my website.
    My Latest Blog Post: 8 Don’ts For htaccess


  20. January 8, 2010

    Don Gilbert said:

    W3C Validation is a must – there are so many poorly coded WordPress and Joomla and other templates out there that I spend a lot of my time fixing the validation – but oh – it is a sweet feeling going to 200+ validation errors to that nice, slick green bar.

    Woot!
    My Latest Blog Post: Why Your Small Business Can’t Ignore Social Media Any Longer


  21. January 27, 2010

    Anthony Feint said:

    “If the code is valid, however, then it should appear the same in all browsers.” This isn’t true – My developers, have to create separate code for different browsers (which doesn’t validate) to ensure it works. Browsers don’t actually stick to these standards!

    Google.com doesn’t even validate.

    When we push a new version of our app, we need to test it in 20 browser versions and we take around 2 weeks doing code tweaks to ensure it works in all browsers
    My Latest Blog Post: How to Capture Every Mention of Your Name


    • January 28, 2010

      Nicholas Cardot said:

      Anthony Feint » Although you are right, validation is one of the first steps to helping accomplish equal display of your website in all browsers. Ideally that’s what it was designed for. The differences that do show up are things that aren’t defined by W3. The code that is verified by them will be very similar in most browsers.


  22. February 4, 2010

    Mikkel 'DaneBlogger' Juhl said:

    Well yeah… But does it really helps the SEO?

    And I’m skeptical about the professionalism, only if you are a freelancer, who works with websites.

    I don’t think people, W3 validates your site to see if you’re “professional enough”
    My Latest Blog Post: How to Guest Post the Tactical Way


  23. May 8, 2010

    Ellen said:

    Does the validator check the whole site-all pages? Or do you have to go page by page?
    I know some code, but am sooo rusty!