What is HTML5?
HTML is a markup language especially used for structuring data and presenting content world wide web.This is the fifth version of HTML since the origin of www.HTML5 is a better development of the previous version of html.HTML 5 helps search engine to index your website or blog in better way.HTML 5 goal is to improve the search quality and support the multimedia technology for search engines and easily readable by humans and understood by computers.
What are the benefits of validating Blogger template to HTML5 Version
HTML5 versions have lot's of advantages few of them are below:
- Improved markup and cleaner code
- rich media elements
- browser rendering smooth and faster
- support search engine to index website or blog in better way
- support to Mobile ready projects
- design elegant forms
- User interface enhancements
- Better Interactions and Doctype
- Many more..
How To Make a Blogger Template Valid HTML 5 Version
Installation steps:
Before proceeding to installation steps first make sure to take a backup of your template.
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML
Step 3. Now look for the below code,you will find all this code in your template just above the <head> tag.
Step 6. Now search for the following code <b:include data='blog' name='all-head-content'/> by using CTRL+F or CMD+F (Mac) keys and replace it with the below code.
Step 3. Now look for the below code,you will find all this code in your template just above the <head> tag.
<?xml version="1.0" encoding="UTF-8" ?>Step 4. Now replace all the above code,with the following below code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<?xml version="1.0" encoding="UTF-8" ?>Step 5. Now replace the </html> with </HTML> in your template,you will find this tag in the bottom of your template.we have highlighted Both the html tags of your website or blog,so don't forgot to replace the last one.
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
Step 6. Now search for the following code <b:include data='blog' name='all-head-content'/> by using CTRL+F or CMD+F (Mac) keys and replace it with the below code.
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>Step 7. Now Search for the following <b:skin><![CDATA[ tag and replace with the following below code.
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<style type="text/css">Step 8. Now Search for the following ]]></b:skin> code and replace with </style> code. now your final code snippet will look like this:
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
<style type="text/css">Step 9. Now remove all the below code snippet your find in template.you will find so many times,remove all of them.
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
//All CSS Code Here..
</style>
whenever you will add new widget you need to remove again the below code.
<b:include name='quickedit'/>Step 10. And finally remove all the below code from your template.
<b:include data='post' name='postQuickEdit'/>Step 11. Now Save your template..Done !
or like below;
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>