A couple of days ago I saw one of Garry Conn's posts related to tips about image positioning in a post. One issue that I expressed my opinion on was the fact that the ID attribute of an element needs to be unique on a web page. This is due to the fact that the page will not validate otherwise. Garry replied that he is not at all worried about validation issues, because they are irrelevant to SEO (Search Engine Optimization). What this means is that no matter how many errors a web page has, it will still be indexed and displayed in Search Engines as long as the bots can crawl it's content. I'm sure he's right about this and it's every webmasters choice if he should care about validation or not.
But that's not the reason behind this post. Garry also pointed out that this blog, my beloved "The Yoboo", was also not validating according to the W3C validator. In fact, the homepage had more than 400 errors. That disturbed a little because I'm one of those guys that do care about validation. And with that in mind I set off to fix things.
The first issue I encountered was the fact that this template used a XHTML Strict DOCTYPE. As stated on A List Apart: "a DOCTYPE (short for "document type declaration") informs the validator which version of (X)HTML you're using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them." Many of the errors were triggered by the fact that the template used an Strict DOCTYPE, rather than a Transitional one. Another way to say this would be: is was formatted as a Transitional XHTML, but declared a Strict DOCTYPE. No problem. This was easily fixed replacing the original declaration with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
That apparently solved a lot of the validation errors. Now I was down to about 70 remaining. I started to fix the ones that repeated the most. One of them was "document type does not allow element 'p' here". This was caused by the fact that the body of a single post was defined by a P element(paragraph). And inside this paragraph there were several others which represented the header of the post, the content of the post and it's footer. According to the W3C standards, this was an error, so for a easy fix I replaced inside the template the paragraph elements with DIVs. I replaced the sections of the post also because I plan to use standard formatting in the future, rather that the way Blogger does things (I'm talking about the <BR> tags for separating paragraphs). So I also went to Settings in the Blogger Dashboard and under Formatting I've set the "Convert line breaks" option to "No". This of course means that I will need now to reedit all the posts and split them up in paragraphs. I'll do that some day.
After these modification there were only about 30 errors remaining. The problem with these is the fact that they're caused by the Blogspot engine itself. Due to some bad and reckless coding I had a lot of unescaped &'s. Most of them were caused by the blog Pager, the little thing that helps you get back and forward through posts. Because I wanted to get rid of all the errors, at least the ones on the front page, I commented the pager so it will not appear anymore. I'll decide if I'll place it back on the blog. Maybe by the time I do that, it will be valid XHTML.
A few more errors were caused by the fact that the Blog Achive was displayed using Hierarchy style. Switching that to "Flat List" solved the remaining of the errors so the homepage was validating. But I rather liked the Hierarchy style of displaying the archive so I hope that will be fixed as well.
After seeing the beautiful green bar I tried a few more things to make sure there are no more errors, but there were. Another issue arises with the fact that I've opted for inline comments. This creates an IFRAME element which again trows unescaped characters errors. But since I find this feature very useful, I'll let it pass.
And that's the way I managed to validate most of "The Yoboo". Who would have thought that a Blogger/Blogspot template would have so many problems? Of course there are other people that are complaining about these issues, but it seems there is no one there to listen to them. Oh well, at least my blog has the green light to some extent.
29 comments:
Hey there, good work. It validates well. You have done work on the comment spot right. All the best. Its sad that they are not making enough changes to their software. Do you believe this will have some effects in the PageRank? I have seen that high ranking sites are mostly free of errors, and there is not one blogspot blog that ranks above 7.
Hi there Lenx. Thanks for stopping by.
I doubt validation has some effect on PageRank, seeing as this mostly takes into consideration the quantity and quality of inbound links. But still, I consider that a web site that validates has less worries when it comes to changes to the HTML/XHTML changes that are bound to appear soon. And if you can follow the specifications, I don't see why you wouldn't.
One hope I have is that with the improvements that will be brought with Blogger in Draft, we will see some fixes to their engine. Maybe then, we will get rid of all the validation errors and we will be able to enter Web 3.0 with our heads held high.
It's really nice to get validated. I hope they make the changes soon. Mostly the problems are in the comments and trackback URLs ad also the blog archive. I don't like removing them, and so I have now 36 errors remaining. Even google has sixty errors and Microsoft 180 makes me brave!!
Of course, hoping to enter web3 with head held high as you say!
Lenin
I'm working on validating my blog. I have cut my errors in 1/2 using your method and doing some general 'clean up.'
Now I am at 264 Errors, 38 warning(s)
Still trying to get rid of them. I'll keep at it.
PS: I see you're validated! Great job!
Maybe an updated post about how you went about doing this?
Sorry for the delay Taylor, I was away the last few days and I'm getting ready to leave on vacation tomorrow. So I won't be spending too much time around a computer for about 2 weeks.
Regarding the validation part, the best way to go about it is to run your site through the W3C validator and look for the errors it reports. You try to fix the ones that repeat the most. For example, to have more than 200 errors on a page could indicate that you have either an incorrect doctype declared or maybe missing a closing tag.
Because I wanted at least the front page to validate, I went drastic about it and cut out everything that wasn't working and couldn't be fixed.
I'm sorry but I don't have a lot of time right now. You could also check out Lenin's Cute Writing blog and his story of validation. Maybe he can help you out.
Again, I apologize, but I have to run. I'll be back in two weeks.
Thanks for this great post...I am working on cleaning up our blog using your tips.
Great to find buddy who have concerned about the validation. Today I try to validate your yoboo, there are nine error. How can we fix this?. thanks.
Hi there
The 9 errors and 7 warnings you encountered are all caused, yet again, by unescaped ampersand characters in one of Blogger's javascripts. Removing the line:
<b:include data='blog' name='all-head-content'/>
form the header fixes this problem and the front page validates yet again. The problems this causes is that it also removes some meta information from the header, including the favicon, links to rss and the bad script. I'm not sure what all this will cause, but I haven't used TheYoboo for a long time, so I can't say I really care
all right then, thanks for the answer.
bro please help me... to check validation my blog... Error 3 ... i dont khow where wrong... thanks.
Hi there Nady, thanks for stopping by.
From what I can tell, the errors are caused by the same thing. Most likely it's that reference to authorization.css that Blogger injects in the head section of the page. Try the method Anarcho-Mercantilist explains in the comment left on the Something to fill a gap post. It's a great little hack that I've also implemented here. That might solve your problem.
thanks stelian.
but, why can not I implement like this:
<!-- <link type='text/css' rel='stylesheet' href='http://www.blogger.com/widgets/2300090209-widget_css_bundle.css'
/> .............. </style> >
</head>
<head> -->
just: like this:
<!--
</head>
<head>
-->
sorry before... thanks a lot.
Well, I guess you could do that too. But I don't see why you would also comment that link. That file provides some css rules for your blog widgets from what I can tell.
The reason why you would add just that comment is that Blogger injects a link to a "authorization.css" the moment it renders your blog. That link is not present in the layout so you can't remove it directly, but you can see it just before the closing </head> tag if you view the source of your page. What this hack does is it tricks Blogger into thinking that the head section of your blog is over and it injects that element. Only that through this hack, it injects it inside a comment tag, thus making it useless.
If I did not understand your question, I apologize. Please give me more details
i mean, where placing this code:
<!--
</head>
<head>
-->
thanks.... to help me...
You should place the code just before the closing </head> tag. So your code will look like this
<!--
</head>
<head>
-->
</head>
I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards
These articles are fantastic; the information you show us is interesting for everybody and is really good written. It’s just great!! Do you want to know something more? Read it...: Great investment opportunity Costa Rica
good article.......
How To Valid CSS 3 ?
This simple code knocked more then 60 errors. Thanks ;)
nice information, thanks a lot
Thank you very much!!
Now I've got 7 Errors & 10 Warnings. :)
M.Pinto from www.ProHacker.IN
Great Tips to make website w3c compatible!
Many Thanks,
Kiran
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
How to reduce blogger bloga template validation errors?
I would like to thanks you for sharing your important information. I really like your efforts and I alredy bookmarked your website for further information.
You may check my website which all about SEO
http://www.seohear.com/
Thanks, verry usefull information...
Helpful... Happy I could find this article to solve my errors
Very nice article, I added above code and resolved maximum errors.
please help me about below errors.
Stray start tag html. (6)
Stray start tag head.
Please help me asap.
Thanks,
Post a Comment