I'd suggest reading the W3 wiki page about structuring HTML5:
<header>Used to contain the header content of a site.<footer>Contains the footer content of a site.<nav>Contains the navigation menu, or other navigation functionality for the page.
<article>Contains a standalone piece of content that would make
sense if syndicated as an RSS item, for example a news item.
<section>Used to either group different articles into different
purposes or subjects, or to define the different sections of a single article.
<aside>Defines a block of content that is related to the main content around it, but not central to the flow of it.
They include an image that I've cleaned up here:
In code, this looks like so:
<body> <header></header> <nav></nav> <section id="sidebar"></section> <section id="content"></section> <aside></aside> <footer></footer> </body>Let's explore some of the HTML5 elements in more detail.
<section>The
<section>element is for containing distinct different areas of functionality or subjects area, or breaking an article or story up into different sections. So in this case: "sidebar1" contains various useful links that will persist on every page of the site, such as "subscribe to RSS" and "Buy music from store". "main" contains the main content of this page, which is blog posts. On other pages of the site, this content will change. It is a fairly generic element, but still has way more semantic meaning than the plain old<div>.
<article>
<article>is related to<section>, but is distinctly different. Whereas<section>is for grouping distinct sections of content or functionality,<article>is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then<article>is suitable for marking them up. In our example,<section id="main">contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore<article>is perfect for them:<section id="main"> <article><!-- first blog post --></article> <article><!-- second blog post --></article> <article><!-- third blog post --></article> </section>Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:
<article> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> </article>
<header>and<footer>as we already mentioned above, the purpose of the
<header>and<footer>elements is to wrap header and footer content, respectively. In our particular example the<header>element contains a logo image, and the<footer>element contains a copyright notice, but you could add more elaborate content if you wished. Also note that you can have more than one header and footer on each page - as well as the top level header and footer we have just discussed, you could also have a<header>and<footer>element nested inside each<article>, in which case they would just apply to that particular article. Adding to our above example:<article> <header></header> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> <footer></footer> </article>
<nav>The
<nav>element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page. Other links, such as sponsored links, do not count. You can of course include headings and other structuring elements inside the<nav>, but it's not compulsory.
<aside>you may have noticed that we used an
<aside>element to markup the 2nd sidebar: the one containing latest gigs and contact details. This is perfectly appropriate, as<aside>is for marking up pieces of information that are related to the main flow, but don't fit in to it directly. And the main content in this case is all about the band! Other good choices for an<aside>would be information about the author of the blog post(s), a band biography, or a band discography with links to buy their albums.Where does that leave
<div>?So, with all these great new elements to use on our pages, the days of the humble
<div>are numbered, surely? NO. In fact, the<div>still has a perfectly valid use. You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes. A common example is using a<div>to wrap all of the content on the page, and then using CSS to centre all the content in the browser window, or apply a specific background image to the whole content.