Chapter 6. Using Html5 Today
IF YOU WANT TO START using HTML5 today, there’s nothing stopping you. Modern browsers have great support for the new elements we have looked at in this book. Even really old browsers will allow you to style the new elements. It’s not that browsers actively support these elements, it’s just that most browsers allow you to use and style any element you care to invent.
CHOOSE YOUR STRATEGY
As explained at the start of this book, using HTML5 today is a case of determining available browser support for the parts of HTML that you want to use. Browser statistics can tell you whether you can simply use the desired HTML5 feature, or whether you need to use it along with a polyfill or other fallback method.
If you have a site that currently has an HTML4 or XHTML doctype, then you only need to switch to the simpler doctype to start using HTML5.
<!DOCTYPE html>
Ta-da! You are now using HTML5.
NEW SEMANTIC ELEMENTS
For new sites, there is no reason not to use the new semantic elements described in this book. But to ensure your layout works well in very old browsers, there are a few things you might want to note.
Browsers released before the advent of these new elements won’t apply any default styling to them. So, at the very least, you will want to declare that the new structural elements should force a line break:
section, article, header, footer, nav, aside, hgroup {
display: block;
}
That’s enough for most browsers. Internet Explorer 8 (and below) has special needs: it resolutely refuses to recognize the new elements unless an exemplar of each element is first created with JavaScript, like this:
document.createElement('section');
JavaScript genius Remy Sharp has written a handy little script that generates all of the new HTML5 elements. Load this script within a conditional comment so that it’s only served up to the needy Internet Explorer:
<!--[if lte IE 8]>
<script src= »
"http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
Now you can style the new elements to your heart’s content.
If you are particularly plagued by old browsers, then there is an article on HTML5 Doctor detailing this fix and other issues (http://bkaprt.com/html52e/06-01/). However, most people should be able to add the script without worrying too much about IE8 and below.
Feature detection
A good method of dealing with older and non-supporting browsers is to use feature detection. Rather than doing something—or not doing something—in a specific named browser, feature detection tells you if the feature is supported. If yes, you use it; if not, you do something else.
Modernizr is a useful JavaScript file that will detect
support for input types as well as audio, video, and canvas (modernizr.com).
The script creates an object in JavaScript called Modernizr. By querying the properties of this object, you can determine whether the browser supports a particular aspect of HTML or not:
if (!Modernizr.inputtypes.color) {
// JavaScript fallback goes here.
}
Modernizr will also perform the sleight of hand that allows you to style the new structural elements in Internet Explorer—so if you use Modernizr, you don’t need to use Remy’s script as well.
Feature detection makes even more sense as we move into an era where browsers are becoming evergreen (http://bkaprt.com/html52e/06-02/), a term used to describe a browser that updates itself on startup rather than forcing the user to download and install a new version. Take advantage of certain features now, and detect and offer alternatives where they are not available; over time, more and more of your users will find their browsers have updated—with added support for those features.
HTML5 structure and headings
Browsers haven’t yet begun to support HTML5’s new outline algorithm, and as of writing there is little indication that they will. You can still start using the extra heading levels available to you; however, you should not rely on the outline to convey the structure of your document. For the time being, you probably should continue to use heading levels as before, with an h1 element as the main heading of your document and subheadings ranked according to their weight.
The current W3C Editor’s Draft of the specification (as of March 25, 2015) contains the following warning:
There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure (http://bkaprt.com/html52e/06-03/).
You can refer to your document outline to double-check that it makes sense—that sections have headings and so on. Geoffrey Sneddon has written a handy online tool that will generate an outline as specified in HTML5 (http://bkaprt.com/html52e/06-04/).
Fortunately, the HTML5 outline algorithm is pretty flexible. If you want to use heading levels the old-fashioned way, that won’t affect the outline at all.
Responsive images
Many designers will be keen to implement responsive images. At the time of writing, browser support is increasing, with support available for both picture and srcset elements in up-to-date versions of Opera, Firefox, and Chrome.
As discussed earlier, if a browser does not support picture or srcset, it will load the fallback img element anyway—so using these elements is appropriate, as long as care is taken with selecting a good fallback image.
Filament Group has also developed a picturefill polyfill (http://bkaprt.com/html52e/06-05/), which adds support using JavaScript to non-supporting browsers.
If developing a new, image-rich site today, don’t hesitate to start using picture and srcset. Support is coming into browsers, and, over time, more of your visitors will benefit from the work you have put in.
HTML5 INPUT ELEMENTS
The new input elements—such as email, number, date, or even color—are already usable in many browsers. Since they fall back to a plain-text input field in non-supporting browsers, you can use them along with instructions for how the input should be formatted, or use a JavaScript widget if you detect there is no support.
Check CanIUse.com for the input type you are planning to use; it can tell you, for example, that the color input type is currently supported in Opera, Chrome, and Firefox (http://bkaprt.com/html52e/06-06/).
ARIA
The new structural elements in HTML5 will be very useful to assistive technology. Instead of creating “skip navigation” links for screen readers, all we need to do is use the nav element correctly.
That’s the plan, anyway. For now, we must make do with the technologies that browsers and screen readers support today.
Luckily for us, there is currently excellent support for Accessible Rich Internet Applications, or ARIA (http://bkaprt.com/html52e/06-07/).
At its most advanced, ARIA allows assistive technology to participate fully in all-singing, all-dancing Ajax interactions. At its simplest, ARIA allows us to specify even more semantic richness in our documents.
In fact, just by using the HTML5 semantic elements—header, footer, article, and so on—you are taking advantage of ARIA. These elements are mapped to ARIA semantics; for example, a header that is not a descendent of a section or article element is given role="banner". In addition, you can specify ARIA information using the role attribute; for example, adding role="alert" to an element declares that the element contains “a message with important, and usually time-sensitive, information.” (http://bkaprt.com/html52e/06-08/)
You can also use these role values in HTML 4.01, XHTML 1.0, or any other flavor of markup, but then your document will no longer validate—unless you create a custom doctype, which is a world of pain. But ARIA roles are part of the HTML5 specification, so you can have your ARIA cake and validate it, too.
VALIDATION
Used wisely, a validator is a very powerful tool for a web designer. Used unwisely, a validator provides smug nerds with an easy way of pointing and laughing at other people’s markup. Validation ensures that you haven’t made any mistakes in your markup that might cause problems with your CSS or JavaScript, or lead to issues for users in a browser you haven't tested. Knowing you are working with valid HTML removes one potential source of problems.
Henri Sivonen has created a full-featured HTML5 validator at validator.nu.
You don’t even need to update your bookmarks pointing to the W3C validator (http://bkaprt.com/html52e/06-09/). That, too, uses Henri’s parser as soon as it detects the HTML5 doctype.
GET INVOLVED
As you embark on your adventure in HTML5, you may find parts of the specification confusing. That’s okay. In fact, it’s more than okay; it’s very valuable feedback.
There are some very smart people working on HTML5, but web designers are under-represented. Your perspective would be greatly appreciated.
You could join the HTML Working Group at the W3C as a “public invited expert” (ignore the Kafkaesque language of an invitation you need to issue to yourself)—but we wouldn’t recommend it. The associated mailing list has a very high volume of traffic, most of it related to politics and procedure.
The WHATWG mailing list is the place to go if you actually want to discuss the HTML5 specification: http://bkaprt.com/html52e/06-10/.
There’s also an IRC channel. Sometimes you want to go where everybody knows your handle: http://bkaprt.com/html52e/06-11/. Don’t be shy. The IRC channel is a great place to ask questions and get answers from Ian Hickson, Anne van Kesteren, Lachlan Hunt, and other WHATWG members.
THE FUTURE
We hope this little sashay ’round HTML5 has encouraged you to start exploring this very exciting technology. We also hope you will bring the fruits of your exploration back to the WHATWG.
HTML is the most important tool a web designer can wield. Without markup, the web wouldn’t exist. It is remarkable and wonderful that anybody can contribute to the evolution of this most vital of technologies. Every time you create a website, you are contributing to the shared cultural heritage of the human race. In choosing HTML5, you are also contributing to the future.