HTML5 in the Wild

I was able to use HTML5 in the real world in a bit way recently, on the launch of Idea Foundry. Here is my report, with some fun goodies for Rails developers.

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.

Fun with new elements

We’re using all sorts of fun new elements like <section> <article> <header> <footer> <nav> <aside> and <mark>

We’re using <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 <h1>s and <h2>s! Here is an example from the speakers section on the jQuery page:

Speakers

Karl Swedberg

After having owned a coffee house, taught high school English, and edited copy for an advertising agency, Karl Swedberg began his career as a web developer four years ago. He now works for Fusionary Media in Grand Rapids, Michigan, where he specializes in client-side scripting and interaction design. Karl is a member of the jQuery JavaScript Library project team and the co-author of the book Learning jQuery 1.3. His blog, LearningjQuery.com, is a popular source for jQuery tutorials, tips, and techniques.

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 <header> and <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.

SinsWins of Omission

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 type="text/css" and type="text/javascript" assumed as the default.

A have a private branch of the site where I left off some optional closing tags: </p> </li> and even </body> but I left them in for now. Baby steps.

Rails Plugin

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:

Remove the default type="text/css" and type="text/javascript" values.
Remove the / on self-closing tags (<link> <img> <input> etc.)

I don’t know what to add next, maybe some fun with forms. I simply began with what I wanted for Idea Foundry.

Conclusions

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!

4 Comments

squidgaming — December 28, 2021

I am very impressed with your article. I love the way you write this article. Thank you for sharing this wonderful post with us.
chess online — May 20, 2023

My comprehension of the subject matter has improved and my perspectives have been expanded as a result.
cuphead — June 29, 2023

Thanks for your ideas!
connections game — October 25, 2023

I want to express my gratitude for your wonderful blog article.Wow, such a great website and what an interesting topic!