Tips on w3c Validation for your website

I am hoping that most of you know what w3c is. Well let me give you a little overview of what w3c is before I give out some tips on how to fix some of the common mistakes. W3C was developed in 1994 for the sole purpose of having web standards and guidelines. Why W3C? “In order for the Web to reach its full potential, the most fundamental Web technologies must be compatible with one another and allow any hardware and software used to access the Web to work together” (W3C, About).

As I go along, I see alot of websites are coded horribly. Believe me or not they are. All because the designer of the site was careless. Sometimes the script coders were. Open tags are left everywhere which causes the website to be W3C xhtml invalid. Or even the css, which shouldn’t be, is invalid for some sites. Let me assist you on how to fix these issues. But I know most of you will probably think that this is another boring article and will stop reading, so let me tell you the benefits of having your site w3c valid.

Faster Loading

If you have broken html codes, your site will take longer to load because the browser have to fix for your mistakes often which they are not really good at. Also it will take longer for search engines to spider your pages therefore slowing down your indexing rate.

Search engine friendly pages

Say that your designer or even you were trying to add something on your site, and you made a mistake like the one below:

<span Helping bloggers is the motive of our site.</span>

rather than having the right thing which looks like the code below:

<span> Helping bloggers is the motive of our site.</span>

The effect of this would be that when search engine indexes it and someone researched for helping bloggers. The site with the error will show in the description <span which will turn away your users whereas the site which is valid will not have this issue.

Less load on server / Cheap hosting Price

By having all the style codes keep repeating in your html file you are going to make the size of your html files very large which will take up alot of space in your hosting account. Then the loading of these big files every time will cause more bandwidth to be used. By using CSS stylesheet you can minimize that, but remember to have it valid. (Check CSS Validation Here).

Larger Audience / Browser Compatibility

By having your sites both xhtml / css valid, you will increase the chances of compatibility of your site in all browsers. Which means that now you can target a larger audience base because before you were loosing all the audience who couldn’t see your website due to the invalidation.

Easy to make changes in the future and less designer cost

Let me tell you. When I get contracts for existing sites, and they want few fixes I tell them that I am not responsible for all the xhtml invalidation, and if they want me to fix those errors they have to pay an additional fee. Most designers don’t like working on something that is messy and have broken codes.

Now that you have seen the benefits of having your site w3 Valid are so many. Let me tell you the common mistakes that people often make.

Alot of php programmers tend to leave the code & in the codes. Even when I was putting entrecard codes on my website it was xhtml invalid. I had to make it valid.

<script src="http://entrecard.s3.amazonaws.com/widget.js?user_id=10820&type=standard_127" type="text/javascript" id="ecard_widget"></script>

Always remember to add amp; after the & symbol to make your site xhtml valid.

Another common mistakes that I see on sites are unclosed tags. Let me give the most common example of that.

<img src="http://xxx.com">

Alright fellas, while this tag gets you an image externally. It is not xhtml valid. Why not? Because you forgot to close the image tag. Most importantly you forgot to add your Alt text. Learn Why Alt Texts are important for your website.

The correct code to display an image would be

<img src="http://xxx.com" alt="XXX" />

Now not all images need to have alt. You can leave the ones that you don’t think need to have an alt tag blank. Like alt=”" and it would be fine.

Another most common mistake that I see with html which is growing very fast is the improper use of javascript. More and more sites are using javascripts now which is good, but use it properly.

<script type=’text/javascript’ src=’http://xxx.com/xx.js’></script>

Many sites are lacking this part in their javascript which makes the site xhtml invalid.

So far I have managed to fix all of my xhtml errors except for the youtube error which is because the embed tag doesn’t exist according to W3C hence why I moved to Revver.

Other than the above ones there aren’t any other problems except for a few minor ones.

Let me point one big one out because I once had a client whose sites were full of the incomplete <br> tags. Apparently the coder who coded the design didn’t know enough and while learning just saw that this tag makes a line so started using this one. The real code if you just want to make it a line is <br />.

Come to next issue is CSS Validation. Css validator really tells you how to fix each problem, so basically just look incase. For the most part CSS is valid because most designers know how to work it. But what a shock would be for the phpLD users and everyone who uses the phpLD default template as their base to make new templates is that phpLD Default’s template does not have a Valid CSS.

Now above are the few tips that I thought everyone needed. Now the next think I think you should do if you haven’t is check your site’s validation.

W3C CSS Validator

W3C XHTML Validator

Now if your site passes, then you get to have the cool buttons that you can place on your website, but they are not that cool, and sometimes ruin the look of your site. Therefore BlogFlux offers a great tool to make your image match your theme way better than the ones above. Use those to put it on your site. I don’t know if you notice, but the xhtml one give you the url that if you put on your site will take your users to the validation of your page, but CSS validator won’t do that.

I have the cure for that too. For bloggers who are using wordpress:

<a href="http://jigsaw.w3.org/css-validator/validator?uri=<?php bloginfo(‘home’); ?>" rel="nofollow">

Paste the code above and it will take your users to your site’s css validation page rather than the actual validator and having the user type in the url.

for anyone else who wants to use it other than wordpress just remove the php home tag and put your site’s url there.

Next thing I want to say to bloggers is even when your design is xhtml valid, we make stupid mistakes while typing bloggeries and it causes the blog to go xhtml invalid, so keep checking your xhtml validation every once in a while. I am too lazy, so I put in my footer Probably not XHTML / CSS Valid The thing is I do check the blog for validation every once in a while, but this way I am atleast not misrepresenting anything.

Also you can earn your websites come more cool badges from w3 such as the Accessibility Icons. The guidelines for these are complicated so I suggest that you read it on their website for this.

Bloggeries is getting too long, so I think I should wrap it up here. I hope this article helped you guys. Always ask your designer to make the site xhtml / css valid. Always stay updated with your site’s validaton. Check it atleast once a week.

If you like this article feel free to share it on digg and other social bookmark sites.