HTML5 evolved from the Web Applications 1.0 project, started by the Web Hypertext Application Technology Working Group (WHATWG ) before being later embraced by the W3C. Subsequently, large parts of the specification are weighted towards dealing with web applications. If you're not building web applications, that doesn't mean there aren't plenty of things in HTML5 you could (and indeed should) embrace when embarking on a responsive design. So, whilst some features of HTML5 are directly relevant to building better responsive web pages (for example, leaner code), others are outside our responsive remit.
HTML5 also provides specific tools for handling forms and user input. This set of features takes much of the burden away from more resource heavy technologies like JavaScript for things like form validation. However, we're going to look at HTML5 forms separately in Chapter 8, Conquer Forms with HTML5 and CSS3.
In this chapter, we will cover the following:
- What parts of HTML5 can we use right now?
- How to write HTML5 pages
- The economies of using HTML5
- Obsolete HTML features
- New semantic HTML5 elements
- Using Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) for increased semantics and aiding assistive technologies
- Embedding media
- Responsive HTML5 and iFrame videos
- Making a website available offline
Although the full specification of HTML5 is yet to be ratified, most new features of HTML5 are already supported, to varying degrees, by modern web browsers including Apple's Safari, Google Chrome, Opera, and Mozilla Firefox and even Internet Explorer 9! So, whilst it's improbable everything in the current draft of the HTML5 specification will survive until recommendation by the W3C, there are plenty of new features that can be implemented right now.
Currently, if I'm tasked to build a website, my default markup would be HTML5 rather than HTML 4.01. Where the opposite was the case only a few years ago, at present, there has to be a compelling reason not to markup a site in HTML5. All modern browsers understand common HTML5 features with no problems (the new structural elements, video and audio tags) and older versions of IE can be served polyfills to address all of the shortfalls I have encountered.
Note
What are polyfills ?
The term polyfill was originated by Remy Sharp as an allusion to filling the cracks in older browsers with Polyfilla (known as Spackling Paste in the US). Therefore, a polyfill is a JavaScript shim that effectively replicates newer features in older browsers. However, it's important to appreciate that polyfills add extra flab to your code. Therefore, just because you can add three polyfill scripts to make Internet Explorer 6 render your site the same as every other browser doesn't mean you necessarily should!
Ordinarily, older versions of Internet Explorer (pre v9) have no understanding of any of the new semantic elements of HTML5. However, some time ago, Sjoerd Visscher discovered that if elements are created with JavaScript first, Internet Explorer is able to recognize and style them accordingly. Armed with this knowledge, JavaScript whiz Remy Sharp created a lightweight enabling script (http://remysharp.com/2009/01/07/html5-enabling-script/) that, if included in an HTML5 page, magically switched these elements on for older versions of Internet Explorer. For a long time, pioneers of HTML5 would stick this script in their markup to enable users viewing in Internet Explorer 6, 7, and 8 to enjoy a comparable experience.
However, things have now progressed significantly. There's now a new kid on the block that does all this and a whole lot more. Its name is Modernizr (http://www.modernizr.com) and if you're writing pages in HTML5, it's well worth your attention. Besides enabling HTML5 structural elements for IE, it also provides the ability to conditionally load further polyfills, CSS files, and additional JavaScript files based on a number of feature tests.
So, as there are few good reasons for not using HTML5, let's get going and start writing some markup, HTML5 style.
Tip
Want a shortcut to great HTML5 code? Consider the HTML5 Boilerplate
If time is short and you need a good starting point for your project, consider using the HTML5 Boilerplate (http://html5boilerplate.com/). It's a pre-made "best practice" HTML5 file, including essential styles (such as the aforementioned normalize.css), polyfills, and tools such as Modernizr. It also includes a build tool that automatically concatenates CSS and JS files and strips comments to create production ready code. Highly recommended!