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..
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
- 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
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
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
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).