Add a little HTML5 to your websites

CSS & HTML, 16 February 2009, 2 minute read

It will be a while before we can start using real HTML5, but because HTML5 is as much about defining current behaviour as it is about adding new, there is already a very large part available to us today. Here are the parts you can use today.

Why? #

HTML5 is arriving sooner rather than later. The 2022 date means that it’s fully supported, finished, done. It doesn’t mean we can’t use it. For example, CSS2.1, from 1998, still isn’t fully supported, finished, done, either. We all use that as well, right?

A lot of the HTML5 supported today are actually browser quirks, formalised. It’s usable right now, will get you acquainted with HTML5 and will basically make your front-end life easier :) (And it all works in Internet Explorer too!)

There is much, much more to HTML5 than visible in this article. This article only focusses on what you can use now. If you want more info on HTML5, check the specifications, or the whatwg blog.

<!doctype html>

The simplified doctype is ierhaps the most iconic idea in HTML5. It turns out, the above code is all that’s needed to trigger standards mode. The validator understands it as well. Quite a change from the humongous HTML4 or XHTML doctype declarations, no?

<meta charset="utf-8">

This works the same as the doctype. You don’t need anything more than this to make your browser set a charset. It turned out that people so often mistype this attribute, (content="text/html; charset=utf-8"), that browser parsers actually encountered charset=utf-8 more than the whole content attribute. Since it’s legal to omit the quotes, charset is being parsed as an attribute in all browsers. And it’s legal in HTML5.

<script>
 //your javascript
</script>

<style>
 // your css
</style>

You no longer have to declare the type attribute with text/javascript or text/css. All browsers already act as if anything inside those tags is javascript or CSS.

Getting used to new structural elements #

HTML5 introduces a bunch of new elements that allow you to better describe your document:

<header>
<footer>
<nav>
<section>
<article>
<aside>

These are not all the new elements, but they are the ones that are going to replace the numerous divs used today. While you can use them already, I consider it a bit tricky in-production (it’s dependent on javascript). Instead of using the elements however, it’s a smart thing to start using these names as classes for the divs you currently use. When the time comes, it’s easy to just switch over to these elements.

Soon we’ll be living in the future! #

When you start using HTML5 like in the examples above, you have the benefit of acquainting yourself with HTML5, still make websites that work today and more importantly, make sure your websites will still work for a long time to come!

Kilian Valkhof

Building tools that make developers awesome.