Free HTML5 WordPress Theme
In an effort to inspire more WordPress theme designers to embrace HTML5, I am releasing the “H5” Theme Template. The H5 Theme Template is a bare-bones WordPress theme built entirely with HTML5 and styled with some basic CSS 3.0.
As you may know, HTML5 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. So using it to build awesome WordPress themes is a no-brainer.
About the ‘H5’ WordPress Theme 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 HTML5. And best of all, H5 is completely free.
Sound good? 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, HTML5, and CSS3
About the markup
- Uses as few tags and attributes as possible
- Contains no
<div>s,<span>s,classes, orids! - 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 3.0 (current spec)
- Uses child, adjacent, and attribute selectors to target elements without
ids orclasses
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 the WordPress API for template tags, loops, and other functions
- Looks great out of the box in all modern browsers (see next section)
- Designed to be as lightweight and fast as possible — only essential tags are included
Browser compatibility
H5 looks great in the following browsers:
- Firefox
- Opera
- Chrome
- Safari
- Brave
- Vivaldi
- Edge & IE
Probably many other browsers as well! :)
Download and Demo
For a closer look at the H5 Theme Template, check out our newly revamped DigWP Theme Clubhouse, where we showcase all of the (free and exclusive) themes that we release here at Digging Into WordPress.
About the author
Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.
29 responses
-
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.
-
Jeff Starr Post AuthorFor 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
blockelements otherwise they will by default be treated as unknown andinline(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.
-
-
-
D Bnonn TennantWell 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-
Jeff Starr Post Author
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.
-
-
Daniele AlanoReading the code of your theme is a fantastic experience! It’s all clear! Thanks for this theme!
-
Curtishow ’bout a tutorial on how to make a Theme Clubhouse with the drop-down? that’d be awesome.
-
Jeff Starr Post Author
Definitely a good idea — I think Chris mentioned something about doing a tutorial on that :)
-
-
BanagoI 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.
-
Greg GivanCan’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
-
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!-
Jeff Starr Post Author
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 :)
-
-
-
Utopie - Web Site Design LiverpoolReally interesting. Think I will download and just look at the code to see how to build with HTML 5.
-
prafuldassVery interesting. thanks
-
TeddyAmazing 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.
-
Jeff Starr Post Author
Thanks Teddy — glad to hear the theme is useful for you :)
-
-
JasonDo 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).
-
Jeff Starr Post Author
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.
-
-
Jim GaudetDamn 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..
-
Jason LeVanWell 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
-
ilmu komputerThanks the code. very useful.
-
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
-
Jeff Starr Post Author
Absolutely, we love links ;)
Best of luck with your new site :)
-
-
aarontgroggjust curious why you’re not using html5 then…
Atg-
Jeff Starr Post Author
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.
-
-
peluang usahaThanks for the code, i want to use it right away.
Dav
-
Bimakuruthanks… I’m learning to make my own theme :D
