Using HTML5 today

HTML5 is an odd mix of things that work right now, things that work in some browsers and the new cutting-edge techniques that won’t work until tomorrow (or the day after). Additionally, some of the elements have undergone a change in their semantic meaning.

When it comes to browser compatibility, which all webdesigners should have in mind, you can think of HTML5’s features as divided into three main categories:

• Features that already work. This is features that are very well supported but wasn’t a part of the old official HTML. This also includes the semantic elements we will look at in later chapters, such as the article elements, the aside element, the nav element and so forth.
• Features that degrade gracefully. The new <video> element degrades gracefully, as it has a fallback mechanism that lets you supply your video to older browsers and then the older browsers can use a flash-based videoplayer to play your video. This also includes some of the new form-features such as autofocus (as autofocus doesn’t change your webpage it is mostly a nice little detail) or some of the fancy new CSS3 properties such as rounded corners. Older browser will simply ignore these features but it does not affect the functionality of your webpage. Think of these features as the fancy sprinkles on a cupcake – they’re pretty and fun but do not affect the actual cupcake.
• Features that require a JavaScript workaround. A lot of HTL5’s new features are inspired by things that webdevelopers already do using JavaScript– such as for validation. This means that there is a lot of JavaScript examples of how you could do these things and you need to use the JavaScript as a fallback as some browser does not support these things if you decide that it is essential to your webpage.