7 Facts and Myths of HTML5

As Opera evangelist Bruce Lawson puts it, “Everyone’s talking about HTML5”. It’s perhaps the most hyped technology since people started putting rounded corners & gradients on everything. In fact, a lot of what people call HTML5 is actually just old-fashioned DHTML or AJAX. Mixed in with all the information is a lot of misinformation.

HTML5 is simply a new set of standards, semantics and rules for coding website markup that can take advantage of several new “native” browser features such as offline storage, multi-media playback and a small level of interaction. Much of what we see on HTML5 websites that is really cool or innovative isn’t the actual markup, but a combination of CSS3 and jQuery, both themselves new and exciting standards evolving right alongside HTML5.

As designers, we tend not to fuss about with code and semantics and JavaScript this or that, but whether your expertise is in identity and print design or includes a little of web design, expanding your comfort zone to include the fundamentals of these new technologies is necessary to stay competitive and sharp in our crowded industry.

For now, let’s dispel some myths about HTML5 to pique your interest. There are several HTML5 resources at the bottom for those of you who want to learn more.

Myth #1: HTML5 was invented because Apple stopped supporting Flash .

Apple seems to get blamed for everything, but while HTML5 has some amazing solutions for mobile, it was not created to meet the demands of the iPhone.  In fact, Opera and Mozilla got together back in 2004 to try to solve the problem of a messy web, defining seven principles for good design. Their goal was simple – propose these principles to W3C as a roadmap for a sleeker, faster, better HTML standard. The principles covered aspects such as backwards compatibility, error handling, practicality, open development and avoiding device-specific profiling. It wasn’t until 2006 that the proposal was accepted, and in three short years a new spec was drafted, closed and made ready for use.

Myth #2: HTML5 won’t be ready till 2022.

I’m not even sure how this myth began circulating, but the working draft was closed – meaning nothing more can be added or significantly changed – in 2009. Because it has been driven by Opera and Mozilla from the start, it may even reach W3C’s Candidate Recognition this year, as almost the entire spec is supported by both browsers. Even still, you can use HTML5 right now and rest assured it will degrade gracefully and work in older browsers with the inclusion of some lightweight JavaScript, all the way down to complex Canvas implementations. All current browsers support HTML5. What you need to be careful of isn’t the markup, it is the CSS. Even with pre-made CSS resets intended to help out older browsers, design built around CSS3 can fall apart in older browsers unless you take care of the details.

Myth #3:  HTML5 requires CSS3.

It makes the most sense to use semantic class names and CSS3 declarations when building something with HTML5, but it isn’t a requirement. HTML5 is just markup, so it gets along just fine with CSS2 styling, but what it does require is complete styling for all presentational elements of your design. In other words, the HTML5 spec removes attributes and tags that control the look or style of any element, and is no longer tolerant of inline styling. The browser is now the supreme governor of how your site is rendered and what rules you need to abide by when creating layout with your markup. For example, in HTML5 you need a “display:block” declaration for each HTML5 element for them to be understood properly in IE8 and earlier. In short, HTML5 needs styling to look good, but it doesn’t necessarily have to be CSS3.

Myth #4: HTML5 ruins accessibility.

On the contrary, HTML5 is built around accessibility. While drafting the spec, utmost care was taken to ensure each element works with WIA ARIA landmark roles.  These roles are specialized attributes added to your tags that allow accessibility devices such as screen readers to better interpret the site’s flow and content better. Converting a site to HTML5 may ruin the accessibility if these roles aren’t understood and implemented properly, but that won’t be the fault of the markup!

Myth #5: HTML5 will kill Flash.

The fact is that Flash is still used by several million websites and developers world-wide. The misconception was born, once again, from the high profile fallout between Adobe and Apple and the rapid adoption of HTML5 audio and video for application and mobile development as a result. However, though HTML5 is great for low volume video playback, full HTML5 support requires two or three times the encoding chores of Flash support and still lacks many critical features currently available in plug-in based technologies. Currently, sites like Vimeo and YouTube use HTML5 technology largely for technology’s sake, and will not be moving away from Flash too rapidly. Developer Viki Hoo points out several other reasons why Flash will be around awhile in her compelling argument here.

But let’s get back to Flash with regards to web design. In that context, we are likely to see a rapid switch from Flash to HTML5 in the coming years. HTML5 is easier to learn and use, even for those of use without a high level of JavaScript mastery. It doesn’t require a 3rd Party plugin to work, loads faster and is extremely mobile friendly. So it isn’t that HTML5 will kill Flash, it’s that it will dominate the mobile design and development market.

Myth #6: If I add the new HTML5 doctype to my site, it is now HTML5.

It will be HTML5 as far as the browser is concerned, but HTML5 is more than a doctype. It is a full set of best practices, semantics and layout elements such as

,

,

,

and

that will make your website truly take advantage of the new capabilities of the browser and validate as HTML5. Naturally, adopting the new doctype is a step in the right direction to adopt HTML5, but it is important to learn what really makes an HTML5 website HTML5 before buying into an app, theme or platform that claims it is built with HTML5. Adobe’s new Muse app is a perfect example of this myth in action. You must also take into consideration the number of elements and attributes that have been depreciated in HTML5 and review your existing markup to ensure the best chance of compatibility.

Myth # 7: I’ll get more chicks/jobs/cash/respect if I use HTML5.

Mastering HTML5 probably won’t get you voted the sexiest man or woman alive; although it seems to have worked for Bruce Lawson. It is also not enough to get your foot in the door at a lucrative digital agency. In the end, your design skills and attention to detail are what will make you successful. With that said, learning about and adopting new technologies quickly does take passion and perseverance, which are both admirable traits. Your peers will probably respect you more if you use your knowledge to help them, or can achieve something new and great.

Designers should care about HTML5, but mastering it should be driven by a love of the principles it was based on and not an ideal of fame and riches.

For those who want to get their feet wet with HTML5 but don’t have much coding chops, you may like to check out Wix, who recently launched “the first full-featured HTML5 website builder” on the web. It’s basically a tool that helps you create completely custom websites without mucking about with styles, scripts and markup – unless you want to.