Getting Started With HTML 5 and WordPress

HTML5 is now more like the present than the future, and WordPress theme developers should stand up and take notice. Why not try and implement HTML5 in your next WordPress project. We bring you all the resources you will need to get started immediately with HTML and WordPress.

HTML5 Resources

A roundup of the best HTML5 resources on the web:

HTML5 Rocks

HTML5 Rocks is a great new resource for developers and teams looking to put HTML5 to use today, including more information on specific features and when to use them in your apps.

It has many tutorials on specific HTML5 features. For example, you can learn how to successfully take your application offline, access the user’s location with Geolocation, and even read local files from within JavaScript. The Interactive Presentation, written in HTML5, demonstrates a number of features with examples you can toy with. You can use this presentation to learn more about HTML5, but also to conduct presentations with your team. The code playground lets you take working examples and edit them live, so you can get a feel for how the browser reacts to these APIs. And after you’ve hacked with, for example, the Notifications API, you can explore handpicked resources that include reference guides, development tools, and other community sites.

Visit HTML5Rocks

HTML5 Boilerplate

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

Visit HTML5Boilerplate

HTML5 Demos

HTML 5 experimentation and demos Remy Sharp hacked together. They can also be filtered by browser compatibility.

Visit HTML5Demos

HTML5 Doctor

HTML5 Doctor publishes articles relating to HTML5, its semantics, and how to use it right now. They also invite questions via Ask the Doctor. Then they post answers in future articles so that everyone can benefit.

The authors of the site acknowledge that they may sometimes get things wrong and that people may disagree with their interpretation of the HTML5 specification. But that’s another of the reasons that this site exists: the spec has yet to be formalised, and we can all do our bit to make it what we want. A specification for the people if you will.

Visit HTML5Doctor

HTML5 Gallery

HTML5 gallery has two primary aims, the first is to showcase sites that use HTML5 for markup, so that we can see how people have interpreted the specification and how they’ve implemented it. The secondary aim is to help people learn about html5 and how it should be used and how to implement it.

Visit HTML5Gallery

HTML5 WordPress Themes

Convinced about HTML5 Need to start with some scaffolding to ease your way into HTML5 We’ve got you covered, here are the best HTML5 themes for WordPress. Use theme to gain inspiration and knowledge, or to just build upon them.

Twenty Ten Five

Built to accompany an article in Smashing Magazine, TwentyTen Five is an HTML5 upgrade of the default WordPress TwentyTen theme.

It’s completely free, easy to build on, and brings brand new HTML5 elements and functionality to WordPress.

Get TwentyTenFive

Roots Theme

Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Roots is packed with unique features that you won’t find in other themes and plugins. Create sites faster than ever and with some of the cleanest code out there.

See it for yourself, you can hardly tell this site is powered by WordPress versus a regular install.

Get Roots Theme

Toolbox

A semantic, HTML5, canvas built by Automattic for CSS artists and an ultra-minimal set of super-clean templates for your own WordPress theme development.

Alright. Toolbox is a blank, HTML5, WordPress starter theme. Out of the box, it features:

• The latest in plain, old, semantic HTML5 markup.
• Ultra-minimal (it looks like there’s no CSS at all), fluid, em-based CSS that won’t get in your way when you’re starting a design.
• It’s free to use for commercial and public projects.

And that’s it! A short list of features is the feature.

Remember: toolboxes are for building things. Build your own HTML5 WordPress theme with this one.

Toolbox Demo

Get Toolbox

H5 Template

The H5 Theme Template provides everything you need to create beautiful themes with HTML5 right now. H5 contains a complete set of theme files and folders, and each file has been meticulously crafted with all of the latest and greatest WordPress functionality. As a template theme, H5 is designed with easy customization and personalization in mind, serving as a solid starting point for your next HTML-5-based theme.

Unlike other frameworks, H5 works great as a basic theme right out of the box. Of course, this is a template theme we’re talking about here, so you will inevitably feel ‘inspired’ to begin tweaking and styling its minimalistic appearance to get the design looking exactly how you want it. And that is entirely the point: H5 makes it quick and easy to begin designing themes with HTML 5. And best of all, H5 is completely free.

Get H5 Theme

Spectacular

Spectacular, a free WordPress theme that aims to provide a warm and pleasurable atmosphere for personal musings and ramblings. The theme comes in two flavors: HTML 4.01 and HTML5. Also, both German and English versions of the theme are included in the download package. The theme is cross-browser compatible and supports Opera, Safari, Chrome, IE7+, and FF. Support for IE6 is not available, though the theme works in IE6, too.

The theme was commissioned by Smashing Magazine and designed by Maleika Esther Attawel exclusively for Smashing Magazine. As usual, the theme is absolutely free to use in private and commerical projects.

Get Spectacular

Starkers

Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer.

Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect blank slate for your projects, as it’s a stripped-back version of the Twenty Ten theme that ships with WordPress.

Best of all: it’s free and fully GPL-licensed, so you can use it for whatever you like, even your commercial projects.

Get Starkers

Starkers + HTML5 Boilerplate

If you’re a web designer / developer that uses WordPress, and you want a stripped down theme void of unnecessary styles and images, yet chockfull with the latest HTML5 markup, then check out Boilerplate by Aaron T. Grogg.

Boilerplate is a merger theme, combining Starkers by Elliot Jay Stocks and the awesome HTML5 Boilerplate framework by Paul Irish.

Boilerplate includes:

• IE specific classes
• Eric Meyer’s CSS Reset
• IE6 PNG fix
• .htaccess file that allows proper use of HTML5 features and faster page load
• Modernizr 1.6 for using the latest HTML5 and CSS3
• Mobile browser optimizations
• iOS, Android, Opera Mobile-adaptable markup and CSS skeleton
• and loads more

Get Starkers + HTML5 Boilerplate

Brave New World

The theme is free of layout and styling beyond a modified version of Eric Meyer’s reset CSS and a baseline typography. Just like Elliot Jay Stocks’ Starkers theme this is a base theme free from cruft yet incorporates HTML5, WAI-ARIA landmark roles and hCard and hAtom microformats.

Get Brave New World

Conclusion

Hope you liked this collection of HTML5 resources and WordPress 3 themes, let us know if you think we should add anything to the above!