Starkers HTML5
Download zip (49kb) For as long as I can remember I’ve been using Elliot Jay Stocks’ Starkers theme as a clean slate for all of my WordPress endeavours. Starkers is a godsend to designers like me who would have otherwise spent hours stripping back the code of the default WordPress theme in order to create a starting point for any new designs.
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 ‘Default’ theme that ships with WordPress. Elliot Jay Stocks, Starkers
So when word hit regarding HTML5, it certainly got people talking and got me thinking about an idea for my next side project.
Call me experimental or maybe just impatient, but I figured why not transform Starkers into an HTML5 theme that others could use right now? And so “Starkers HTML5” was born.
Some info on HTML5
HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. A lot of them are semantic replacements for common uses of the <div> and <span> elements.
As a designer you’ll have a whole bag of new elements to play with, such as <header>, <nav>, <article>, <section>, <aside>, <footer> and loads more.
For a more in-depth look into HTML5 you can check out the following websites:
HTML5 Doctor, Dive into HTML5, the WC3 working draft and the WHATWG working draft
Features remain the same
All non-semantic, presentational class names (e.g: class=“center”) have been removed; all non-semantic, presentational HTML elements (e.g: <hr />, <br />) have been removed; all unnecessary elements have been removed (e.g: <div class=“entry”> disappears entirely and <h3 class=“comments”> simply becomes <h3>).
Elements have been converted where necessary (e.g: <small> becomes <p>) and some IDs have been kept intact (such as <h3 id=“respond”>) to preserve functionality.
Browser defaults have been reset in the stylesheet thanks to Richard Clark
Final notes
Since the only way to get IE to acknowledge the new elements, is to use the HTML5 shiv, Remy Sharp has put together a mini script that enables all the new elements which has been included in the theme.
Download Starkers HTML5 and get stuck into HTML5 today.
Update: February 3rd, 2010
Thanks to a suggestion from @matthewsimo comments have now been marked up as individual articles instead of an ordered list and are nested inside the parent article.
Nice work Nathan.
Great job on the HTML5 variant of Starkers.
Thanks Nathan.
Nathan thanks for this. I’ve only just stepped in to HTML5 so getting to look at how someone else has tackled a project I’ve always wished I had time for will be a great benefit!
I’ve recently started playing with Starkers and it’s very tempting to use this for my next blog template. Thanks for your work, I will credit you if I build anything even half-reasonable!
Very nice, just needs some improving (seo & standards related).
ie : wrapping the title with h1 rather than h2 in single post view.
Thanks for all the comments guys, I really appreciate it. It’s great to see there’s such a huge interest in using HTML5 ;)
@Kaelig I had initially included the h1 element inside each section as encouraged by the current HTML5 spec but after reading posts by Bruce Lawson and Henny Swan I decided to keep the structure used in Starkers, at least for now.
Very cool. I used Starkers on a design not to long ago and it saved me some time. Definitely bookmarking this to use when I get the chance. Thanks.
Looks great. We are just about to give it a good going over to see if we can use it for the base of a client’s project and will send you a link to any changes we make etc.
Why are there two footers? one in single.php and then in footer.php
Is there not an article-footer tag? Or can we make these up now? I’m not sure of the term for these new html5 tags if there is a new term.
@tripdragon The footer element doesn’t necessarily need to be at the bottom of the page, there is a great explanation on how to use the new element at html5doctor.com/the-footer-element
Thanks for sharing!
thanks for sharing
Total Legend!!
This is a great thing to look at and work with. I have the rest of my site coded in HTML5, so reading this will give me some ideas to see if I can adapt one of my other themes into HTML5 as well.