DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Free HTML 5 WordPress Theme

Posted by on

In an effort to inspire more WordPress theme designers to embrace HTML 5, I am releasing the “H5” Theme Template. The H5 Theme Template is a bare-bones WordPress theme built entirely with HTML 5 and styled with CSS 2.1. As you may know, HTML 5 provides greater flexibility and interoperability than previous markup languages, and enables us to build well-structured themes that are more flexible, interactive, and semantically precise.

About the ‘H5’ WordPress Theme Template

The H5 Theme Template provides everything you need to create beautiful themes with HTML 5 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. Sound good? Great, let’s dig into the specifics..

‘H5’ Specifications

First, thanks for your interest in the H5 Theme Template. I am very excited to be sharing this theme with the WordPress community and hope that you will put it to good use. Next, three important points that I would like to emphasize:

  • H5 is completely free and licensed under GPL
  • H5 is a template used to build HTML-5 themes
  • H5 is built entirely with WordPress, HTML 5, and CSS 2.1

About the markup

  • Uses as few tags and attributes as possible
  • Contains no <div>s, <span>s, classes, or ids!
  • Built with semantically sound and fully valid HTML 5
  • Outputs clean, well-formatted source-code (although WordPress botches most of it)

About the CSS

  • Just enough CSS to target key elements, provide some structure, and make it “look” like a basic theme
  • Built with well-formatted and fully valid CSS 2.1 (current spec)
  • Uses child, adjacent, and attribute selectors to target elements without ids or classes

About the JavaScript

  • Uses only unobtrusive JavaScript
  • Uses createElement() to specify block elements for Internet Explorer
  • Includes WordPress’ jQuery script the right way

About the design

  • Includes minimal markup and styles for easy customization
  • Features a full set of theme template files and common folders
  • Very minimal, meant to do just the basics and serve as a starting point
  • Uses default and/or standard WordPress template tags, loops, and other functions
  • Looks and works great out of the box in (almost) all modern browsers (see next section)
  • Designed to be as lightweight and fast as possible — only essential tags are included

Browser compatibility

H5 looks and works great in the following browsers (and most likely others as well):

  • Firefox 3
  • Opera 8*
  • Opera 9
  • Chrome 1 & 2
  • Safari 2, 3, & 4
  • Internet Explorer 7*
  • Internet Explorer 8

* Denotes slight inconsistencies in these browsers.

For Firefox 2, Camino 1.6, and IE 6, the HTML seems to work great, it’s just some of the “advanced” CSS selectors that some browsers don’t understand. This is easily handled by simply adding a few choice id or class attributes to key elements (none are used by default).

Download and Demo

For a “live” demo of the H5 Template Theme, check out our newly revamped DiW Theme Playground, where we will be hosting any themes that we release here at Digging into WordPress.

At the DiW Theme Playground you will find a dropdown menu at the top of the browser window that enables you to preview any of our themes, as well as a download link for whichever theme happens to be active (Chris’ excellent WP Typo is the default active theme).

29 Responses

  1. The article states: “Contains no s, s, classes, or ids!”

    The body got the classes “home blog”? I saw the comments for the div-uses (“…not present in H5″), but no comment for the body?

    Will it work without the h5.js? Does it only break for IE?

    This looks great! I’m all for going for HTML5, but I want the href-anywhere (Eric Meyer) to be present. That’d be awesome.

    • For the sake of convenience, I added the body_class() tag to the body for use by developers, but it is not used by any CSS or JavaScript and may easily be commented out or removed.

      Unfortunately those JavaScript definitions are required until browsers implement the new HTML tags — they are needed to tell the browsers that these are block elements otherwise they will by default be treated as unknown and inline (at least, that’s how I understand it).

      And, as stated in the article under the “Browser compatibility” section, this theme looks and works great in IE7 and IE8. IE6? Not so much ;)

      • Thanks for making it clearer :)

        Too bad the browser vendors ain’t exactly running behind playing catch-up with the standards. Then again I’d rather have CSS3 support on all major first.

  2. Well done Jeff, and thanks for releasing this theme for others to learn from and share. I myself am in the process of developing a base HTML5 WordPress theme for my own web design work, and it’s been really helpful seeing how you’ve chosen to put yours together. It’s also really encouraging to see other developers gradually starting to put HTML5 themes out there for public consumption. Hopefully the WordPress developers will start to take notice and begin work on modernizing the core system to support HTML5 as well as XHTML, so we don’t have to use plugins to achieve code compliance for the parts of our sites that WordPress itself generates (:

    Best regards,
    Bnonn

    • Absolutely agree with you. Hopefully this plugin will help a few more people get into HTML 5. It really is a powerful markup language and a lot of fun to boot. Cheers.

  3. Daniele Alano July 1, 2009

    Reading the code of your theme is a fantastic experience! It’s all clear! Thanks for this theme!

  4. Curtis July 1, 2009

    how ’bout a tutorial on how to make a theme playground with the drop-down? that’d be awesome.

    • Definitely a good idea — I think Chris mentioned something about doing a tutorial on that :)

  5. I had planed to do the same thing. However, now that you did it, I will get it and have a look. Well done, that is a great news for the community, keeping in mind that html5 might have a bright future.

  6. Greg Givan July 2, 2009

    Can’t say enough to thank you for releasing this… Re-Skinning the H5 will be a tremendous opportunity to get familiar with the new subset of tags in v5

  7. Really generous of you guys to put such a theme together for others to learn more about HTML 5 and experiment with it.
    Great pity though that it is not internationalised, that would have been the cherry on top, if you’d ask me!

    • That is a great idea, and something I tend to forget when designing themes. The next version of H5 will definitely be internationalized. Thanks for the reminder!

      • Cool, looking fwd to that version too then :)

  8. Utopie - Web Site Design Liverpool July 3, 2009

    Really interesting. Think I will download and just look at the code to see how to build with HTML 5.

  9. Very interesting. thanks

  10. Amazing new theme you have there, Jeff! I’ve downloaded a copy for personal references whenever I need clarifications for HTML5. Although it’s a simple and clean theme, it has so much goodness in it. I hope this will be one of the milestones in web development which marks the transition from (X)HTML to HTML.

    p/s: Congratulations to Chris for his work on WP Typo, and to you on H5 :) I forgot where I’ve seen them, but definitely they’re a part of the simple, clean and yet elegant WP themes list.

  11. Do you think that this would be aided with an implmentation of Mondernizr running in tandem; and of course removing the JS HTML5 shiv that comes with this theme in doing so?

    What are your thoughts on the use of that “library” (if you could really call it that).

    • I haven’t tried Mondernizr, but it looks like it would certainly help account for browsers that don’t apply the CSS 3 rules. Keep in mind that Mondernizr does not add support for missing features, but rather enables a bit more control over the cascade.

  12. Jim Gaudet July 10, 2009

    Damn time saver you are. Thanks. I have been wanting to play with HTML5, but haven’t had the time. Now I don’t have a reason not to..

  13. Well I’m a bit late coming across this, but I just wanted to say thanks for releasing this to the public to help further HTML5. I’ve also been working creating our new site with WP and HTML5. Great work on this

  14. ilmu komputer September 3, 2009

    Thanks the code. very useful.

  15. Hi thanks for this great work, i am putting together a HTML 5 tutorials website, would it be ok to link to your website ? i wish to teach others HTML 5 and your template would help others learn. I have just finished my free HTML5 template but as of yet i have not had a chance to create a wordpress HTML5 template.

    Thanks again

  16. just curious why you’re not using html5 then…
    Atg

    • You’ll have to ask Chris that one — he designed it ;)

    • We easily could be. I think HTML5 is definitely the future and has lots of cool stuff, but I’m not exactly foaming at the mouth to use it. Users will never know the difference and, as we learned in this article, it requires some extra JS to be able to work properly in older browsers.

      When we redesign, we’ll probably go with it.

  17. Thanks for the code, i want to use it right away.

    Dav

  18. thanks… I’m learning to make my own theme :D

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry