Comments:"The three levels of HTML5 usage · Mathias Bynens"
URL:http://mathiasbynens.be/notes/html5-levels
I was asked to give an introductory talk on HTML5 for the latest Adobe User Group Belgium Web SIG Event. The presentation I ended up with is entitled “HTML5: It goes to ELEVEN” and can be viewed on Slideshare.
Since the target audience was filled with ‘esteemed HTML5 newcomers’ I decided to focus on how easy it is to ‘switch’ to HTML5 and use it today. The way I see it, there are three levels of HTML5 usage:
Level 1: It Just Works™
The HTML5 spec is written (and still being edited) with backwards compatibility in mind. There are some new features in HTML5 that already work in every A-grade browser and can thus be used today, without requiring any weird hacks. Level 1 HTML5 is limited to these features.
Redefined HTML4 elements
Some HTML4 elements were changed in HTML5. Because these elements already existed before HTML5 and have been around for a while, all browsers already support them. You really don’t have to do anything to benefit from their new meaning and added possibilities in HTML5.
Most of the changed HTML elements simply get new semantics, but one of them gets a new ‘feature’ — the a element, used to create hyperlink anchors or ‘links’. In HTML4, you were limited to inline links (in phrase content), but HTML5 makes it possible to use block level links, meaning you can use the a element as if it was a clickable div:
<a href="/canhazfood/carrot">
<h1>Carrot</h1>
<p>Om nom nom nom.</p>
</a>After that, all you need is some extra CSS on the anchor:
a {
display: block;
}Simplified syntax
HTML5 greatly simplifies the general syntax of your documents. This makes HTML5 easier to use than any of its predecessors.
DOCTYPE
I bet 99% of all web developers never typed out a pre-HTML5 DOCTYPE declaration. Either they copy-pasted it, or had it inserted automatically by their editor of choice. You can’t blame them — no one likes to type out stuff like <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
The HTML5 DOCTYPE, on the other hand, is short, simple, and easy to remember:
<!DOCTYPE html>You’ll probably spend more time copy-pasting that than simply typing it out.
Character encoding
Specifying a document’s character encoding gets easier, too. Instead of…
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">…you can just use the following in HTML5:
<meta charset="utf-8">Optional type attributes
HTML5 specifies default values for the type attribute on script, style and link elements. Unless you need a different value than the default, you can simply omit the type attribute.
<!-- HTML 4.01 / XHTML -->
<link rel="stylesheet" type="text/css" href="foo.css">
<!-- HTML5 -->
<link rel="stylesheet" href="foo.css"><!-- HTML 4.01 / XHTML -->
<script type="text/javascript" src="foo.js"></script>
<!-- HTML5 -->
<script src="foo.js"></script><!-- HTML 4.01 / XHTML -->
<style type="text/css">
body { background: gray url(boring.gif) no-repeat; }
</style>
<!-- HTML5 -->
<style>
body { background: pink url(unicorns.png) repeat; }
</style>Optional solidus (/>)
The most distinct difference between HTML4 and XHTML is that the latter requires a stricter syntax for self-closing elements. In XHTML, this is how you insert an image:
<img src="foo.png" alt="Foo" />The space is optional, so the following is valid XHTML as well:
<img src="foo.png" alt="Foo"/>However, in HTML, using the solidus isn’t required:
<img src="foo.png" alt="Foo">This makes it very easy to ‘upgrade’ your valid HTML4 or XHTML documents to HTML5. Just change the DOCTYPE and boom! — you’ve got yourself a valid and conforming HTML5 document. Yay for backwards compatibility!
Level 2: Stuff that degrades gracefully by default
HTML5 has some slightly more advanced features than those in Level 1. These features can be used without a problem, and will work in modern browsers who support them. In older browsers, they won’t work out-of-the-box, but at least nothing will break — all non-HTML5 functionality will be preserved.
The most obvious examples of this were described in the Web Forms 2.0 spec, which is now superseded by the Forms chapter of the HTML5 specification. HTML5 offers new values for the type attribute on input elements. For example, for email input fields, you can use:
<input type="email">This is especially advantageous on mobile devices, who can provide an optimized keyboard layout for entering an email address (with dedicated keys for the @ and . characters). The same goes for the other new input types: there’s url for URLs, tel for telephone numbers, number for numbers in general, datetime, date, time, month, week and many, many more.
There are some new attributes for input elements as well. placeholder allows you to specify a short hint (a word or short phrase) intended to aid the user with data entry. Browsers that support it, will display the placeholder text when the input element’s value is empty and doesn’t have focus.
<input type="email" placeholder="bazinga@example.com">The autofocus attribute indicates that an input field should receive focus upon page load.
<input type="search" autofocus>You can just go ahead and use the new input types and attributes. Users with modern browsers will immediately benefit from the advantages; everyone else will simply get the same experience as they would without the added HTML5 goodness. If you enter an unknown value for the type attribute on an input element, or omit it altogether, browsers will interpret it as if it was text. Similarly, if a browser encounters an unknown attribute, it will simply ignore it.
Sometimes, graceful degradation just isn’t enough — if you want to use the new placeholder and autofocus attributes and have them work in Internet Explorer, for example. You’ll have to use feature detection through JavaScript and provide a fallback emulating the desired behavior.
Level 3: All you need is some extra love
So far we’ve seen two levels of HTML5 usage: Level 1 (new HTML5 goodness that just works) and Level 2 (stuff that degrades gracefully by default). Every new HTML5 feature that wasn’t already mentioned, is part of Level 3. Sadly, these features require additional hacks to work cross-browser. Forget about graceful degradation — these are things that mess your site up if you don’t provide proper fixes.
New elements
HTML5 offers three types of new elements: sectioning elements, inline elements and interactive elements.
The new sectioning elements are <section>, <article>, <nav>, <aside>. There are some ‘flow content’ elements that can be used to indicate page sections as well: <header> and <footer>. As you can see, these elements provide semantic alternatives to what used to be <div>s in HTML4 documents. This doesn’t mean <div>s are deprecated in HTML5 — you just won’t need them anymore to markup these common document portions.
Since these new block-level elements aren’t yet included in most user agent stylesheets, you’ll just have to add some CSS to make them work as intended:
article, aside, footer, header, section {
display: block;
}Of course, this is just an example using the most common new block-level HTML5 elements, but you get the idea.
Some of the new inline elements are <mark>, which indicates a highlighted run of text, and <time>, which is pretty self-explanatory. Again, these elements can be seen as semantic alternatives to certain situations where you’d probably use <span>s in HTML4.
When Internet Explorer encounters an element that it doesn’t recognize, it doesn’t apply any CSS on it. However, this can easily be fixed by using the HTML5 shiv (JavaScript), effectively eliminating the need to avoid new elements that don’t require special rendering or user interaction.
The new interactive elements in HTML5 are elements like <details> and <video>. Obviously, if you want to use these in a cross-browser-compatible way, some more work is needed. Sure, with the above fix, these elements can be styled using CSS in every browser — but still, not all browsers known how to handle them. The key here is to use feature detection with JavaScript and provide a fallback (in JavaScript and/or Flash) if needed. Of course, you’ll need different feature tests and fallbacks for different elements, but the good news is: you probably won’t have to code these yourself. For example, not too long ago, I wrote about a bulletproof HTML5 <details> fallback using jQuery.
JavaScript APIs
As with the new interactive elements, the new HTML5 JavaScript APIs (for <video>, <audio>, <canvas>, drag-and-drop, offline apps, inline editing, workers, web sockets, and many more) won’t just work in browsers that don’t support them. You’ll need to use feature testing and provide a fallback in JavaScript and/or Flash when needed.
Browser support tables, feature tests, shims, polyfills, fallbacks, and further advice
Once you’ve pinned down which HTML5 feature you want to use, you may want to find out which browsers already natively support it. In that case, just look it up on When Can I Use.
Looking for a feature test? Check The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything, or just use Modernizr for all your feature detection needs.
Looking for a fallback, shim or polyfill? Check the Modernizr wiki.
Looking for advice on a specific feature? HTML5 Please is here to help.
Summary (TL;DR)
There is no reason not to use Level 1 HTML5. It works in every browser, you can do cool stuff that wasn’t allowed before (like using block level anchors) and the general syntax is easier than the HTML 4.01 / XHTML you were using before.
Level 2 offers some nice little extras over HTML4/XHTML. They might not be supported in all current browsers yet, but at least using them won’t break anything. It’s possible to emulate the desired behavior in older browsers using JavaScript anyway.
The Level 3 HTML5 features only work in browsers that support it; in older browsers, there’s no graceful degradation by default. It just won’t work. You’ll have to use JavaScript for feature detection and provide a fallback of your own when needed. Needless to say, this level is the most fun for hardcore web developers living on the edge :)
If you need a browser support table, a feature test, a fallback, or just some advice on a specific HTML5 feature, an excellent set of resources is at your disposal.
About me My name’s Mathias Bynens, and I’m a freelance web developer from Belgium. I collaborate on open-source projects such as jsPerf and HTML5 Boilerplate. If that sounds like fun to you, you should follow me on Twitter. Leave a comment