Saturday, October 2, 2010

W3C Validating Blogger XHTML Template - Blog Validation Errors

What is W3C ?

W3C stands for 'World Wide Web Consortium'. This main international standards organisation was founded in October 1994 and is headed by Tim Berners Lee. W3C was established with a prime aim to ensure compatibility and set new standards for different incompatiable HTML Versions available at that time. Since then till today, W3C have kept revising World Wide Web (i.e WWW) standards infact setting WWW grammar for different web languages like HTML, XHTML, CSS, etc and its on this runs internet. W3C's globally standarised web grammar guides entire World Wide Web community and encourages all web developers and coders to adhere its web norms. W3C's ultimate aim behind this is to overall improve standards of web documents being offered online and give quality assurance to internet users. You can read more about W3C in here W3C INFO.

What is Validation ?

In simple English language, to validate means to simply test the correctness of something against pre-determined ideal norms, conditions, rules, etc. In our case of interest its either our website or blog which we have to validate in par with W3C's web standards. Why to do this? I'll tell you its importance later. The best way to do validation is by visiting W3C's Markup Validation Service Website and checking how many validation errors your blog reflects

Steps Validating Blogger XHTML Template

Fixing Validation Errors - How to Validate Blogger's XHTML Template ?
Step 1) Visit W3C's Markup Validation Service Website. Then enter URI of your blog's address and click 'Check' button to get your validation report.

Step 2) Now Validation Error Report shall be reported to you. Errors highlighted in this many be usually many, either few and only in very rarest case not at all. If you've errors reported then start analysing them one by one. Even if you don't understand them all at very first time don't get upset, read each reported bug slowly and steadily then only you'll definitely understand atleast few of them.

Step 3) Follow this 3rd step only if you've got errors reported at 2nd step above, else step 3 is not applicable for you. Now I assume that your blog have many errors reported and its XHTML template is in very bad shape. So lets start fixing the most comman validation bugs in your blogger template.

Step 3.a) Lets follow Stelian Andrei's advice from Yoboo.blogspot.com.
According to Stelian, "Major validation errors of any Blogger's XHTML template can be easily fixed by simply changing its DOCTYPE DECLARATION code. He recommends changing 'Strict DOCTYPE' declaration to 'Transitional XHTML DOCTYPE delcaration".
This simple advice worked great for me and major validation bugs of my blog were fixed without any extra headaches. I nailed them down straight from 323 errors with only 168 errors remained to be tackled. Almost 50% of my validation issues were solved, What a sign of relief ?
To implement Stelian advice you 1st login with your blogger's account then visit 'Layout' -> 'Edit HTML' (Please! 1st do take backup of your current template for safety by clicking 'Download Full Template') and then make necessary changes in your blog's template as illustrated in pics below.
Change This...
earlier strict doctype
Into this...
setting transitional doctype
Then click 'Preview' button (Only if every thing is ok) then continue clicking 'Save Template'.
Step 3.b) Fixing the real validation culprit called 'Quickedit' in your blog's XHTML code.
What are Quickedits ? See whenever you login in your blogger account and then visit http://your-blog-name.blogspot.com you always see edit icons. Once you log off they again disappear. Most free blogger templates by default includes 'quickedit' to ease up editing blog directly on its front view. I don't use 'quickedit' at all as I always prefer to use 'Page elemets'. Thus Quickedits are far more useless to me. The most notorious fact of this 'quickedit' includes is that they contributes to another 30 to 40% of validation errors. So it makes sense to remove them permanently and still further minimize template's validation errors. Remember that if you remove them it won't affect fuctionality of your blog. What will actually happen is that you won't see quickedit icons anymore on your blog's front view (even if you're logged in your blogger account online). That's It!
To remove 'quickedit' again login with your blogger's account then visit 'Layout' -> 'Edit HTML' (I repeat again, do take backup of your template for safety) and then make following changes in your current blog's template as illustrated in pic below.
finding quickedit
Look for 'quickedit' includes by pressing CTRL + F as shown in pic above (Here I've copied my template code in my notepad for editing). I think there are normally as many as 5 to 6 quickedit includes in most free blogger's templates. You better verify this on your own by finding how many such 'quickedit' includes are there in your blog's template and then removing each one by one.
Once you do so major validation errors of your blog will get cured. To verify this, now test your blog again by visiting Markup Validation Service site. Surely you may find many earlier validation errors of your blog got resolved.
Some of you may insist on not removing 'Quickedit' includes but I do recommend you better remove them to get your site validated. I also expect Google's Blogger team must fix this 'Quickedit' includes' validation bug as early as possible since it is affecting many blogspot's blogs.

Step 4) Fixing Other Validation Errors
Always add 'ALT Tag' in your Images Code
adding alt tag
Blogger by default neither asks for nor adds any 'alt tag' in your images code. So the only solution to insert 'Alt Tag' is by manually adding it on your own to all your images code. (via 'Layout' - 'Edit HTML'). As per W3C standards it is a must that all images must have 'alt tags' specified. Alt tags describes images and another benefit of adding them in your blogger's images codes is that you get an SEO ( search Engine Optimization ) advantage too. This helps Google's robot to easily index your images in its image search engine and drive huge traffic flow to your blog. So always do specify 'alt tag' in your images code and also Enable 'Image Search' via Google's Webmaster Tools.

Individual Variable Validation Errors
These vary from template to template and thus has to be fixed on individual accounts. Hint:- Use W3C reports statements to fix these individual variable errors.

Step 5) Uncontrolable errors which only Google's bloggers Team Can Fix :-
Navbar's Validation Error
Blogger embeds many server-side includes in all blogs including navbar. Most of you including me hate NAVBAR's display and prefer hidding it. Even after hiding navbar its server side code is still physically present in blogs html output and accounts to contribute another Validation errors. To my knowledge Navbar adds some 4 to 5 validation errors. This is again must be fixed from Google's Blogger Team side and possibly out of our control.
Blog's Search Result String '&max-results=20' Error
Blogger's default search string e.g http://hackosys.blogspot.com/search?q=sfdsdfsdfsdfsdf&x=0&y=0 also gives validation errors. The problem lies in search strings itself which optputs as http://hackosys.blogspot.com/search?q=sfdsdfsdfsdfsdf&max-results=20' id='Blog1_blog-pager-ne. Here '&max-results=20' gives few validation errors.