Note

If you visit this post for Bad value X-UA-Compatible for attribute http-equiv on element meta error message from W3C Validator, you might want to read this post, instead. (2011-02-01T04:59:53Z)

Blogger Buzz just announced a new variant of Simple template, Super Simple, which is made by Josh Peterson and that is what this blogging is using. Generally I am happy with Simple, though I made quite some modifications on my own and its element structure always a headache to me if I dont use Firebug or Chromes inspector to help me figure out. I feel <div> in Simple template could be thousands of Mille-feuille being stacked up, or something like buy one, get twenty free. The styles, hell, period.

I have been trying to clean up in order to get good score in Page Speed or ShowSlow. Combination and compression of CSS and JavaScript of my own are all I could do, I managed to rise the score from around 78 to 84. The Bloggers ..widget_css_2_bundle.css is a mess, it has a lot of unused and inefficient styles which I can not touch. Also, Disqus is another score lower, it loads many JavaScript and CSS. But Disqus is a must-have to me, I am not going to use Bloggers commenting system.

Put them all together: I decided to make own on my own.

The question is should I choose HTML5? I have always want to make a blog which is HTML5 valid. (I really dont care if visitors browser can support HTML5 or not) Being valid is always very hard for Bloggers templates, I havent seen any. Maybe classic template would be able to achieve the goal, but I wasnt sure. Now, take a look at the errors (from W3C validator):

Line 2, column 41: Attribute b:version is not serializable as XML 1.0.

<html b:version='2' class='v2' dir='ltr'>

Line 2, column 41: Attribute b:version not allowed on element html at this point.

<html b:version='2' class='v2' dir='ltr'>

Line 4, column 60: Bad value X-UA-Compatible for attribute http-equiv on element meta.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Line 23, column 128: & did not start a character reference. (& probably should have been escaped as &amp;.)

n.css?targetBlogID=8246144319788321828&zx=c0ac3a3d-1faa-44ba-8aaf-6ff4fdba4b17

Line 455, column 500: Bad value 30px for attribute height on element iframe: Expected a digit but saw p instead.

frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>

Line 455, column 500: Bad value 100% for attribute width on element iframe: Expected a digit but saw % instead.

frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>

Line 455, column 500: The marginwidth attribute on the iframe element is obsolete. Use CSS instead.

frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>

Line 455, column 500: The marginheight attribute on the iframe element is obsolete. Use CSS instead.

frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>

Line 455, column 500: The scrolling attribute on the iframe element is obsolete. Use CSS instead.

frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>

Line 455, column 500: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>

Line 455, column 500: The allowtransparency attribute on the iframe element is obsolete. Use CSS instead.

frame" allowtransparency="true" title="Blogger Navigation and Search"></iframe>

Line 644, column 84: The border attribute on the table element is obsolete. Use CSS instead.

e border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>

Line 644, column 84: The cellpadding attribute on the table element is obsolete. Use CSS instead.

e border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>

Line 644, column 84: The cellspacing attribute on the table element is obsolete. Use CSS instead.

e border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>

Line 682, column 84: The border attribute on the table element is obsolete. Use CSS instead.

e border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>

Line 682, column 84: The cellpadding attribute on the table element is obsolete. Use CSS instead.

e border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>

Line 682, column 84: The cellspacing attribute on the table element is obsolete. Use CSS instead.

e border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>

Line 702, column 87: & did not start a character reference. (& probably should have been escaped as &amp;.)

m/rearrange?blogID=8246144319788321828&widgetType=Attribution&widgetId=Attribu

Line 702, column 110: & did not start a character reference. (& probably should have been escaped as &amp;.)

144319788321828&widgetType=Attribution&widgetId=Attribution1&action=editWidget

Line 702, column 132: & did not start a character reference. (& probably should have been escaped as &amp;.)

Type=Attribution&widgetId=Attribution1&action=editWidget' onclick='return _Wid

The errors above is Super Simple template on blog without any posts or any removable widgets. I think its pretty possible to be valid, well, at least, only few errors. I recalled when I moved on to Blogger, I gave up when I wanted to try to clean up the errors, some are fixed in generation of HTML, I had no way to clean up.

Why I want to make one instead of modifying Super Simple? The reasons are

  1. Its not true HTML5 even its valid it doesnt have HTML5 spirit, for example, its still using h1 > h2 > h3 for blog title, date, and post title. In HTML5, there are semantic elements such as <header>, <article>, I want to use them.
  2. Its not clear for the permission of modification. Of course, Blogger encourage you to modify Super Simple, but do you have to attribute the original template author? Definitely in my opinion. But I dont think you should put that in footer. Since Blogger added Template Designer, the attribution is fixed at footer. You can remove it in template manually, but again, its not the right thing to do.

I personally dislike such kind of linkback, therefore I am going to create one on my own, a HTML5 template.

I was thinking to use classic one when I read this, now I think I should stay with XML template because:

  • I can still play with new toys that Blogger have.
  • I dont know if I can have Popular Posts in classic template or other gadgets.

So, you might see some glitches in the following time.

1   Updated on 2010-09-18

I am just starting my template and I am 100% sure that no way I can make a HTML5 template valid. Here is a very simple template:

<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin/>
</head>
<body>
</body>
</html>

It generates:

<!DOCTYPE html>
<html>
<head>
<title>Oops! Broken!</title>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/3761248391-widget_css_bundle.css' />
 <link rel="stylesheet" type="text/css" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=8246144319788321828&zx=9739f52a-690f-49ac-b9ee-e63848f84276"/>
<style type="text/css">#navbar-iframe { display:block }
</style>

<style id='page-skin-1' type='text/css'><!--

--></style>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body>
<div class='navbar section' id='navbar'></div>

<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="http://www.blogger.com/static/v1/widgets/3254348898-widgets.js"></script>
<script type='text/javascript'>
[snip]
</script>
</body>
</html>

The problem is on second stylesheets link, validator told me the only one error:

<pre>Error  Line 6, Column 128: & did not start a character reference. (& probably should have been escaped as &amp;amp;.)

n.css?targetBlogID=8246144319788321828<span style="color:red;font-weight:bold">&</span>zx=9739f52a-690f-49ac-b9ee-e63848f84276</pre>

Now, I recall this is the error I saw when I want to clean it up at first time. There is no way you can fix it, only Blogger team can.

2   Updated on 2010-09-28

I have asked about the validation ten day ago, but you know its Google. Add your comments to that post, hope that will get their attentions.