HTML 5 has been causing a storm over the last year or so and looks set to continue, as it tries to revolutionise the way that we code for the web.

So what is HTML5? Well, it includes:

• new tags that take semantic mark-up to the next level
• new form handling capabilities
• new media playback capabilities (video and audio)
• new JavaScript goodies

The good news for HTML5 is that all major browser manufacturers have started implementing it. A large part of the specifications has already been implemented and is available for use right now (generally there is more support in the latest releases).

And Internet Explorer…..well although a little behind the times, support is due to be in full for the release of IE9 which is due sometime in early 2011 which is great, but of course there will still be those users who are still using IE8, 7 and 6 for a long time after IE9 is release. The matter is compounded by the fact that IE9 will require Windows Vista or above to run – there is no support for Windows XP.

Luckily, Internet Explorer versions from IE6 onwards can easily be made to recognize new HTML5 tags with the help of a little JavaScript.

So in practice using the new HTML5 markup rules is very much a possibility for commercial web design right now, but using more advanced form handling features and JavaScript extensions however will still require an alternative browser and remains restricted to platform specific development or to specific user groups.

Getting started with HTML5

To start with, when building a webpage, you write the doctype of your page. When was the last time you wrote one of those off the top of your head? Generally, we copy and paste it.

Well HTML5 introduces a new doctype that’s a lot simpler:

This doctype will trigger standards compliance mode in every browsers from IE6 upwards.

The new tags

The new tags are based on semantics. The introduction of the new tags is there in order to provide highly semantic markup of your HTML document. So the governing bodies of HTML5 assessed a variety of websites, looking at how their html was structured and picked up on some basic principles which were commonly applied.

For example, typically developers name certain sections of their site in a standard way.

These can now be written using HTML5 as:

This is the header

Where should you use the

tag? Typically where you would normally use the div

. Also this tag can be used where you have a header as part of a section (explained futher down). The header tag cannot contain other sections, so if you have a complicated header, then use the

tag instead and use the

tag for perhaps just the logo and H1.

In addition to the

tag, there is also a

tag. This tag would contain header tags which semantically belong together. An example is a

followed by a

.

can also be placed within a

tag.

Would typically include a collection of major navigation elements.

Similar to the

,

denotes the footer of the entire document or of a section. They can’t contain sections; so if you have a complicated footer, use the

tag instead.

Section is used as a content block within your document. It should only contain content that logically belongs together, this can include

, other sections and . This tag is used to replace the common

tag.

Article is to wrap around content, which is taken from an external source. An example would be a list of recent blog entries, or perhaps a list of special offers from other websites.

This tag is used for content, which stands separate from the documents main content, but is still marginally related.

and
This would contain content that provides explanation or clarification of the documents actual content, but who’s positioning of the explanation is not relevant. For example a diagram which provides a visual explanation of a piece of text. This can be positioned at the beginning, in the middle or at the end and would still make sense.

The figcaption tag provides a caption for the figure. If used it must be the first of last child tag.

This is my section title

This is my body copy

This is a summary of text

And how CSS would fit into this...

With all these new tags you can still apply classes as you would usually so you can style them as required:

….

This would be written in your .css file as

section.feature { font-size: 1em; }

So this is an example of a very simple HTML5 page

This is my strapline

• Home
• About us

The new section tag can have headers like the rest of the page.

Sections contain normal content.

Get 25% discount

A wonderful offer i think you'll agree, available to all users.

Read More

Free shipping

Our shipping policy outlines everything you'll need to get your products straight to your door.

Read More

Footers can normal elements but contain no header,footer or sections.

……………………………………………………………………

Thanks to Nils Millahn from DN Digital Ltd.