HTML5 - Explained. Briefly

After reading the aforementioned HTML5 & CSS3 for the Real World book, I have come to realise that there are loads of changes included with HTML5. I have the book in front of me for me to reference, but I find it laborious to keep opening it to check on the semantic meaning behind <small> or <section> elements.

So this post is not ground breaking, its not amazing. Its just a summary of changes to the HTML spec in English I understand and can refer back to. Its also to pass to my back end developer so he knows what's what. [I'm also posting it incomplete - post a comment if you have an additions/suggestions].

Before you can use any of these elements - you should really use the HTML5 Shiv - found in  my basic HTML5 Template.

If you get stuck - HTML5 Doctor created this amazing flowchart

<header>, <nav> & <footer> are all self explanatory

<section> - This is content which is related to one another. I.e. a 'section' of quotes, sections of a tabbed interface.

<article> - Should be a self contained piece of content

<aside> - Should be something that is tangible to the content, or something like a sidebar or ad space. It should not contain main content.

<h1> - These can appear more than once on a page and should be within context of where it is. I.e. you should be able to remove the parent and everything to still be correctly titled. Each <article> should have one.

<figure> & <figcaption> - perfect for an image and caption. Would be marked up like:

    <figcaption> An image</figcaption>
    <img src="" alt="">

<b> - can be used to make something bold, without it being significant - e.g. showing a change in a lump of code

<i> - for use in the case that you want italics, but not for emphasis - e.g. "Hello" he said

<small> can still be used to show text that is smaller, than the rest - e.g. <small>Copyright Mike Street</small>

<a> - can now be around block elements!

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.