HTML5 might be a new and emerging technology – heck, the specification isn’t even completely decided yet – but there are plenty of websites out there that are already taking advantage of HTML5 features, and have been for some time. I converted my personal site to be HTML5 compliant back in December 2009.

There are several HTML5 gallery sites currently knocking about (HTML5 Gallery and 101 Best HTML5 Sites to name just two). Here, I’m going to examine 10 HTML5 websites and briefly describe what new  features they are using. Some of these sites are favourites of mine, others have been included because of the new HTML5 features they take advantage of.

Before I do so, here’s a quick list of each of the new HTML5 features and elements that are used in the following sites:

1. Analog

Analog is a small web design company with an aesthetically pleasing website. This site uses the HTML5 doctype and the <header> element to define the header, which contains the Analog logo and the blurb at the top, contained in <h1> and <h2> elements respectively. It also makes use of the <section> element to enclose each separate section within the page. The <figure> element encloses the diagram halfway down the page, which fulfills the requirement for this element by not taking away any meaning from the document should it be removed.

The <footer> element contains the usual type of information found in a footer (copyright, contact information) but also contains a neat little gem: hold down the G key when viewing the Analog homepage and you’ll see a grid overlayed on the site, which beautifully illustrates how the designers laid out the page using the ‘rule of thirds’. A  nice little touch.

2. Google

You may be surprised to hear the Google website also uses HTML5. As with all HTML5 sites, it uses the doctype but it also takes advantage of the fact that, in a HTML5 document, you don’t need to specify the type attribute for <style> and <script> elements anymore, as they default to text/css and text/javascript respectively.

Google also make use of the <small> element which is used to indicate a side comment or something in small print. Here, Google use it to contain the ▼ character in the top navigation panel. Interestingly, Google doesn’t make use of the <footer> even though there is a <span> used for that purpose.

3. Kate Humble

The website of Kate Humble, wildlife TV presenter for the BBC, is also coded in HTML5. As well as using the doctype and taking advantage of the default values of the <style> and <script> elements, the site also has a very clean HTML5 structure layout.

The <header> is made up of the <hgroup> element which contains a <h1> and a <h2> to enclose separate headings. Within this is also the <nav> element that is used to enclose the navigation for the website. The <section> element is then used throughout the document to contain standalone sections. Some of these have natural headings which are contained within the <header> and some also make use of the <article> element to enclose separate articles within a <section>. Finally the <footer> is put to good use to contain links to all the charities that Kate supports.

Interestingly, this site is written in Wordpress which shows that there are HTML5 themes out there and being used already.

4. Creative Pony

Creative Pony has been included for it’s simple and yet wonderful usage of the <canvas> element  to animate the grass. The code on this page is short, and I love the site’s minimalist look. Other than the doctype, no HTML5 elements are used, and the <canvas> element is created through JavaScript. But it’s striking.

I won’t go into the code that draws and animates the grass, as it’s quite complicated and goes outside the scope of this blog. Suffice to say it’s a good example of how the <canvas> element can be deployed.

5. Font Dragr

I have included Font Dragr, which is web application for testing custom fonts, because it shows how HTML5 drag and drop can be put to great use. This application accepts fonts in TTF, OTF or SVG format, and only works in Firefox 3.6+so I suggest you load it up in that browser and get dragging!

Once you drag a font into the font window, the text to the right is automatically updated to use the typeface you dragged in. Not only does this application use the HTML5 drag and drop API, it also makes use of offline storage. This allows the application to run offline (you may have seen a box at the top of your window asking for permission to store stuff). It also stores the file API for accessing the font file that was “dragged and dropped”.

The contenteditable attribute is set to true so that the text to be tested can be edited – you can even cut and paste it! .

6. Steal This Footage

On first glance Steal This Footage may sound like an illegal video-sharing site and you may wonder why on Earth am I including it here. I assure you it’s completely legal and I’m including it because it makes wide use of video, and one of the formats it uses is HTML5. You need to browse the archive to get to the videos and choose one for it to play. The player features a fallback mechanism and enables the use of three players: the HTML5 video element, the Cortado Java applet and Flash. If your browser supports HTML5 video then this is the player that will be chosen; if not, the fallback options come to the rescue.

7. flek

The website of flek, a software and design company based in New York, is again clean, minimalist and coded in HTML5. The markup is clean, tidy and logical. It makes use of the doctype to indicate HTML5, and <header> and <nav> elements to define the heading and navigation (which in this case is a simple email link).

The content is tidily enclosed in <section> elements, which are displayed using JavaScript when the appropriate link is clicked. The document finishes with a <footer> element, which contains the copyright information and another email link.

8. Piotr Petrus

The personal website of Piotr Petrus, a front-end engineer and user interface designer from Poland, is another good example of a clean HTML5 layout married with tidy source code. In fact, the code on this type of site very useful for the beginner who is interested in seeing how a HTML5 site is laid out. The main <header> contains a <hgroup> element that contains the site title, amongst other things. Also note that the <header> has been given a unique id for styling purposes.

But the main reason I chose this site is because of it’s use of <section>, <article>, and <figure> elements in the portfolio, which truly show how these particular elements can be used within a HTML5 document. Each row is enclosed within a <section> element, which contains two portfolio entries, each of which is contained within an <article> element that comprises of a <header> for the title and link, a <figure> element that contains a screenshot image of the portfolio item followed by actual text content. There is also a <small> element used at the very end, telling spammers that they may not hear from him.

9. Colosseo Type

Colosseo Type is described as an artistic endeavour to reimagine the Colosseum in type. It’s a bizarre and fascinating project, but we’re more interested in the fact that the site is coded in HTML5 (sorry Cameron). My heart jumped when I first opened the page as there’s a video, but alas it doesn’t attempt to use the <video> element, rather an embedded Vimeo video. No matter, we shall soldier on as it has other HTML5 features.

Once again it is a fine example of a neat HTML5 structured document. It makes use of the <header> element to contain the logo and non-HTML5 video, and then proceeds to use the <article> element to enclose <section>s, <header>s, and <figures> where appropriate. It also rounds the document off with a <footer> element that contains copyright and contact information. Note that it differs from Piotr’s site above in that the <section> elements enclose the <article> ones, rather than the other way around. This is allowed as long as it semantically makes sense, which it does here.

10. Ian Devlin

Yes this is my own personal website and whilst I hesitated over whether to include it, I had no choice in the end as I was unable to find another site that makes use of a key HTML5 feature, which is the new input elements and attributes that can be used in forms.

The first <input> is a standard text one, but is uses the placeholder attribute which allows you to specify some placeholder text to automatically insert into the <input> field, and also the autofocus attribute which tells the browser to focus on this particular field on load. It also uses the <input type='email'> element which tells the browser that you’re seeking an email address.