You might think, given the varying browser support, that no one is using HTML5 yet. But you’re wrong. HTML5 is everywhere you look. Even Nike, which has a history of Flash websites, recently turned to HTML5 to build its new “Better World” website.
The Nike Better World website uses HTML5, CSS 3 and JavaScript to create a unique scrolling storyboard-style experience. The site has received quite a bit of attention in the design community for its unique interface and fancy animations.
It also makes a great lesson in how you can use — and, sadly, now you should not use — HTML5 today.
One of the best ways Better World uses HTML5 is the awesome, and often overlooked, data- attribute. If you’ve ever used a title attribute to pass some data to JavaScript, well, the data- attribute is your new friend. HTML5’s custom data attributes allow you to write semantically valid HTML while, simultaneously, embedding data within the page.
On the Nike site, attributes like data-controller and data-scrolloffset pass information to the JavaScript scrolling function without mucking up the semantics of the page.
The best thing about the data- attribute is that you can define your own syntax — just prefix your attributes with data-. For a great overview of the new data syntax and how you can use it, check out JavaScript guru John Resig’s overview of the data- attribute.
However, impressive as the Nike site is, it also gets some things wrong. While Better World uses many of the new HTML5 tags — like article, section, header, footer and canvas — it isn’t always using them properly.
The prime offender is the ever-confusing section tag, which is scattered about the site somewhat haphazardly. Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of Nike’s site, the answer is often no. In most cases the code would be improved by simply using a div tag.
Despite all the cool new semantically meaningful tags, remember that there’s nothing wrong with good old div. In fact, that’s one of the things it’s for — elements that don’t have semantic value.
Nitpicking aside, the Nike site is great example of a big company pushing the envelope with HTML5. Our only real complaint is that Nike is still relying on Flash for video — ironic considering that HTML5 video is one of the more common examples of HTML5 on the web today.
