

The real HTML5 boilerplate - chaosmachine
http://csswizardry.com/2011/01/the-real-html5-boilerplate/

======
wccrawford
His problem with the 'boilerplate' is that it's named wrong. It's more of a
knowledge repository than a boilerplate.

Personally, I find it a lot easier to delete things than add them, so the mis-
named boilerplate is a pretty nice place to start, if you ask me.

~~~
Tyrant505
Yea, I was thinking the same thing. I almost googled what "boilerplate" means
and where it came from but then I decided to get back to work instead.

------
lambda
Here's my HTML5 Boilerplate:

    
    
        <!DOCTYPE html>
        <title></title>
    

It's valid, it works in all major browsers, it doesn't assume anything about
which features I want to use, it leaves me in standards mode, not quirks mode,
and I can type it out from memory instead of having to have some boilerplate
saved somewhere.

------
JoelSutherland
HTML5 Boilerplate is great if you just work on a few projects, because it is
easier to delete things than remember them.

If you work on new projects fairly frequently, it's better to develop your own
boilerplate as a starting point. This is what I do and it saves a bunch of
time.

So I understand this author's complaints. If you make web sites (not web apps)
there is quite a bit in HTML5 Boilerplate that just isn't for you.

All that said, my biggest complaint is that it is good. So good that it has
probably meant that other, more project-type specific HTML5 boilerplates don't
seem to exist.

edit: A cool tool for HTML5 boilerplate might be a "build custom download"
similar to what jQuery UI has.

~~~
nimbupani
Yes it is being planned, here is our list for a RC release soon:
[https://github.com/paulirish/html5-boilerplate/issues/#issue...](https://github.com/paulirish/html5-boilerplate/issues/#issue/242)

~~~
oewolf
Ah, if we could download it directly in haml... :)

------
necolas
The tone of the article was surprising. The alternative boilerplate is far too
simple to cut it as a boilerplate for people building even the most modestly
sized sites. It certainly doesn't cater to the majority of professionals in
the way that the HTML5 Boilerplate project tries to.

A previous article, Easy HTML5 Template <http://www.impressivewebs.com/easy-
html5-template/>, also proposed an alternative boilerplate. But it clearly
distinguished between what the HTML5 Boilerplate project is aiming to do, and
why/when a simple boilerplate has its place.

~~~
sudonim
I suspect that the author references HTML5Boilerplate in an inflammatory way
in order to get us talking about it.

I view the HTML5Boilerplate as a cross-browser-reset and sensible defaults for
everything else. If those defaults don't work for the author, he could fork it
on github and change them.

------
defroost
681 lines? The HTML5 Boilerplate that I grabbed from Paul Irish's website, the
commented version, is 94 lines. And much of the stuff can be removed. I have
my own HTML5 boilerplate as a TextMate snippet, but augment it.

One thing about the Paul Irish boilerplate: why is the doctype declaration in
lowercase?

<!doctype html> as opposed to <!DOCTYPE html>. TextMate doesn't seem to like
the lowercase doctype as it highlights it in red. Not sure about Vim or Emacs.

~~~
strager
I didn't check, but I think the 681 includes the CSS and such.

The "doctype" part is case-insensitive, according to the pseudostandard on
WhatWG.org: [http://www.whatwg.org/specs/web-apps/current-
work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/syntax.html#the-doctype) I guess your editor was configured
incorrectly; shows up fine in both forms in Vim.

------
chaosmachine
PS: Here's a really simple HTML5 template I found useful:
<http://codesnipp.it/code/1513>

~~~
Tyrant505
Just a heads up, <hgroup> takes the nodes out of the document outline.

~~~
chaosmachine
Except the highest level (h1 in this case).

<http://html5doctor.com/the-hgroup-element/>

------
Supermighty
I never cared for the word "reset" for css resets. I always considered them
"sane defaults". I take the reset and set the values to what works for me and
build my site off of that.

~~~
wahnfrieden
It's called reset and not sane defaults because most CSS resets do not provide
sane defaults, just a consistent base. You're supposed to override the resets
yourself.

~~~
Supermighty
Or you alter the reset itself so you don't have to override useless values.

------
jmillikin
Javascript? CSS? You don't need all that crap. Boilerplate is supposed to be
stuff you can't do without, not a bunch of froo-froo frivolities to cater to
ancient browsers. Here's all the HTML5 boilerplate you need:

    
    
      <!DOCTYPE html>
      <html lang="en">
      <head>
      	<title></title>
      </head>
      <body>
      </body>
      </html>

~~~
coderdude
Did you even click the link?

[http://csswizardry.com/2011/01/the-real-
html5-boilerplate/#h...](http://csswizardry.com/2011/01/the-real-
html5-boilerplate/#html5-boilerplate)

It's extremely minimalist as it is. Your example is lacking of things you
would want to include such as at least specifying the charset.

~~~
jmillikin
Yes, I clicked the link. I see no reason why so-called boilerplate includes
JavaScript, <meta> tags, and a whole bunch of CSS.

If you want to display non-ASCII characters, use XHTML5 -- trying to get
Unicode working portably in HTML5 isn't worth the grey hair.

~~~
coderdude
It includes the reset CSS so that you can get your design working consistently
across UAs. The JS was included so you could use the fancy new HTML5 in old
versions of IE. Seems like a reasonable include. The reset CSS is basically
mandatory either way, regardless of what version of HTML you use. I'm not sure
what you mean by getting Unicode to work in HTML5. UTF-8 encoding is pretty
universal at this point and not dependent on your markup version -- not to
mention the existence of character entities. There's a Unicode entity on this
very page and this site doesn't even use a doctype: ♥

~~~
rdrimmie
I strongly suspect jmillikin is taking the piss and the tone may not be being
transmitted with the text. It is the same argument as the article itself,
reductio ad absurdum.

------
pacomerh
I rather have the option to remove things, it's your duty to know which parts
are html5 and which ones are not. The name may be a little off, but I consider
the name just a label, like many other things on the internet, they're just
labels. Paul has great intentions and I also found the cleaner "real"
boilerplate useful, thanks.

------
lhnn
Call it "HTML5 Utility Belt" and the article's argument goes away.

(I was going to say it "evaporates", but it's all hot air already.)

~~~
paulirish
Not a bad name. I had it previously called "frontend pro template" but didn't
♥ it. But I agree the name is contentious. It's not a real "boilerplate" by
the book. _shrug_

Since it's my project Harry is critiquing, I'll republish my comment I had
left there:

So indeed, the boilerplate makes assumptions. It’s all based on the sort of
websites I’ve been developing for the past four years: jQuery-based, forward
thinking, but with some level of support for IE6.

And, yes, there are some opinionated choices in there; but I dropped a lot of
other aspects as I decided they weren’t likely to be used by 80% of users.
jQuery, google analytics, and IE6 seemed like safe bets. But maybe that’s
changing…

Indeed much of the features (test suite/yui profiler/analytics) is predicated
on the idea that it’s easier to hit Backspace than it is to go and seek out
those files and drop them into your project. I think people’s constant
requests to get javascript libraries on CDNs only proves there is a usability
problem with downloading files to add to your project.

But hey, I hear ya, and I don’t want this project to make developers think
it’s the only way to do HTML5. But it’s probably the safest unless you like
hitting problems that have cropped up again and again in the past 5 years of
web dev.

If I could just educate users en masse on all the things they need to know to
execute on a project flawlessly, I would. (And I’m also trying to do that) But
distributing best practices in the form of a packaged product is also a really
effective teaching tool. :)

~~~
joakin
Dont take that rant too serious, you did amazing work gathering all the stuff
for the template, and i bet that for many people has been really useful.

I find painless to delete some stuff I dont want, better than start adding all
the stuff I do, and I learnt some stuff from the commented version.

Thanks for the "boilerplate", I love it

