4 ms·

The real HTML5 boilerplate

84 points by chaosmachine 16y ago

lambda 16y 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 16y 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 16y 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/syntax.html#the-doctype 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.
- nimbupani 16y ago
  Yes TextMate doesn't like it sadly :/
chaosmachine 16y ago
PS: Here's a really simple HTML5 template I found useful: http://codesnipp.it/code/1513 http://codesnipp.it/code/1513
- Tyrant505 16y ago
  Just a heads up, <hgroup> takes the nodes out of the document outline.
  - chaosmachine 16y ago
    Except the highest level (h1 in this case). http://html5doctor.com/the-hgroup-element/ http://html5doctor.com/the-hgroup-element/
wccrawford 16y 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.
- Tyrant505 16y 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 16y 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 16y 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 16y 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 16y 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
necolas 16y 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/ 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 16y 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.
jmillikin 16y 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>
- po 16y 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 16y 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.
- coderdude 16y ago
  Did you even click the link? http://csswizardry.com/2011/01/the-real-html5-boilerplate/#html5-boilerplate 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.
  - jmillikin 16y 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.
    - coderdude 16y ago
      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: ♥
Supermighty 16y 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 16y 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.
  - Supermighty 16y ago
    Or you alter the reset itself so you don't have to override useless values.
JoelSutherland 16y 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.
- necolas 16y 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 http://initializr.com
- nimbupani 16y ago
  Yes it is being planned, here is our list for a RC release soon: https://github.com/paulirish/html5-boilerplate/issues/#issue/242 https://github.com/paulirish/html5-boilerplate/issues/#issue...
  - oewolf 16y ago
    Ah, if we could download it directly in haml... :)
pacomerh 16y 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.

84 points by chaosmachine 16y 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 16y 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 16y 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/syntax.html#the-doctype 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.
nimbupani 16y ago
Yes TextMate doesn't like it sadly :/

chaosmachine 16y ago

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

Tyrant505 16y ago
Just a heads up, <hgroup> takes the nodes out of the document outline.
- chaosmachine 16y ago
  Except the highest level (h1 in this case). http://html5doctor.com/the-hgroup-element/ http://html5doctor.com/the-hgroup-element/

wccrawford 16y 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.

Tyrant505 16y 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 16y 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 16y 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 16y 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 16y 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

necolas 16y 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/ 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 16y 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.

jmillikin 16y 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>

po 16y 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 16y 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.
coderdude 16y ago
Did you even click the link? http://csswizardry.com/2011/01/the-real-html5-boilerplate/#html5-boilerplate 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.
- jmillikin 16y 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.
  - coderdude 16y ago
    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: ♥

Supermighty 16y 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 16y 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.
- Supermighty 16y ago
  Or you alter the reset itself so you don't have to override useless values.

JoelSutherland 16y 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.

necolas 16y 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 http://initializr.com
nimbupani 16y ago
Yes it is being planned, here is our list for a RC release soon: https://github.com/paulirish/html5-boilerplate/issues/#issue/242 https://github.com/paulirish/html5-boilerplate/issues/#issue...
- oewolf 16y ago
  Ah, if we could download it directly in haml... :)

pacomerh 16y 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.