February 6, 2012
by Cooldotz
0 comments
Implementation of HTML5 in WordPress
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

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.
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:
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.
A WPTuts publication.