Despite the fact that the HTML5 specification is incomplete, not to mention very complex, there is nothing keeping you from using HTML5 right now. It’s already well supported in Firefox, Safari, Chrome, and Opera, and with a bit of JavaScript, you can support Internet Explorer as well.
The quickest and easiest way to create an HTML5 compliant website is by changing your doctype. The HTML5 doctype is simple and easy to remember:
<!DOCTYPE html>
This new doctype is compatible with older browsers and it won’t break your existing markup. You’ll be able to continue writing HTML the same as you have in the past, however, your pages will now validate as HTML5.
With the new doctype now in place, you can start using some of the new elements available in HTML5. There are a handful of new structural elements available, which are header, footer, nav, section, article, aside, and hgroup. If you wish to use these new elements, you’ll need to add the following code to your stylesheet.
article, aside, footer, header, hgroup, nav, section{ display: block; }
This will ensure that the structural elements force a line break, and essentially, make them behave as a div so that you can start adding additional styles. If you’re not ready to start using these new structural elements, you can start giving your div elements a class name of header, footer, etc. (which you might already be doing to some extent). This will make it easier to update your markup with the new elements in the future.
Keep in mind that the CSS code above won’t get you anywhere with Internet Explorer. If you’re ready to use the new structural elements and your website supports any version of Internet Explorer, you’ll need a bit of JavaScript to help you out. You could write some JavaScript for each element as simple as this:
document.createElement(‘header’);
Or, you could use this handy HTML5 enabling script written by Remy Sharp. Just be sure to wrap whatever JavaScript method you decide to use in an IE conditional comment.
Web forms are another good area where you can start using some HTML5. There are some new input types available to you, such as search, email, url and tel. Browsers that don’t yet support these input types will just interpret the input type as text. However, in Mobile Safari, the keyboard will change depending on the input type, which is a nice little feature. Your users may not realize it, but they’ll appreciate it.
In addition to the new structural and form elements, there are some new elements that are specific to multimedia: canvas, audio, and video. These elements are promising because they eliminate the need for a browser plug-in. Although current browser support for them is still a bit unstable, sites like YouTube and Vimeo have begun experimenting with the video element to serve as an alternate to Flash. You can use these elements yourself, but just be aware that browser support is not fully there yet. There is, however, a JavaScript library called Modernizr that detects support for these elements and will provide alternate content if necessary.
Additional Resources
There is so much more to HTML5 that I didn’t get into, so I’d encourage you to check out some of the many resources available. Dive Into HTML5 is a great site with some quality information. Also, check out the book HTML5 For Web Designers by Jeremy Keith. Its clear and concise tone makes it an excellent resource.
And while it’s probably not safe or practical to fully utilize every aspect of HTML5 for traditional websites, there are some exciting things being done to show off the power and capability of HTML5. Here are some examples of HTML5 being pushed to its limit and beyond.
- Bespin
Bespin is a web-based code editor from Mozilla Labs which was built using the canvas element. - 20 Things I Learned About Browsers and the Web
20 Things is a resource from Google and utilizes the new structural elements, as well as the canvas element. - BioLab Disaster
BioLab Disaster is a pretty cool game built using the canvas and audio elements. - HTML5 Experiments by Hakim El Hattab
Hakim El Hattab has done some pretty cool things with the canvas element. The Keylight experiment is probably my favorite.
So, are you using HTML5 yet? If so, how? Do you know of any other awesome HTML5 experiments? Please share in the comments, I’d love to know
Share Article
4 comments