Cool Sites: Nike’s ‘Better World’ Site Embraces HTML5
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.
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 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
The best thing about the
data- attribute is that you can define your own syntax — just prefix your attributes with
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.