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.
Comments