The real HTML5 boilerplate | Hacker News Reader

The real HTML5 boilerplate

csswizardry.com

84 pointschaosmachine30 comments

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.

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.

Yeah. And it's not like I can't use previous code from previous projects as a starting point (since I use Python, I have a skeleton Jinja template handy that is all I use for HTML5). If all he's providing is a couple tags and the doctype declaration, why would I even need his "boilerplate"? A knowledge repository is a lot more useful than basically telling me I need a doctype, html/head/body tags, and a compatibility layer for IE.

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.

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.

I think I heard that a "build custom download" tool is planned. In the meantime, a basic version might suit some of your needs: http://initializr.com

Yes it is being planned, here is our list for a RC release soon: https://github.com/paulirish/html5-boilerplate/issues/#issue...

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

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.

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.

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.

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/... I guess your editor was configured incorrectly; shows up fine in both forms in Vim.

Yes TextMate doesn't like it sadly :/

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

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

Except the highest level (h1 in this case).

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

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.

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.

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

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>

Did you even click the link?

http://csswizardry.com/2011/01/the-real-html5-boilerplate/#h...

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.

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.

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: ♥

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.

Yeah! and why even bother closing that </html>? Google doesn't. Hell, why bother with it at all? And why assume the developer wants english? Here's the real html5 boilerplate:

    <!DOCTYPE html>
    <meta charset=utf-8>
    <title>Title!</title>
    <p>Content!

I left in the charset=utf-8 to prevent the utf-7 security vulnerability. That's important. I think I'll go check this into github. :-D

not that i prefer it this way, but w3 seceded when they renamed html5 to html. thus, i'd say javascript and css actually are very much a part of html5 now.

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.

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

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

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

Reply on news.ycombinator.com