HTML5: Over-Hyped
or the Next Big Thing?
HTML5 has been receiving an extraordinary amount of attention, thanks in part to active support and promotion by Google, Apple, and Mozilla, among others. At every web conference, there’s an assortment of HTML5-related sessions, and they attract overflow crowds.
The flood of HTML5 books has begun; Introducing HTML5 is one of the first, and a great place to start. The first book from A List Apart, HTML5 for Web Designers by Jeremy Keith, is another brief and insightful guide.
Despite its high profile, however, the HTML5 specification isn’t even complete, much less officially blessed or broadly supported by browsers. It will probably be a decade before you can design sites that require a full range of HTML5 features with confidence that the vast majority of installed browsers will support it.
So is HTML5 over-hyped?
Or is it the Next Big Thing in web design?
It is both.
Why Use HTML5 Today?
If you want to understand where the web is heading, and to be a part of its evolution, there’s no doubt that HTML5 is something you want to be on top of. The more of us who are using it in the early days and providing feedback, the better HTML5 will be when it matures.
But in terms of delivering practical value for sites you are building today, most of HTML5 just isn’t yet relevant. There are a few exceptions — mostly when you need to support multimedia on iPads and iPhones.
This is not to say that there aren’t parts of immediate value; each feature needs to be considered separately. HTML5 is not a monolithic thing, but a diverse collection of features from which you can pick and choose.
In the long run, HTML5 will simplify website coding by making more capability available through HTML5 tags. In the near term, however, you still need to keep the "old way" (typically using JavaScript or Flash) as well as adding the HTML5 option, so it makes life more complex.
When will you be able to build sites that depend on a range of HTML5 capabilities, and know that 95% of browsers support it? About the time that Internet Explorer 9 is the oldest version of IE that you care about.
Pick Your Coding Style
There was once a schism in the HTML world between the HTML 4 coding style and the XHTML style. Many designers and coders prefer the XHTML style for its consistency and precision. All tags are lower case, all attribute values must be in quotes, and all elements must be closed. Others are happy with the looser rules of HTML 4.
Although XHTML 2.0 has died, and HTML5 is the victor, this has no implication for coding styles. HTML5 officially supports both coding styles, so you can take your pick. XHTML 2.0 is dead, but XHTML syntax lives on.
What You Can Use Now
There are some simple markup improvements in HTML5 you can start using immediately. For example, the wonderfully simplified doctype and character set declarations:
<doctype html><br /><meta charset=utf-8>These declarations work in all browsers of importance today, so you can change these two lines of your code now and call your site HTML5!
Unfortunately, aside from saving a little typing and making the <head> section of your code prettier, these changes don’t really do anything for your site.
New Structural Elements
HTML5 includes a raft of new structural elements that let you mark up your content more semantically. With a little hack for Internet Explorer, you can use these new elements today. They include:
- <nav>
- <header>
- <footer>
- <article>
- <aside>
- <section>
- <figure>
So instead of wrapping everything in a div or a span, you can use an element that is appropriately named. This won’t do anything for the appearance or function of your web pages; it is simply a matter of providing more semantic structure to your code.
In time, it’s likely that search engines will use these tags, if present, to improve their understanding of your content, so it is possible that there will be some tangible, near-term benefits. But the major value is in making your code more easily understood by both humans and machines.
Apple Makes HTML5 Video Important Today
HTML5 also includes native support for video and audio playback in the browser, without requiring Flash, Quicktime, Windows Media Player, or anything else. As with the new doctype declaration, the code is wonderfully simple:
<video src="filename.ogv"></video>It takes a bit more code if you want niceties like playback controls, but it remains clean and elegant. Except for one problem: there’s no agreement among browser makers on which video codecs to support.
You can still make it work for the browsers that support HTML5 video by providing multiple versions of the video file; it takes at least two different formats to cover the major browsers. And Internet Explorer (surprise!) doesn’t support HTML5 video at all, even in version 8.
All things considered, Flash remains a better way to show video or play audio on the web. You can create much more capable players, and you only need a single video or audio file instead of multiple versions using different codecs. (See, for example, Flash and the HTML5 <video> tag on the YouTube API blog.)
There is just one immediate, practical reason HTML5 video and audio are important today: Apple’s refusal to support Flash on its iPad and iPhone. But with the success of these devices, it’s a compelling reason. Through its spurning of Flash, Apple has significantly accelerated the adoption of HTML5 video and audio.
We’ll devote a future post to explaining how to use HTML5 video and audio players, in combination with Flash players, so you can support iPads, iPods, and the rest of the world too.
A New World of Forms
HTML5 makes forms far more powerful, enabling you to do the things you need JavaScript for today with simple declarative markup. You get some additional input types, such as date and color pickers. And validation rules can be specified right in the markup, so the browser will prompt the user if anything is entered incorrectly.
Today, you can use JavaScript to test if the user’s browser supports the HTML5 form features you want to use, and then provide either the native HTML5 code, or an HTML4 form with JavaScript, for entry widgets and validation.
So what does this get you today? A bunch of extra complexity, less ability to style your forms consistency, and very little real benefit. If you want to explore the leading edge and see where forms are heading, we encourage you to explore HTML5 forms. But if you’re only concerned with delivering the best forms you can today with the least effort, check back in a year or two and keep using jQuery for form widgets and validation.
The Wonders of Canvas and Database APIs
HTML5 includes a number of JavaScript APIs, designed to make web browsers better application platforms. If you’re developing web applications, someday these features will eventually be invaluable.
As a web designer, you’re not likely to want to make extensive use of these JavaScript APIs directly, unless you’re also a programmer. Some day, the canvas element, combined with an authoring tool that lets you design interactions and animations graphically and then output them as HTML5 JavaScript, may largely displace Flash. But today, there is no such authoring tool, making canvas of limited utility for most designers.
If you love to play with JavaScript programs, check out canvas today; otherwise, check back in a year and see what sorts of authoring tools have emerged.
The database and offline features of HTML5 will be great for web application developers, once they are more widely supported, but most web designers aren’t likely to use them.
Fonts, Rounded Corners, and Drop Shadows
Embedded fonts, rounded corners, and drop shadows are all cool things that you can and should use now, and they are often discussed as if they are part of HTML5 — but they’re not. These are CSS features, some that were defined in CSS 2.1 but only recently became useful, and others that are part of CSS3. We’d devote a future post to these capabilities.
CSS3 also includes the ability to animate CSS rules, which eventually will replace some uses of JavaScript and Flash. But browser support for CSS3 animation isn’t yet widespread enough, so stick to JavaScript for now unless you’re building CSS3 demos or can require very specific browsers.
So Is HTML5 the Next Big Thing?
Absolutely. But its effects will be gradual, and its benefits modest for quite some time. The only widespread, immediate, practical issue pushing adoption of some HTML5 elements is Apple’s lack of support for Flash, but that’s enough to give it a big kick.
In future posts, we’ll cover HTML5 audio and video, as well as the new structural elements, in more detail. We’ll also explore the new world of web fonts and other leading-edge CSS features.
Topics: Web Design, HTML5 and CSS3