I’ll be the first to admit that when I see a default template like HTML5 Boilerplate, it brings about a swirl of emotions.
On the one hand, I’m ridiculously intimidated by the incredible amount of knowledge and experience that’s been collected into one place for the benefit of front-end developers. So much so, that I wonder what I’m even doing in this industry, because it reminds me of how far behind I am.
On the other hand, I’m inspired, because there’s so much more to learn, and it’s exciting to add new nuggets of knowledge to my toolkit, and I can’t wait to hit the books and grow my knowledge base. It also helps when others express the same feelings about lagging behind. But I’m getting sidetracked.
Due to the fact that there’s way too much in Boilerplate that I don’t fully understand, and much that I probably won’t use in the near future, I decided to put together my own little HTML5 template that will become my personal “rock-solid” default (okay, it’s more like yogurt-solid, but whatever). And let’s be honest, Boilerplate is not just about HTML5, but about preparing a default environment for creating a killer cross-platform and high-performance web app. Sometimes I don’t want all that stuff; I want something more fundamental.
In addition to the basic HTML5 code to start you out, I’ve also included extensive commenting and some dummy content that makes use of some of the new tags and tag changes in HTML5. A lot of the comments are pretty basic pointers, because I want this to work especially for HTML5 beginners.
You can view the code and contribute on GitHub, or download the files:
You can alternatively download the stripped-down version using the button below:
The only comments included in the stripped-down version are ones that I felt were still necessary, so it’s not completely without comments, but it’s pretty bare in comparison to the regular version.
And yes, I’ve borrowed a couple of things from Boilerplate, but that’s inevitable due to Boilerplate’s inherent kitchen sink-ness.
Want a Little More? Use HTML5 Reset
HTML5 Reset is another project that was launched around the same time as Boilerplate, but is simpler than Boilerplate and easier to digest. The funny thing is, I actually didn’t even look at HTML5 Reset until after I created mine, because I assumed it was similar to Boilerplate, but it’s actually quite simple and more in line with what I’ve done here.
So use HTML5 reset if you want something that’s a little more ahead of the game and includes some mobile-related features.
This is a Work in Progress
In coming months (years?) I’ll be studying those other defaults to better understand some of the more advanced stuff they include (especially the mobile-related stuff, which mine doesn’t have any of) and I’ll be gradually updating mine to make improvements.
Thus, if you want a real template, use Boilerplate or HTML5 Reset. Or else you’re free to use this one and modify it to your needs. This is just my personal starting place, on which I’ll be progressively building.
Also updated jQuery version to 1.4.4, thanks to VP for the heads up.
Changed remote jQuery reference to minified version. Thanks to Florent.
<nav>element with a simple unordered list of links. Not sure how I missed that one, as it’s much more common than a secondary
<header>element, which I did include. Thanks to Mikey’s tool Switch to HTML5, which reminded me.
I’m also considering removing the
<section> element, because it’s not supposed to be used for styling. My use of it was just to demonstrate how it might be used to introduce a new heading structure. But now I’m second guessing if it’s ever useful at all. We’ll see, but use it with caution.
Originally neglected to credit Mathias Bynens with the asynchronous analytics code, so that’s corrected in the source.
<section>element. Now the main body has a
<div>wrapping all the content, with two
<section>elements nested inside for demo purposes. I think this falls more in line with what the spec says about section. I might try to incorporate an
<article>element, too, but it seems pointless, because the dummy content is not really necessary for a template like this.