Advertisement
Articles

The Rise of HTML5 in WordPress

by

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 WordPress 3.2 Default Theme
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.

Related Posts
  • Code
    Tips
    New wp-config Tweaks You Probably Don't Know8 new wp config tweaks you probably didnt know about 400
    The wp-config.php file: One of the most loved WordPress feature for some, one of the worst nightmares for others. There are countless tips and tricks in a plethora of articles, and you can't get enough of them; however, this article is aiming to be different. In this article, we're going to get familiar with eight new wp-config tricks that are less known than functionality such as turning off post revisions, increasing the memory limit, or other similar features.Read More…
  • Code
    Articles
    Introduction to WordPress App ThemesApp theme 400
    With the increasing growth rate of WordPress powered websites, the need for WordPress themes is rising. Multi-purpose themes are becoming highly popular among website owners. Many existing themes are built mainly to address blog functionality. But with the growth of WordPress web application development, we are in need of specialized themes for different purposes. These themes are known as app themes. In this article, we going to familiarize with the concept of app themes and their usage in real world.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Releasing Your ThemeCreating wordpress theme from html 400
    If you've been following this series you now have a working WordPress theme. Your theme has a number of template files, including a page template and an archive template, and also has featured image support.Read More…
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    News
    Introduction to the New Twenty Twelve ThemeImage 01
    Since 2010 WordPress has been launching a new theme with each of their yearly releases. With version 3.5 coming by end of the year, we can now download the all new Twenty Twelve theme, a successor to Twenty Eleven. Before I talk about what's new in Twenty Twelve, I will be discussing the difference between Twenty Eleven and Twenty Twelve, and how the change will benefit working with the default theme of WordPress.Read More…