The HTML5 Boilerplate

on Aug 12th 2010 with 56 comments

The talented Paul Irish and Divya Manian, just yesterday, released what they call the “HTML5 Boilerplate.” The product of years of experience, this is easily the most comprehensive starting template for every new project that I’ve ever seen.

HTML5 Boilerplate

According to Paul, himself:

Why it is Awesome?

  • Cross-browser compatible (IE6, yeah we got that.)
  • HTML5 ready. Use the new tags with certainty.
  • Optimal caching and compression rules for grade-A performance
  • Best practice site configuration defaults
  • Mobile browser optimizations
  • Progressive enhancement graceful degradation … yeah yeah we got that
  • IE specific classes for maximum cross-browser control
  • Handy .no-js and .js classes to style based on capability
  • Want to write unit tests but lazy? A full, hooked up test suite is waiting for you.

Why it is Awesome-er?

  • Javascript profiling…in IE6 and IE7? Sure, no problem.
  • Console.log nerfing so you won’t break anyone by mistake.
  • Never go wrong with your doctype or markup!
  • An optimal print stylesheet, performance optimized
  • iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
  • IE6 pngfix baked in.
  • .clearfix, .visuallyhidden classes to style things wisely and accessibly.
  • .htaccess file that allows proper use of HTML5 features and faster page load
  • CDN hosted jQuery with local fallback failsafe.
  • Think there’s too much? The HTML5 Boilerplate is delete-key friendly. :)

The HTML5 Boilerplate can be downloaded here.

Tags: html5
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://eddywashere.com eddy was ehre

    had some problems with the .htaccess but for the most part this is awesome!

    • http://paulirish.com Paul Irish

      hey eddy i’d love to hear about the spots you were eyeing. I think we can make a few changes in the htaccess for the better.

      File me a ticket on what you’re seeing: http://github.com/paulirish/html5-boilerplate/issues/

      thx!

      • Meander

        Think it could be the forwarding of http://www.example.com to example.com rewrite rule.

        RewriteEngine On
        RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
        RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

        I had a fresh install of WAMP Apache and the rewrite_module wasn’t loaded causing an error.

        Wrapping the above in a IfModule might help…

        RewriteEngine On
        RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
        RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

  • First

    FIRST!

    • sumit

      too late sucker!!

    • Kuzvac

      Bwahahaha:)

  • http://seolar.de seolar

    Hi there,

    and wow. you are right man. This project is amazing and it is really cute. I think it will be the future of concepting, drwaing, creating and developing websites as easy as reading this article.
    I still keep watching on the aspects of search engine optimization (SEO) and it’s unbelievable: this project got 100% of SEO factors on. I’ m still loving before realizing my first project with this one.

    I will keep you informed about my realized projects with html5 boilerplate…

    - Greetings from Germany -

  • http://www.brucefloyd.com Bruce Floyd

    Jeffrey,

    Is this something you see yourself using on projects or are you just advocating b/c it might be useful for others? I’m certainly fascinated by it.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Oh I’d absolutely use it — probably modified a bit for my typical projects. But there are a lot of nice little tricks in there. For one, I didn’t know about the blank conditional trick at the top.

      • Shaun

        Agreed. We already use most of the stuff in our own “boiler-plate”, but there were a couple things I found in html5boilerplate that I didn’t know about/we didn’t have, one being the blank conditional.

  • http://paulirish.com Paul Irish

    The ever-so-lovely Divya Manian http://twitter.com/nimbuin is not only responsible for the design of the site, but has led the development of the template with me for the past few months.

    Thanks for the mention, Jeffrey. :)

  • w1sh

    Can we get a “How to Use the HTML5 Boilerplate” Quick Tip?

    • jeff

      Yeah few Quick tips will be welcome.

    • pou7777

      I agree, i’ll be nice to understand the “why” and “how”. thanks!

    • http://www.stavdi.com Mathias M. Stav

      that would be great!!!

  • http://mileonemedia.com Joe Cianflone

    I was just redoing my website to use html5 last week. Could have used this then, but still can’t wait to try this out in my next project!

  • http://www.aediscreative.com Christopher

    Nettuts is on the ball this week. There is a reason this is the first RSS I check everyday.

  • http://shaneparkerphoto.com Shane Parker

    Hm, I have a project coming up in a couple weeks that I’d like to use this on. Any possibility of getting a short tutorial on this? It looks pretty straight forward, but it’d be cool to have you walk through it Jeffrey.

  • http://brianswebdesign.com Brian Temecula

    This is pretty awesome. I especially like the conditional comments for the body tag. Never thought to do that before.

  • http://benackles.com Ben Ackles

    Jeffrey Zeldman just posted a similar template this morning. The “HTML5 Reset” is by Tim Murtaugh, one of his colleagues at Happy Cog.

    I’m not sure which one’s better, but it’s exciting to see because it really pushes the movement forward.

    Links:
    HTML5 Reset
    Zeldman’s Post

  • Anto

    Quicktip or it didn’t happen =P.

  • http://brianswebdesign.com Brian Temecula

    Ya know, I just had an awesome idea for Nettuts+. Since we all love CodeIgniter so much, maybe Nettuts+ could take this HTML5 Boilerplate, convert it to a CodeIgniter application, and add in some common website stuff like a dynamic sitemap, terms of use page, privacy policy, etc. Then this would REALLY be a boilerplate that I’d use!

  • http://azzcatdesign.com Catherine Azzarello

    I downloaded both Boilerplate and HTML5 Reset yesterday. Kid in a candy store!

    But…

    Some of us ‘designer types’ could use a little more explanation about .htaccess and Modernizr. PLEASE!

    Just sayin…we all weren’t born programmers! ;-)

    • http://brianswebdesign.com Brian Temecula

      .htaccess is a local server configuration file, and in many cases, servers are configured so differently, that relying on the .htaccess in the download is not going to work. If you plan to go beyond front-end design, then you should probably start to familiarize yourself with common .htaccess usage. Also, learning php is essential in my opinion, but again, if you are just going to be a front-end designer, then you probably shouldn’t worry about that either. .htaccess and php start to become essential when you need to build large websites, even if you don’t plan to be a developer, because you may end up working with a team of people, and need to know as much as possible so you can communicate/work together. Think big!

  • http://jimmyhooker.com Jimmy

    This is awesome, I have a nice little project this weekend that will be perfect for kicking the tires :)

    Also, I figure this is a good place to schill for a new Stack Exchange proposal I just created for Front End Development, REPRESENT!

    http://area51.stackexchange.com/proposals/17712/front-end-development?referrer=bXMRqvJCJ-msEvo_YA8MCw2

  • K Arun Mariappan

    Nice and awesome work.. and Thanks

  • http://nelsonzheng.com Nelson Zheng

    100% Pure distilled awesomeness indeed!

  • http://www.codeforest.net Codeforest

    I checked Boilerplate yesterday and was amazed.

  • http://webkicks.dotink.org Matthew J. Sahagian

    Two things:

    1) The lack of semantic value for the CSS class names frightens me.

    2) I fail to see why everything is “baking-in” support for IE6. You’re trying to break into the future and holding yourself back at the same time. HTML5 elements, transparent PNGs, etc, … all these things don’t mean much when I still can’t do basic things like immediate child selectors in CSS — and sorry, but scripts like IE7.js just don’t hack it.

    There would have to be quite a few changes to this before I would actually think about using it.

    • w1sh

      Agreed. Not only that, but there seems to be a lot of bloat to these kind of things. I’d really rather someone just make a screencast breaking down each section of the boilerplate and teaching you what it does and how to implement it yourself.

      Or turn something like this into a framework and less of a template. Reminds me of Drupal’s bloat vs a PHP framework.

      • Keith

        I agree. I would appreciate a clear explanation of each section and feature in order for me to make the best decision on my end.

  • http:///www.smashingshare.com Waheed Akhtar

    Wow…. this is great. I would come handy only once I give it a try :) b/w thanks for this lovely piece of work!

  • http://www.squidoo.com/carheadrestdvdplayer wahid polin

    what am i supposed to do with this boilerplate thingy and ya i know i am dumb :|

  • http://larishteriastudio.com Ricardo Ortega Avalo

    Really good project, i’m testing it and it’s awesome. Thx so much for it ;)

  • http://www.tenaxtechnologies.com java web developer

    Hi,

    Thanks! I especially like the conditional comments for the body tag.
    Again thanks.

  • http://www.giulianoliker.com Giuliano

    Very nice! Thanks Paul! Now lets find the client/project to give it a test run.

  • Keith

    I really think that this deserves a full screencast with very clear explanations – without making any assumptions that the audience knows exactly what’s going on and why.

    • arnold

      ^ +1
      Jeff can we have one quick tip or any screencast

  • http://zingocan.com Tayfun

    I sure it’s awesome.

  • http://www.linkbuildingservices.com harly

    Great job Paul, Ironically, Google’s search and results pages don’t validate because of their use of invalid tags like and a number of other errors, but that’s okay. They can still take advantage of the HTML 5 parsing rules by using the correct DOCTYPE.Thanks for share the nice information.

  • http://www.elimcmakin.com Eli McMakin

    I appreciate the boilerplate, but when I see this I can’t help but wonder if we are going down the wrong path. There’s so many hacks and workarounds. I appreciate things like rounded corners and better forms, but it seems like we are causing future pain by adding if statements and classes into what should be simple structural or presentational code. HTML doesn’t have to do everything. We can leave some stuff to JS.

    Does anyone else know what I’m talking about?

    • http://www.shaneparkerphoto.com Shane Parker

      I’ve been going through it a bit today and you’re right, there is a LOT of stuff in here that probably isn’t going to be necessary on every job and it seems like a lot of work a rounds. It would be great if Jeff or somebody could put together an informative screencast on maybe a *limited* stripped down version or something. Or, at the least, do a walk through to explain everything for those who might get lost trying to put it all together.

    • http://webkicks.dotink.org Matthew J. Sahagian

      Yes, Welcome to HTML5 and CSS3… a non-standard. As far as I’m concerned every site currently in HTML5 is broken by definition.

      I love what HTML5 will be, but it’s not yet. And the fact that we will be able to produce more semantic markup with all the new elements will be amazing — but there is nothing semantic about the monstrosity laid before you.

    • http://www.elimcmakin.com Eli McMakin

      The more I look at HTML5 the more I wonder about how it will turn out. Some things are good, but I’m not sure about its direction. For example, we have to use js hacks to make sure browsers support it. Well, why would I not just use js in the first place if I have to do this? Correct me if I’m wrong, but it seems like HTML is moving from a declarative language into something resembling js.

  • Meander

    Some great eureka moments here! But should we be diving into the html5+css3 pool when these are only working drafts? What’s the likelihood of current defined elements, attributes being deprecated when these become true standards?

  • http://mo7amedfouad.co.cc/ Mohamed Fouad

    Perfect start for my upcoming project …. thanks nettuts :)

  • http://www.crearedesign.co.uk Steve Maggs

    Interesting split in the comments for and against. You’ll never please everybody I suppose. Like the boilerplate site itself and the concept. Think I’d be more likely to use it as a reference for most projects but if I want to get a flying start then why not. Really well thought out and although not full proof or a substitute for starting from scratch for more bespoke projects it is definitely useful.

    As for still accommodating IE6…I’ve given up hating and shouting, it’s now more like a drunken relative who fell asleep in the corner at Christmas but is still there 6 months later wearing a funny hat. That could just be me though.

  • Deak

    This thing might be fun for a sandbox, but it’s so bloated. I suppose “well done” is in order for assembling the mother of all web hacks, but, really, I hope no-one is mad enough to implement this in a production environment. Wait until HTML5 and CSS3 are proper standards.

  • Dax

    Their own website is not IE8 compatible…. so why the hell should I use that stuff ?

  • Anthony

    +1 on wanting a run-down/tutorial on each part of this!

  • Chris

    I would like an explanation of all these items and all of these files. I see demos and tests here. Are those needed in this broiler-plate? I just need to understand they why and the how of this broiler plate. I wold love a video screen cast of this.

  • http://sys-labs.com Syscl

    Maybe it’s better if there is an explanation or a little bit more descriptive prologue: what, why, how.

  • Sawyer

    Boilerplate is really cool! My only issue I’m experiencing with it is when I load a page that uses it, the .css often doesn’t download. I need to refresh multiple times for it to download to the browser, and after that it works great. I know the .css works, because the .css from the other pages are there, just the css doesn’t apply to elements on the new page. Does anybody know why this might be happening?

  • Mark Helder

    For who need a Codeigniter integration: i found Codeigniter-Boilerplate on github http://ariok.github.com/codeigniter-boilerplate. It’s simple and adds some interesting features like dynamically include JS/CSS , simple Google Font integration.