I’ve been spending more and more time in front end web development with HTML5 recently (yes, you can expect a redesign of my blog here soon) an ,d thought I’d demystify some of the bits that I keep hearing out there.
First of all, HTML5 is not all brand new and completely different and going to revolutionize the world. It is an conglomeration of standards and an evolution of various parts of those standards. The reality is that it’s added 30ish new tags, some of which you’ll care about, some of which you won’t. Some of these tags are very powerful and some of very narrow in focus. For example, <canvas> is a very powerful tag that brings a drawing surface that’s going to allow some amazing interaction while <ruby> is a way to denote pronunciation guides for obscure characters in logographic alphabets such as Chinese and Japanese. While absolutely needed for the localization in those communities, it’s fairly limited in use.
But you’ll find that type of thing throughout the new tags – there’s a huge emphasis on localization and accessibility. For example, the new <nav>, <header>, <article>, <figcaption>, <aside> and more have nothing to do with the flashy animations and transitions that we are used to hearing about with regards to HTML5. Rather they are focused on accessibility and giving machines, including search engines, more intelligence about your site and content. This is a great help to screen readers such as JAWS but also is a step towards semantic web.
You can start using these features today with absolutely no worries because down level browsers will just simply ignore them. Now, if you site is heavily dependent on the most hyped tags, <canvas>, <audio> and <video>, you’ll have to figure out what your contingency is for non-HTML5 capable browsers. That could be using Silverlight or Flash or a completely different representation of the information in old school HTML4.
A very simple format for blog page (yes, I’m stealing this from the redesign that I’m doing on my site as we speak) is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="yourcss.css" />
<title>Getting Started with HTML5 - Josh Holmes</title>
</head>
<body>
<header>
<h1>Josh Holmes</h1>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/aboutme">About Josh</a></li>
<li><a href="http://twitter.com/joshholmes">twitter</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h2>Getting Started with HTML5</h2>
</hgroup>
<p>Main content</p>
<p class="image"><img src="html5logo.jpg" alt="HTML5 Logo" /></p>
</article>
<article>
<hgroup>
<h2>Some other post</h2>
</hgroup>
<p>Main content</p>
</article>
</section>
<footer>
Licenced under Creative Commons <br /> Updated: <time datetime="2011-01-06">June 1st, 2011</time>
</footer>
</body>
</html>
There’s a bunch of little things to notice here.
- Notice that it looks extremely similar to an HTML4 web site.
- Notice the short and simple doctype declaration – <!DOCTYPE html>.
- Notice the beautiful separation of the various sections into very human and machine readable content.
- Notice the <time> element that gives meaning and structure to the date.
In a nutshell, don’t be scared of HTML5. It’s an evolution of existing standards. You can use the structure that I listed above with little to no worries without having to figure out all the new stuff with <canvas>, <video>, brushes and the like or going nuts with JavaScript.
I’ll be blogging along about the JavaScript integration and the CSS improvements but I wanted to start with the very basics and point out some of the bits that really help with accessibility.