Please dig through the code and tell me what you think. I’d love to hear feedback about what we’re doing right/wrong/stupid. Or use it as an example to build your sites.
We’re using all sorts of fun new elements like
<section> to break up logical groups of content, and using the new recommended pattern of restarting headers at
<h1> inside every section.
The result is that we don’t have anything other than
<h2>s! Here is an example from the speakers section on the jQuery page:
Because we’re nesting sections, that 2nd
<h1> has the effect of being an
<h2>. Depending on how deep you nest, it can change priority without changing code. This is one of the changes I’ve been looking forward to most, and I’m quite enjoying it.
I learned a lot more about how
<footer> are meant to work. For example, I had our large lighter brown footer as the
<footer>, but this is wrong as the footer is not meant to have sections inside. Instead, just the copyright line at the bottom is the footer. It surprised me a bit, but made sense when I thought about it.
I had a lot of fun leaving out the / in self-closing tags:
<img src="example.png"> instead of
<img src="example.png" />. This would have freaked me out in my XHTML-loving days, but I’ve been liberated.
A handy help is sensible defaults for the type attribute when including CSS and JS. You can leave off the type and get
A have a private branch of the site where I left off some optional closing tags:
</li> and even
</body> but I left them in for now. Baby steps.
I made an experimental Rails plugin for HTML5 fun and it is up on GitHub.
What does it do? At the moment it overrides the default helpers to:
I don’t know what to add next, maybe some fun with forms. I simply began with what I wanted for Idea Foundry.
I like HTML5. I really didn’t need this project to tell me that, but it was a lot of fun to implement a real site in it. There are, of course, some IE quirks, but they are pretty easy to get around.
I’ve done far too much reading on HTML5 and associated specs over the years to think that these small items are much more than scratching the surface. They are, however, great starting points if you’re new to HTML.
HTML5’s biggest adoption hurdle is nothing technical. It is getting web developers to rethink their assumptions and practices. The brilliance is that you don’t have to change if you don’t want. All the new pieces are optional, not forced. Let’s go build some sites!