HTML5 is the new up and coming HTML standard. It has been in development for years, even as far back as 2006, and HTML5 is expected to be fully standardized by the end of 2014.
HTML5 allows for more dynamic web content without the need for third party technologies such as Flash. Because HTML5 is so new and hasn’t quite been completely finalized yet, no web browsers fully support everything it is capable of 100%.
That said, Chrome and Firefox seem to do better on HTML5 compatibility than some of the other major browsers. Internet Explorer is still lagging significantly behind the pack as you can see from this browser comparison chart.
New HTML Tags
In HTML5 there are 12 lesser used tags that have been removed from the standard. One of those that I tended to use a bit, especially in text widgets and the like, is the center tag. View a complete list of HTML5 tags.
What’s more exciting, however, is what’s been added. When looking through that list of tags you’ll see that there are 30 new tags in HTML5 compared with previous versions. It is these new tags and the way HTML5 can handle and present different forms of web content like audio and video files that is the cause of so much buzz about the new standard.
All of these new tags provide more discrete ways to arrange a web page with specific content area types compared to the current XHTML standard.
Up to now there was one primary tool for creating different content blocks on a web page: the div tag. HTML5 adds all sorts of other tags for arranging our content such as header, footer, article, aside, nav, and section.
All of these new tags will give us developers more discrete control over our web pages and potentially allow web content to be displayed in ways we haven’t even considered yet.
Much More Than New Tags
HTML5 is so much more than some new tags to mark up our websites with. It will make the web easier to use for the general public while at the same time make it easier to code for developers too!
Here are just a few of the other advantages of HTML5:
- Consistent, Cleaner Code – Because HTML5 has more tags to define the various areas of a web page built in, coders will be more consistent with how they code things. For example, previously with div’s and classes a site’s main navigation might have a class of nav, main-nav, navigation, menu, etc. Now with HTML5 navigation blocks will always use the nav tag, adding consistency to the internet.
- Better Accessibility – That increase in consistency and more clearly defined page structures means that HTML5 will have better accessibility for handicapped users.
- Audio and Video Tags – As we’ve already mentioned, the addition of standards for the audio and video tags mean that we can now include multimedia content without the need for relying on third party technologies such as Flash or Silverlight. As a result we can provide a more consistent user experience.
- Much More Mobile Friendly – Mobile browsers have adopted and provide extensive support for HTML5 technology. This means that with the explosion of smart phones and tablets we can provide a consistent user experience for these users much more simply than before. Instead of needing an entirely separate website for mobile devices, with HTML5 we can simply use a mobile responsive site that adjusts the layout to better fit smaller screen sizes.
- Better Support for Forms – More and more websites are using forms to allow users to submit data. HTML5 comes with much better support for more advanced form features including more form field types, and less need for javascript to accomplish things.
- And Much More – There’s a ton more available in HTML5. Things like offline application caching, client side databases make saving website options possible even when browser windows are closed. They also open up the possibility for the marriage of desktop and web applications. HTML5 comes with geolocation support so websites and web applications can tap into that information from users. HTML5 has a much simpler doctype, making things easier on developers. HTML5 will have much better and more consistent cross browser support. And the list goes on!
HTML5 Genesis
So what does all this mean for users of the Genesis theme framework? With the recent release of Genesis 2.0 the StudioPress team has built in native HTML5 support. This means that moving forward Genesis child themes can now tap into all of this HTML5 goodness.
Simply adding one line of code tells the Genesis framework to switch to HTML5 instead of using XHTML. Dropping this code into the child theme’s functions.php file will make the switch:
add_theme_support( 'html5' );
That one line of code tells Genesis to change several things:
- Site doctype is changed to HTML5
- Content is output with semantic HTML5 tags instead of previous XHTML tags
- CSS markup is changed to align with HTML5 tags
- Genesis calls HTML5 loop instead of standard loop for posts and pages
- Different genesis hooks are applied with new loop
- Microdata is added throughout markup
That’s a lot of change going on because of one little line of code. So unfortunately you can’t just turn on HTML5 in your Genesis child theme and be on your way. If you try to do that your site will break. Massively.
As you can see from the list above, at the very least you will have to do some significant CSS work to convert your style sheet to accommodate the new HTML5 tags and the new CSS markup that gets output by Genesis when you activate HTML5.
Fortunately StudioPress has put together a handy markup comparison chart for us which shows the major differences between the tags and CSS output. (You will need to log into your StudioPress account to see the chart.) This helps with converting child themes.
Beyond the CSS changes your child theme may very well need to have some of the PHP modified too. Because Genesis 2.0 changes some of the hooks when HTML5 is activated you will need to go through and adjust any functions that use the old hooks too when you convert your site. Here is a good tutorial on the Genesis hook changes in 2.0.
Worth the Effort to Convert Genesis to HTML5
So as you can see, even though Genesis makes it as easy as possible to tap into HTML5 with their new version 2.0, there is a bit of work involved in converting child themes. We are working on converting our themes here at Web Savvy and should have the first of them ready for release very shortly.
I think you’ll find the effort to convert your sites to HTML5 will be worth it in the end. That is the direction the internet is going and converting your themes will give you a leg up on your competition.
This is the seventh in our series of articles on Best Practices for Genesis Theme Customization.
Web Savvy Marketing
TwitterYoutubeFacebookLinkedinGoogle +