Hi! I’m Kevin Bryan, a digital creative with over 10 years web experience

I have been asked by numerous people recently about my thoughts on HTML 5. This, along with a need for a blog section on my site, has inspired me to convert it into HTML 5. This post details the build and also gives you an introduction into the new mark-up.

Intro

HTML 4 has been around since December 1997 and has served us fairly well in that period. However there always comes a need for evolution...

One of the main problems with HTML 4 is its undefined syntax lacks the tags needed to describe the structure of a standard webpage e.g. header, nav, content, footer. Fortunately with the introduction of HTML 5 many of these problems have been solved.

HTML 5 is being created in collaboration between W3C HTML WG and the WHATWG and its specification is still a work in progress. This specification has introduced a plethora of new tags, some of which will assist in developing standards-based, semantic mark-up and others that will bring around some cool new features (canvas I’m looking at you!).

Although not brand new, HTML 5 is quickly picking up steam and in recent months there have been some major web applications that utilise some of HTML 5 new features, most notably the canvas element within Google wave.

New HTML 5 Elements

HTML 5 is in its infancy and there are new tags being suggested everyday. Here is a short summary of some of the elements I have used whilst developing this blog:

<section>

A section element represents a grouping of distinct content on a page, frequently preceded with a header and possibly ending with a footer.

Usage on this site:

The section element wraps this centre content section

<article>

The article element represents an independent section of a page. This can be used for a blog, forum post, magazine, newspaper article etc.

Usage on this site:

The article element wraps this article post which contains a header and footer.

<nav>

The nav element represents the navigation area, typically containing a list of navigation links either to other pages, or fragment identifiers in the current page.

Usage on this site:

The nav element contains the main navigation list at the top of this page.

<aside>

The aside element represents a section of a page that consists of content that is tangentially related to, but separate, from the content around it. This is typically used for sidebars and pull quotes.

Usage on this site:

The aside element wraps the “about the author” and “categories” sections on the left hand side.

<header>

The header element represents the heading of a page or section (this should not be confused with the traditional master head). Typically containing one of the <h> tags it can also contain information about the section.

Usage on this site:

The header element contains the main h1 title of this page, its also used to wrap the main title, date and related tags for each blog article.

<footer>

The footer element represents the footer for a section or page it is associated with. Commonly used to contain who wrote it, copyright information, and related links and so on. This should not contain elements such as section, article or <h> tags

Usage on this site:

The footer element contains the contact information at the bottom of the site and also the related links within each blog article.

<figure>

The figure element represents some flow content, optionally with a caption. Commonly used to annotate photos, images, diagrams, etc, it can also contain a legend to display a related caption.

Usage on this site:

The figure element contains the img and legend tags within a blog article.

<time>

The time element represents a precise date and/or time in history. This element must include the datetime attribute with a valid date or time string.

Usage on this site:

The time element contains the creation date of each blog article.

Setting it all up

With a few simple steps (and hacks for IE) you can actually start developing in HTML 5 today. So let’s jump straight in. The first thing that will pleasantly surprise you about the HTML 5 syntax is the simplicity of the new DOCTYPE that has been shortened considerably:

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5:

<!DOCTYPE html>

Using this will work fine in all current browsers, rendering the page in standards mode (meaning there will be no quirks mode anymore). The next area that benefits from the new simplicity is the character encoding:

Current UTF encoding:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML 5 UTF encoding:

<meta charset="UTF-8">

However you need to remember that this declaration must now be the first child of the head element.

Final HTML 5 Mark-up

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

The next things we need to tackle are the new tags that are currently unknown by browsers. Thankfully due to the flexible nature of modern browsers they deal with them fairly well. All we need to do is to add display:block; (as they are initially rendered as inline) to all the new structural HTML 5 elements. Also don’t forget to add these to your reset CSS where applicable. You are now good to go.

But wait, IE isn’t rendering the new elements?

Unlike other major browsers, IE cannot apply CSS to elements it doesn’t understand. Therefore we need to conjure some JavaScript magic (Sjoerd Visscher is credited with this technique) to create them:

document.createtag('header');
document.createtag('footer');
document.createtag('section');
document.createtag('aside');
document.createtag('nav');
document.createtag('article'); 
document.createtag('figure');
document.createtag('time');

On a previous website project I had a little time on my hands so I decided to use it as a type of test bed for HTML 5 and the new IE8.js which in effect turns IE6/7 into IE8.

I normally try to include as little JS as possible, but because HTML 5 has many different tags to hook styles onto I thought it would be nice to build the site without any class names. That was my challenge. Everything was going very well until I added a more complex CSS3 selector which was along the lines of:

section > article li:last-child a

IE6 did not like this at all. However, when I added a class name instead of targeting the new HTML 5 element it was fine. So maybe it was just down to the IE8.JS?

The Mark-up

Below is a diagram illustrating the final structure of this blog:

Fig 1: This is the final structure of this page

Rather than starting afresh I decided that I would use the majority of the CSS and mark-up from my XHTML 1.0 strict site (converting the traditional elements into HTML 5). However, this posed a little problem as it initially seemed that my nav element would reside within the header element:

Fig 2: My first atempt at the structure was slightly incorect

However, after conducting further research, it appears that the nav element should be a sibling of the header. I was also incorrectly using the site's masterhead as a header element. Because section id=”bar” contains the main h1 title of the page it seemed logical to name this as the header (even though it appears after the nav element).

Apart from this mistake the remaining elements of the site were fairly easy to identify. Some people have suggested adding a section between the header and footer within the article element; however I believe this is unnecessary as it bloats the code.

Validators

Although some people think that HTML 5 validators are currently worthless, I disagree. Firstly, they have really helped me understand the correct structure of HTML 5 and secondly, they catch any errors I may have made within the syntax (I initially left the datetime attribute off the time element). Currently this is regarded as the best HTML 5 validator: http://html5.validator.nu/

Conclusion

I have really enjoyed playing with the new elements within HTML 5 and I believe that there will be some exciting developments in the coming years.

From a coding point of view I have found many advantages in using the new HTML 5 syntax. Most things have been simplified (for example <script type="text/javascript"> now becomes <script>). This allows for faster production of mark-up which in-turn will be easier to author.

However, the thing that I found most pleasing was the amount of hooks that you are presented with through the introduction of the new elements (without the need of presentational classes). For instance, most of the time you need a hook to style your site's navigation (unless you are using advanced CSS3) This is now taken care of by the nav element. This is also extremely useful when targeting <h> tags.

From an accessibility point of view HTML 5 offers endless meaningful element names - hopefully making it easier for screen readers to navigate through a site. This can also be said for search engines that could target nav elements for site links and article elements for content.

Even though there are many advantages in using HTML 5 now, it won’t be ready for several years. Therefore, I have decided to adopt a less bloated version of naming conventions (covered by Jon Tan) whilst maintaining my XHTML 1.0 strict DOCTYPE. This technique basically converts HTML 5 elements into class names, for example:

<footer>

becomes:

<div class=”footer”>

In my next blog post I will be looking into some of the cooler new elements such as canvas and video.