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)
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.
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:
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
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
Section is used as a content block within your document. It should only contain content that logically belongs together, this can include
. This tag is used to replace the common
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.
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
So this is an example of a very simple HTML5 page
This is my strapline
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.
Our shipping policy outlines everything you'll need to get your products straight to your door.
Footers can normal elements but contain no header,footer or sections.
Thanks to Nils Millahn from DN Digital Ltd.