used to begin a section, usually containing an h1 tag and perhaps navigation.
Contains navigation links and assorted associated items.
This element contains items typically found at the bottom of a web page - copyright, legal notices, authorship. A page can have multiple "footer" elements. "footer" elements can appear anywhere on a page, sometimes at the top.
An "article" is a self-contained composition that can be removed from the page and will make sense in a stand-alone fashion.
A "section" is not self-contained and would not make sense by itself. <section>s are typically found inside of <article>s. A <section> can have its own "h1" tags.
A component, typically shown as a note on the side of an article, not critical to understanding the content.
A page may have multiple instances of all these elements and they can be nested inside each other.
Common Structural Composition for a Page
<section> A<section> B<article> 2
<section> A<section> B
Reasons To Use The New Tags
Instead of <div id="bottom">, which doesn't give any clue about what is in the <div> tag, <footer> now gives search engines some hints.
Infinite Heading Levels
In HTML4 we had <h1> to <h6>. With the new HTML5 stuctural tags we can go to <h11> by nesting <h1> tags inside <section>'s, nested inside <section>'s, inside <article>'s.
Cleaner Composition Of Content
If a page was aggreagated of sections of HTML4 content with embedded <h2> and <h3>'s, then embedding content with a <h1> would be awkward. With all the heading safely inside <section>, or <article>, the browser can outline the aggregated content and apply the correct styling.
<h1 id="Boadicea">Boadicea: An Ode</h1>
Then the progeny that springs <br>
<span class="indent2">From the forests of our land, </span><br>
Armed with thunder, clad with wings, <br>
<span class="indent2">Shall a wider world command. </span><br>
Regions Ceasar never knew <br>
<span class="indent2">Thy posterity shall sway, </span><br>
Where his eagles never flew, <br>
<span class="indent2">None invincible as they.</span><br>
by William Cowper (1731-1800)
Inscribed on a statue of Queen Boadicea sculpted by Thomas Thornycroft between 1856 and 1885 near the Westminster B ridge, on the north bank of the River Thames in London.
Yes, yes..., but what about IE?
One of the problems with these new tags is styling them with css in older IE browsers. To style these in IE we need to do two things. First, tell IE that the default is not "inline", but "block" in our css.
Secondly we need to tell IE versions before 9 that these are real, stylable elements. It's just a fortunate quirk of the older IEs, but if we just create the tags, then IE is happy to style them. We could do this,
For example, <small> used to mean "render the enclosed text in a smaller font", now it means the enclosed text should have the meaning of being in small print, like copyright and EULA. The actual downsizing should be done in CSS. Search engines can now "down vote" content in <small>.