Calls to move to HTML5 are increasingly hard to ignore. And, if you’re on the Studiopress platform, their recent upgrade to Genesis 2.0 provides a compelling motive to make the switch.
Benefits of HTML5
First let’s run through all the usual advantages to upgrade to the most recent version of the language that marks up web pages:
- is more future proof
- has several improvements in usability and user experience,
- it was build around web apps and has features like offline storage and geo-positioning
- better for mobile devices, because of the previous point
- has better support for audio and video embedding
- provides cleaner more semantic markup
… and it’s the last point above that’s a real biggie. More later. However, now we’re on the subject we might as well list the drawbacks…
Disadvantages of HTML5
Not all web browsers offer full support for HTML5. Our old friend, Internet Explorer, is unfortunately the main culprit. Add the following code to the <head> of all your HTML5 pages to ensure they display properly on the browser all developers love to hate:
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
Let’s talk semantics
Semantic markup means using special HTML tags to describe the kind of content they contain.
So, whereas the old HTML4 tags may have been div id="thingy"; the new HTML5 semantic tags of <header>, <nav>, <article>, <aside> and <footer> more clearly describe the function of the different web page elements.
HTML5, therefore, presents cleaner code which is something all SEOs and developers aspire to.
However there is another semantic change to the HTML5 upgrade using the Genesis 2.0 WordPress theme framework which is possibly, even more important to the search engines … and that is support for Schema.org and microdata tags.
What’s Schema.org?
Schema.org is a collaboration by Google, Microsoft and Yahoo! with the idea of creating a “single vocabulary and markup syntax” agreed upon by all the search engines and browsers so that webmasters can easily markup their content and users get a better experience on the web.
Schema decides on standards of markuping elements of web content using “microdata”.
So what’s microdata?
Microdata is an HTML5 specification that labels content to describe a specific type of information.
It’s easier to give you a practical demonstration. First here’s some normal old HTML you’d find anywhere on the web today:
<div>
My name is Bob Smith but people call me Smithy. Here is my home page:
<a href=”http://www.example.com”>www.example.com</a>
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>
Here is the same HTML marked up with microdata:
<div itemscope itemtype=”http://data-vocabulary.org/Person”>
My name is <span itemprop=”name”>Bob Smith</span>
but people call me <span itemprop=”nickname”>Smithy</span>.
Here is my home page:
<a href=”http://www.example.com” itemprop=”url”>www.example.com</a>
I live in Albuquerque, NM and work as an <span itemprop=”title”>engineer</span>
at <span itemprop=”affiliation”>ACME Corp</span>.
</div>
The above two HTML excerpts will display identically to visitors but the second example makes a lot more semantic sense to a robot than the first. And, this microdata can appear as rich snippets in the search engine results pages.
Why you should bother
Other than keeping up with the latest web standards, there is another, more practical, advantage to updating your site to HTML5 with Schema support. Semantically marked up pages will appear with rich snippets in the search engine results increasing click through. They may even appear more often.
Here is Google’s answer to an FAQ question “Will using schema.org improve my site’s performance in search?”:
Google doesn,t use markup for ranking purposes at this time””but rich snippets can make your web pages appear more prominently in search results, so you may see an increase in traffic.
So if Google is saying you may see an increase in traffic with rich snippets powered by microdata, you should be interested.
How to upgrade to HTML5 on Genesis
OK, enough already! Here’s the “how to”. It’s really very easy. See the video below.
Zip along to 2:48 in the video where you get the practical demonstration of what you do, which is the following.
After having successfully copied all your site’s files, backed up your database and upgraded to Genesis 2.0 (like a good webmaster!) paste the following lines anywhere in the functions.php file of your Genesis child theme:
// Enable HTML5 markup
add_theme_support( 'html5' );
Refresh your site and, congratulations, you have successfully turned your site into HTML5 with the Schema mark-up goodness. However, you may also notice that the structure and design of the site has completely broken. Ouch!
Remember that many of the main XHTML tags have changed to the new, more semantic, HTML5 tags. These were used in the CSS as the descriptors and that is why the site looks … not as you’d like.
All you have to do now is to go through the CSS and change all the old descriptors to the new HTML5 ones. This could take a few hours.
But, don’t worry, as this is Genesis, somebody has been there, done that and created the web app to do it for you. Head over to Cobalt App’s Genesis XHTML to HTML5 CSS Converter which will update your CSS and fix your site with the click of a mouse.
Done.
Further microdata enhancements
I’m really just scratching the surface with what can be achieved with Schema.org’s microdata.
For example, the body tag’s to all your HTML5 web pages have the following default itemtype:
itemtype=”http://schema.org/WebPage”
I’ve customised the microdata on my About and Contact pages to the following (with the help of this article):
itemtype=”http://schema.org/AboutPage”
itemtype=”http://schema.org/ContactPage”
You can add further customisation to the HTML of the page’s content. Here, for example, here’s how I’ve marked up some content on my Contact page (with the help of this article):
<p itemprop=”telephone”>Phone: +44 (0)7762 383 426</p>
<p itemprop=”email”>Email: rob [at] robcubbon.com</p>
You can do it
It’s more important to understand HTML and the languages of the web than it is to speak English. HTML5 is the first major upgrade in 13 years. You can use it to better communicate your websites’ purpose to the world. And your clients will thank you for it.
This is an article from Rob Cubbon
Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.
