Ready your Genesis Child Theme for HTML5

HTML5_logo_and_wordmark.svgIf you develop WordPress websites, there are many great reasons to use a theme development framework such as Genesis, by StudioPress. One of the best, latest reasons arrived with the most recent Genesis 2.0 update: the incorporation of HTML 5 and all its goodness. However, in order to realize all this goodness, it is first necessary to “turn it on.” This can be done using a single line of code in functions.php file and the handy Genesis XHTML to HML5 CSS Converter created by CobaltApps.

Benefits of using HTML5

Many posts on the net have listed the benefits of enabling the features of HTML5 on your site so I’m not going to delve too deeply here; however, two that impress me the most are the development of semantic HTML5 elements and the ability to nest HTML microdata into your content.

Semantic HTML5 Elements

Every web developer is familiar with creating <div> tags to define various areas of their canvas. In many ways, HTML5 aims to to make the <div> tag obsolete. HTML5 provides a new array of new structural markup tags, including <header>, <footer>, <article>, and <section> to differentiate among the various sections of your page. This is much better for Search Engine Optimization (SEO) because you now have a way to put your content into context, thereby improving your content’s overall discoverability. Search engines now have contextual information about your content, which means your pages can be organized more relevantly.

Microdata

In addition to the new semantic structural elements, HTML5 also provides microdata, a new lightweight semantic meta-syntax that enables the definition of nested groups of name-value pairs of data — microdata — based on a pages content but in parallel with it. In short, microdata enables you to annotate your content, add authorship information for blog posts, or add review data for your products,  or publicize an event. Again, we’re not going to delve too deeply into what microdata is in this post but here is a great overview on extending HTML5 through microdata to give you some more background. Once you’ve applied microdata to your code, your google search results might look something like this:

html5 microdata

Google search results showing authorship data.

Google search results using HTML5 and microdata for recipe

Google search results microdata for recipe

 

 

Differences between Genesis 1.9 and 2.0 Markup

In order to make the switch to XHTML to HTML5, it was necessary to make some changes to the overall markup. StudioPress has a nice page showing a comparison between Genesis 1.0+ themes and the new HTML5 markup in Genesis 2.0+ themes. In short, many of the structural IDs have been converted to CLASSES — for instance #content becomes .content and #content-sidebar-wrap becomes .content-sidebar-wrap. They’re not all that straight forward but that’s the general idea.

A Single Line of Code

Yep a single line (if you don’t include the comments). Add the code below into your functions.php file, convert your style.css files and you’re off and running!

The Next Best Thing Is Here

Take a look at the new tags and attributes that are included with HTML5 and you’ll be amazed at the new functionality HTML5 provides, from embedding video into your site without needing a plugin to smoother form fields. I can’t wait to explore some of this new functionality as I incorporate it into my sites. Have you already upgraded your site for HTML5? How’d it go? Let me know in the comments!

Comments

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>