HTML5 is quite the buzzword at the minute. A lot of designers and front-end developers will now say “I use HTML5 and CSS3” rather than just good olde “HTML and CSS” (I’m one of them, depending on the context).
At some point the HTML5 fad will die and we’ll go back to saying HTML (did you ever say you used HTML 4.01?) but until then we’ll throw the HTML5 buzz word around a bit more.
But what does it actually mean to say you use HTML5?
I see HTML5 being broken down into 5 different levels.
1. Doctype
Technically if you use an HTML5 doctype declaration, you’re using HTML5.
Along with your doctype you can tidy up the rest of your head like so.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
...
This is simple stuff, and you usually have this saved in some sort of template.
2. Forms
The next level of HTML5 is adding some niceness to forms.
Validation, place holders, calendars, input types can all be declared with HTML5 and in most cases all that is needed is dropping in an extra attribute to your already existent XHTML forms.
<input type="search" id="keywords" name="keywords" placeholder="Search our site" autofocus>
3. Layout and elements
We get a bit more advanced now with layout. HTML5 has introduced several new block elements for marking up your layout including header, footer, article, aside, section, figure.
<header>
<h1>Heading goes here</h1>
</header>
<article>
<section>
<h2>Something in here</h2>
</section>
<section>
<h2>Something else in here</h2>
</section>
</article>
<aside>
<p>Something to accompany your article here</p>
</aside>
<footer>
<p>Copyright 2011</p>
</footer>
For these new block elements to work across all browsers, make sure you declare them as block level elements and use the HTML shiv script for IE compatibility.
Include this in your head:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
And this in your stylesheet:
header,footer,nav,article,aside,section,figure,figcaption,hgroup,audio,video{
display:block;
}
4. Video and audio
There’s a good chance most of you have looked at levels 1 to 3 as most projects require markup, layouts and forms but not all require video and audio.
No longer do you need to embed video and audio into Flash. They now have their own elements and controls you can customise in HTML5.
<video src="video.mp4" controls width="640" height="360" poster="video.jpg"></video>
5. Advanced features and Javascript
I’ve called level 5 advanced features as we’re now diving into Javascript.
Most of the blog articles and books I’ve read on HTML5 cover the 4 levels above but brush over these advanced features, most likely because they deserve full books dedicated to the topic and are more developer than designer related.
These features include:
- Canvas
- Local/offline storage
- Geolocation
How much HTML5 are you using?
To date I’ve only been using levels 1 to 3 myself. I’ve yet to have an excuse or reason to delve any further.
Are you using HTML5? Have you looked at any of the advanced HTML5 features mentioned above?
Further reading
- Dive into HTML5 by Mark Pilgrim
- HTML5 doctor
- Hard Boiled Web Design by Andy Clarke
- HTML5 for Web Designers by Jeremy Keith
Receive more design content like this to your inbox
I promise not to spam you. No more than one email per week.