Paul Irish

Great stuff, though could I just propose you use a table with 2 columns for the code examples? This way it is possible to select parts of the code without selecting line numbers.

I'm going to be spending a lot of time poring over this. This looks awesome. Thanks!

Congrats Paul!

Thank you for sharing! I've been keeping a best-practices template as I go, but this is much more thorough. I'll certainly be using and contributing to this from now on.

Hot pink as a default for the selection text is a good call.

Can we get some html "data-property" attribute examples being used? Does this tie right into $.data? Possibly some offline storage techniques?

Other than that I think this is awesome! Thanks!

I like that!
I'm currently building a set of scripts to minify an HTML page and its resources. Have you something similar already?

Paul, impressive work!! Thanks for helping everyone and sharing your knowledge!!!

HTML5 Reset is good, but yours is a step behind… As allways ;-)

Nice work Paul. One question: Why force Google Frame? How does that work? Only if the user has it installed?

This is a piece of art. A really great collection of independent findings all brought together into a really sharp piece of code.

Perhaps you could consider this http://camendesign.com/code/developpeurs_sans_frontieres and warn users to not use a wrapper unless necessary.

Great. I'll be checking it out.
Thanks, Paul.

I wish something like that for HTML 4.1 as well. Anyway there's lot in there to checkout. Thanks a lot!

fine & outstanding work. Thanks Paul & Divya

@hakre – you could backport some of it to html4

I look forward to trying the latest changes. :)

This is way sick. Nice work, I'm gonna have to kick the tires with it this weekend :)

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

This is dope. I tell people often to scrap what they learned about HTML – that there's only a subset of tags they really need to use. I write simple code that works gracefully across browsers; of course, I don't do any fancy UI tricks (if I did, I'd offload them to jQuery anyway…)

I always wanted to create a "this is what matters" dictionary for HTML, with my own viewpoints, however, this goes much further and actually provides tools to make that happen, more or less.

I would love to see some standard pushed for a code syntax highlighter as well, one that works properly for both standard and mobile browsers, degrades for non-JS clients, etc! Such as this one (with a quick and dirty WP plugin too – http://alexgorbatchev.com/SyntaxHighlighter/)

Now, we should take this awesome iNove theme (I use it too, for the most part) and force in this boilerplate and see it in action :))

Or, in general, figure out all the common things people complain about, and begin establishing the "best way" to do it. Why not? :)

@paul & other commenters:

What do you think of less.js?

http://bit.ly/LessJS_Obsolete
http://bit.ly/LessJS

silly question, but: why don't serve 'dd_belatedpng.js' minified?
great job, btw!

about the clearfix thing, i've run into a solution here:

http://www.marcwatts.com.au/web-development/css/best-clearfix-ever.html

basically, it attempts to bake the clearfix into the css such that no declarations are needed. in practice, ive found it gives about 90% coverage. wondering if you've run into this; surely you/others have attempted this noble deed yourselves.

@Paul Irish

very cool, looking forward to it. will peep ghub for bleeding edge swizzle.

@Paul Irish

If you want to develop sites in HTML5 that gracefully degrade to HTML4 when in browsers that do not support it, how do you deal with scenarios like using the data-* attribute and also such things like not specifying a doctype. You basically have to write all your tags and code to be dynamic. Your example works for the basic site, but more complex sites do you recommend not migrating to HTML5 yet?

@Paul Irish

Wouldn't data-* not validate against HTML4 though? I was thinking if you wanted the source able to be validated in both 4 and 5. The doctype tag I can make dynamic on the server side.

I guess the data-* was a main concern because of how I would write my JS code. Also if I ever wanted to use a new tag defined in HTML5 I would have to incorporate a lot of logic on the server side to detect if the browser supported it. For example, something basic like the tag. This would be invalid in HTML4 but in HTML5 it would be fine. I would have to render different source based on browsers…which might get to become too much work.

The CSS graceful degradation seems more natural.

Maybe also add this to style.css

textarea,select,input{margin:0;}

Chrome seems to add a 2px margin around these elements.

About cache:

miscaching url with params can be a real problem: if you do not have mod_expires or the possibility to force headers from the web server (and do not want to write a lot of code for doing it in your server-side language), versioning files not also brakes cache for proxies, but also for browsers. Just take a look at tutsplus (that not write Expires explicitly), every "?versioned" link to static file always re-request the file. Yes, the server response is a 304 Not Modified, but the file is requested every time.

Forcing headers fix the problem for browsers (I hope for all), but as said, not for every scenario.

Also versioning is boring, so what I do for all my "dinamically-static" files is linking them to "path/file.123456890.css", where 1234567890 is the modification file time (for ex in PHP there's filemtime() function), and redirecting correctly with a rewrite rule (and do not forget to also force Expires header if you can).

Ok, I'm not sure that this should regards html5boilerplate.com (oh, great work ^^), but adding parameters to a static file link is always a bad practice.

For those who are too lazy to write their own code, here's a snippet of what I use (you are HIGHLY recommended to write your own (and better) implementation ^^): http://gist.github.com/547955

Hi Paul, I have a suggestion for the print section of css. Sometimes a page, with a very long table inside, could be partially printed (all pages except the first are left blank), so I find a simple workaround that may help (also on "ancient" IE versions)

@media print {
  * { ... float: none; position: static; }
  ...
  table { height: auto }
}

For the first rule: it seems that not only a positioned or floated tables could trigger this behaviour, but also a table contained inside a parent positioned or floated.
m2c.

hey paul. you rock. we are using this on our new website! i work with kit and he says he knows you, and i was like "no way! i read his blog all the time!!!" haha

@fcaldera : Can you elaborate what gets fixed because of this?

The first rule would remove floats and absolutely positioned content on the page, it might not always be suitable. I can't find anything online about any issues with printing long tables.

Hi Paul, I'm trying this out now so I can get started with html5. Just noticed some code at the bottom with an "\" that looked out of place (). Not sure if that is a typo or not…

!window.jQuery && document.write(")

Thank you for the great collection of smart tips and tricks!

One potential addition to .htaccess to secure it:

# secure htaccess
 
 order allow,deny
 deny from all

Not sure if it's still an issue, but found Safari randomly added padding to lists, solution:

ol,ul{-webkit-padding-start:0}

It is hottt !!!!

Nice framework!

Just wanted to mention that Dreamweaver CS5 can’t render the layout correctly in design mode if you keep the @page rule in the @media print portion of style.css

Your blog (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) recommends that IE conditional classes go in the html tag, and it claims that HTML5 Boilerplate does so.

However, http://html5boilerplate.com/ does not follow the recommended path in your blog post. It has the conditionals in the body tag.

So… Which do you recommend?

love the blog and boilerplate

Congrats for HTML5 boilerplate, Paul.

I've already used it for my two latest websites:

the new theme for my personal blog: Cyril Mazur

and a URL shortener I coded recently recently yop.la

I'll keep on using it until I find something better ;-) and if I have improvement ideas to submit, be sure I will.

Hello,
I had a quick question, I noticed on your Java Scripts and CSS you add an "?v=#"
What looks like a Version for Java Script and a Milestone for CSS. Is that forcing the JVM and CSS Interpreter to only use those versions/milestones?
If so could you please explain the benefit of this for the CSS, as it is cascading for backwards compatibility.

hot?

Hi Paul,

Thanks a lot for this. Very nice and chock-a-block with information too!!

One little thing – the url for the jquery cdn is missing the "http:". O don't know if this is intentional, but it makes IE6 very unhappy as I just found out. I am running it in a VM, but it runs quite well. But when I load a simple page using the boilerplate it hangs erratically.

Hope that helps.

Thanks again for this.

Hey Paul,

Really nice work here, it gonna be soooo useful. Thanks!
What are your thought on a non-minified version of the moderniser script being in there? You have one for jQuery.

I know i can go find it myself, but I'd find this pretty useful to know a package have proper versioning.
I like to do my own minification depending on what serverside framework I am using.

Cheers again

Thanks for the boiler plate paul, keep it going. Good luck! :)

nice, I'm finding a ton of great bits of code in here, one thing that confuses me though is:

since it's an HTML page and not server side, is that ?v=2 some kind of hack to stop it from caching or something?

@Brent Lagerman
Read this: https://github.com/paulirish/html5-boilerplate/wiki/Version-Control-with-Cachebusting
:)

very cool! Never seen that trick before, does it work with other stuff like images? ??

@Paul Irish
cool, is there a reason that you use html5 instead of xhtml5 examples.
xhtml5 shows typo's such as wrong closing tag's in your index.html example (see meter)
if you like i send you the modified part.

Paul-
i just came across this project a few days ago. i saw on github a discussion about dynamic script loaders but could not gather what your point was from the series. what is your opinion on using say LABjs or control.js together with the boilerplate system? or does the build tools make those unnecessary?

@Scott
I have lots of (very positive) experience with LABjs. Dont have experience with using it in the Boilerplate system, but do give it a try. LABjs == awesome.
ControlJS … no experience with this loader (and dont like the concept, but that is irrelevant here)

@Paul Irish
lessc styles.less > styles.css and your .less is a classic .css
With sass and compass, how can you see css modification after a refresh ? Do you really think it's efficient to lauch a script everytime you want to see your css modifications ?