The real HTML5 boilerplate

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

by chaosmachine • 15 years ago

84 30 15 years ago

csswizardry.com

chaosmachine2• 15 years ago

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

Tyrant5052• 15 years ago

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

chaosmachine2• 15 years ago

Except the highest level (h1 in this case).

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

wccrawford• 15 years ago

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.

Tyrant5052• 15 years ago

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.

shantanubala• 15 years ago

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.

lhnn• 15 years ago

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• 15 years ago

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• 15 years ago

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

necolas2• 15 years ago

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• 15 years ago

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.

jmillikin2• 15 years ago

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>

coderdude2• 15 years ago

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.

jmillikin2• 15 years ago

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.

po• 15 years ago

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

catshirt• 15 years ago

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.

Supermighty2• 15 years ago

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• 15 years ago

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.

Supermighty2• 15 years ago

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

JoelSutherland• 15 years ago

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.

necolas2• 15 years ago

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

nimbupani2• 15 years ago

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

oewolf• 15 years ago

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

pacomerh• 15 years ago

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.

lambda• 15 years ago

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.

defroost• 15 years ago

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• 15 years ago

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.

nimbupani2• 15 years ago

Yes TextMate doesn't like it sadly :/

The real HTML5 boilerplate

Related Stories