2011 was a big year for the advancement of HTML5 in the web development community. It became pretty widely adopted, especially for the mobile web. There have been major projects that help developers use HTML5, like Paul Irish’s HTML5 Boilerplate (technically 2010, but popularized in 2011) and books galore! I would strongly recommend Jeremy Keith’s HTML5 for Web Designers, published by the venerable A Book Apart (a service by Happy Cog). But what started as a movement in 2010 became the proper way to do things in 2011, from mobile websites to progressive enhancements, and that includes integrating HTML5 into WordPress themes.
What is HTML5?
What exactly is HTML5? It’s the latest iteration of HTML, for which development began in 2004. Some of the more notable changes in HTML5 are the addition of header, footer, article, nav, and aside tags, a whole host of new form inputs, including email and phone (which will perform proper validation for you), the placeholder attribute, which allows you to put example text in a form field, and a bunch of new media elements. The media elements include support for video, audio, and a canvas, which allows you to draw or otherwise dynamically change content.
HTML5 is paving the way for faster, more interactive, more semantically correct websites (not to mention it’s the best way to make mobile-friendly websites). It it includes functions that used to require javascript or Flash, which means your sites depend on less and work on more platforms. The faster websites adopt this the better, and what more suited platform than WordPress?
So how did HTML5 make it’s way into WordPress? Let’s take a look…
Default Theme Adoption
The New Default Theme
We saw a brand new theme in 2011, aptly named “Twenty Eleven.” On top of demonstrating the new features of 3.0/3.2 and boasting some very nice design changes (including some fantastic typography), Twenty Eleven is the first WordPress theme to support HTML5 and CSS3. I think that is a big step forward, since WordPress does power almost 15% of Alexa’s top million websites(*).
In Twenty Eleven, we see the added support of the following HTML5 tags: <header>, <footer>, <aside>, <article>, and <time>, which can be styled using CSS, as Twenty Elevent also uses the html5shiv, a javascript library that adds the new HTML5 elements to the DOM for Firefox, Chrome, IE7+, and more.
This means a lot to developers, as they can now leverage the power of HTML5 in WordPress’ default theme; we can create forms with better input types, add in the new media formats, and use <canvas>, among other things.
Widespread Theme Adoption
With the default theme supporting HTML5, other themes followed suit*. A quick Google search will show you tons of round-ups of free HTML5 WordPress themes from this year. Supporting HTML5 is now a feature of WordPress themes that people look for. I suspect by this time next year, it will be assumed that HTML5 is supported by all new WordPress Themes.
*I know there were HTML5 themes before Twenty Eleven but again, it seems as though with the default theme HTML5 got WordPress’ stamp of approval/official support.
HTML5 WordPress Frameworks
WordPress theme frameworks are also getting in on the HTML5 action, which means that any theme using those frameworks will also be using HTML5. This is really where we can (and did) see widespread HTML5 adoption, since certain frameworks can power thousands of sites. Here is a list of some great WordPress theme frameworks, which also happen to support HTML5:
On top of that, there are HTML5 tutorials and child themes for both Thematic and Thesis, which are fairly big frameworks in the WordPress community. We also covered creating your own WordPress Framework in a 4-part series (written by yours truly) that supports HTML5.
HTML5 Plugins
Besides themes, there are countless plugins that help bring HTML5 into WordPress driven sites. You’ll get everything from embedding HTML5 audio and video, to changing divs to HTML5 elements like <aside> and <nav>, to creating HTML5 forms. There is even a plugin that will insert the HTML5 Boilerplate into your current theme.
Plugins like this allow anyone using WordPress, not just theme developers, to progressively and incrementally make their sites more modern and more platform independent through the power of HTML5.
Conclusion
While the HTML5 movement really got started in 2010, it picked up a lot of steam in 2011 and made its way into ever facet of WordPress development. From a host of themes (including the new default theme) and frameworks, to plugins and more, HTML5 had made its mark on the WordPress community.
In order to ensure HTML5 growth in WordPress, it’s up to developers like us to stay on the bleeding edge of the technology. Every major browser is seeing updates and with those updates, more features of HTML5 are being supported. We can then start integrating those features into WordPress. Because of that, I’m excited to see what 2012 brings.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Joseph Casabona
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Wptuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
There is also a wordpress theme based on boilerplate: http://wordpress.org/extend/themes/boilerplate
Seems like a non official release so i don’t really know if it’s up to date with the last boilerplate modifications.
You know, I really am happy that HTML5 is where it’s at today. Sure, there may be some that are nervous about it, but those of us who are open to using new technologies to create a great user experience have it good with where HTML5 today and the direction in which it is heading.
I started using it last year for all of my projects and I haven’t heard one complaint. I’ve only been asked by one client to use XHTML, but they were a very technical client. I find that most clients don’t care as long as ‘It works.’
I’m really happy to see WordPress as open as they are to new technologies.
great timing on this article, just since two weeks ago i’ve started building all my new themes in HTML5 lol
One of my goals of this year is to learn HTML5. I’ve been putting it off for awhile, and haven’t really made the time for it, but this year I’m making it a must do! Also gonna put more time into mastering WordPress as much as possible. Excellent article. Thanks for including the links for me to reference later as well!
should i start to use html5 as i uses normally xhtml
I use to use XHTML but switched to HTML5 sometime last year… Keep in mind, you don’t have to fully switch over. I started just by using some HTML5 elements (like header, footer, article, and aside) while still using legacy HTML elements.
Roots seems to be a nice HTML5 for wp from which anyone can learn more …
Need to convert my theme to use the HTML semantic tags soon.
You also didn’t mention Bones it is a RESPONSIVE HTML5 framework! I just found out about it and love it already!
Thanks for the tip! I will definitely check that one out!
That’s a fantastic find! I was looking for a HTML5 responsive WP boilerplate to develop my first premium theme, and it looks like you’ve found it for me.
Brian Bones is pretty good looking. I never saw it before either and having a classic and responsive version is awesome! Nice find.
Don’t forget geolocation and websockets.
I feel like you should’ve brought up the fact that wordpress uses microdata, otherwise, good job.
I quote you: “Twenty Eleven also uses the html5shiv, a javascript library that adds the new HTML5 elements to the DOM for Firefox, Chrome, IE7+, and more.”
Which HTML5 shiv are you talking about?
Because I am not sure it is very professional to just list browsers like this in such a statement, especially when you keep versions of Firefox and Chrome open and you specify IE7+. Someone new reading your article might think that Firefox, Chrome and others require the HTML5 shiv, while the truth is totally different, especially that users of these browsers update frequently and it is 2012.
We all know that the HTML5 shiv is made to solve the fact that IE up to version 8 does not style unrecognized elements.
when it comes to the new HTML5 elements. So the HTML5 shiv might not be the solution for this old Firefox (who is using it today?).
For example, Firefox 2 (which is based on the Gecko rendering engine version pre 1.9b5) might require some workaround, though its bug is not the same as of IE’s (up to version
<a href=”http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/”>read more</a>
IE up to version 8 requires the HTML5 shiv. Why? Because IE8 and its antecedents cannot style new elements that are not supported. These old versions of IE can only style supported (recognized) HTML4 elements.
And by the way, the HTML5 shiv is a javascript script and not a library, unless you are talking about a totally different thing.
You posted this article on Jan 9th 2012, when Chrome, Firefox and others (opera?) have made a big step towards supporting more and more of HTML5.
When you talk about technical stuff, sometimes precision is very important even if it is not about the main subject of the article.
I have a feeling that people managing this site are just concerned with mass production; posting as much articles as possible with flashy titles. Up until now, all articles I read on this site had weakness.
Found this an interesting article. I have only just started to use WordPress and articles like this one will be great for me moving forward. This article is a great resource with the links to Paul Irish’s and Jeremy Keith’s work, as well as this article having a lot of information. I have been using HTML5 in my static sites and this article will be a great and starting point for when I really start using WordPress.
Thanks for the article. I’m looking at using boilerplate for our revised membership site. Having clients go to our websites, add to homescreen, and not have to go thru the App Store process sounds like bliss. Cheers
Nice piece. Any top picks for HTML5 form support? Seems a bit thin on the ground at the moment.
Also, readers might like to know that the Catalyst Theme Framework also supports HTML5 (and responsive design) http://catalysttheme.com/