HTML 5

HTML 5

HTML 5 is the latest version of the code we use to create web pages. Web browsers, like the one you're using now to read this, work in HTML. You can get web browsers to show other things - pictures, video, animations, music - but the way this is done is by writing HTML to display them on a page.

Some software may help you to create HTML, may even give you the impression that you haven't written any code - they do it by writing HTML for you; you can examine the HTML they write if you view the page in a browser, and then ask the browser to show you source. Don't expect a tool that writes code for you to write HTML 5 yet - they ought to, but keeping up with a specification may not be a priority for people who need to ship a tool, when the people who use it don't know enough to understand about it.

HTML 5 is more capable than previous versions, and is better for all the people who use a web site. I hope that you will want to write HTML 5 because of what it can do, because it gives a better experience, and because it works best in more browsers...

These pages are not the only or best pages about HTML 5 - there are many better and more detailed. My objective is to summarise a few key points - if I can give you a useful spin and a starter I will be happy!

Structure

Good web pages follow a clearly defined structure. HTML 5 allows us to use a richer structure than previous versions, but that means you need to know what it is...

I'm going to start with an informal chat about this structure, and I've drawn a mind map to show it. But we can also describe an HTML 5 document in a much more formal way, and that is a separate page (it's less frightening like that!).

HTML 5 mind map

An HTML page is written in tags, and the outermost tag is always <html>.

Inside the <html> tag there are other tags, but the next interesting one is the <body> tag. I've put it at the centre of the mind map. In a sense, the mind map is inside-out - what's in the middle holds the things that are further out - I'm sorry if that seems odd, but it makes sense in mind map terms, I think!

Under the html->body, I've put 'bare content': that's the content we used up until HTML 5 - the new things are all the other things on the mind map. Let's emphasise right now - you don't have to use the new things; if you don't need them, don't use them. I have a page about the 'bare content' which may be what you need right now.

Common elements

As the web has developed, designers have often put on pages:

These are new elements in html 5, so that browsers can recognise them, and present them appropriately.

New content organisation

As well as these, we now have two new ways to organise our main content - the stuff we want to get across:

It may come as a surprise that we didn't have these before; they seem obvious!

The thing about these is that they can hold pretty much everything that 'bare content' can. This includes everything listed, and especially this means that a section or an article should start, at least, with an <h1>; or with a <header> or <hgroup> (containing an <h1>).

As examples of what I mean, we might use sections to divide a long page into pieces about different aspects of the subject.

We might use articles for new items, blog entries or comments.

And we could use both on the page (even a section of articles containing comments).