Let's look at some practical examples of these new elements. I think the <header>, <nav>, and <footer> elements are pretty self explanatory so for starters, let's take the current And the winner isn't... home page markup and amend the header, navigation, and footer areas (see highlighted areas in the following code snippet):
<!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>And the winner isn't…</title> <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script> <link href="css/main.css" rel="stylesheet" /> </head> <body> <div id="wrapper"> <!-- the header and navigation --> <header> <div id="logo">And the winner is<span>n't...</span></div> <nav> <ul> <li><a href="#">Why?</a></li> <li><a href="#">Synopsis</a></li> <li><a href="#">Stills/Photos</a></li> <li><a href="#">Videos/clips</a></li> <li><a href="#">Quotes</a></li> <li><a href="#">Quiz</a></li> </ul> </nav> </header> <!-- the content --> <div id="content"> <img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" /> <h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1> <p>that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p> <p>We're here to put things right. </p> <a href="#">these should have won »</a> </div> <!-- the sidebar --> <div id="sidebar"> <div class="sideBlock unSung"> <h4>Unsung heroes...</h4> <a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a> <a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a> </div> <div class="sideBlock overHyped"> <h4>Overhyped nonsense...</h4> <a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a> <a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a> </div> </div> <!-- the footer --> <footer> <p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That's a fact. Deal with it.</p> </footer> </div> </body> </html>
As we've seen however, where articles and sections exist within a page, these elements aren't restricted to one use per page. Each article or section can have its own header, footer, and navigation. For example, if we add a <article> element into our markup, it might look as follows:
<body> <div id="wrapper"> <!-- the header and navigation --> <header> <div id="logo">And the winner is<span>n't...</span></div> <nav> <ul> <li><a href="#">Why?</a></li> </ul> </nav> </header> <!-- the content --> <div id="content"> <article> <header>An article about HTML5</header> <nav> <a href="1.html">related link 1</a> <a href="2.html">related link 2</a> </nav> <p>here is the content of the article</p> <footer>This was an article by Ben Frain</footer> </article>
As you can see in the preceding code, we are using a <header>, <nav>, and <footer> for both the page and also the article contained within it.
Let's amend our sidebar area. This is what we have at the moment in HTML 4.01 markup:
<!-- the sidebar -->
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
<a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
</div>
</div>Our sidebar content is certainly "tangentially" related to the main content, so first of all, let's remove <div
id="sidebar"> and replace it with <aside>:
<!-- the sidebar --> <aside> <div class="sideBlock unSung"> <h4>Unsung heroes...</h4> <a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a> <a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a> </div> <div class="sideBlock overHyped"> <h4>Overhyped nonsense...</h4> <a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a> <a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a> </div> </aside>
Excellent! However, if we take a look in the browser you'd be forgiven for letting a minor expletive slip out…
Talk about one step forward and two steps back! The reason is we haven't been and amended the CSS to match the new elements. Let's do that now before we proceed. We need to amend all references to #header to be simply header, all references to #navigation to be nav, and all references to #footer to be footer. For example, the first CSS rule relating to the header will change from:
#header {
background-position: 0 top;
background-repeat: repeat-x;
background-image: url(../img/buntingSlice3Invert.png);
margin-right: 1.0416667%; /* 10 ÷ 960 */
margin-left: 1.0416667%; /* 10 ÷ 960 */
width: 97.9166667%; /* 940 ÷ 960 */
}To become:
header {
background-position: 0 top;
background-repeat: repeat-x;
background-image: url(../img/buntingSlice3Invert.png);
margin-right: 1.0416667%; /* 10 ÷ 960 */
margin-left: 1.0416667%; /* 10 ÷ 960 */
width: 97.9166667%; /* 940 ÷ 960 */
}This was particularly easy for the header, navigation, and footer as the IDs were the same as the element we were changing them for – we merely omitted the initial '#'. The sidebar is a little different: we need to change references from #sidebar to aside instead. However, performing a "find and replace" in the code editor of your choice will help here. To clarify, rules like the following:
#sidebar {
}Will become:
aside {
}Even if you've written a huge CSS stylesheet, swapping the references from HTML 4.01 IDs to HTML5 elements is a fairly painless task.
Tip
Beware multiple elements in HTML5
Be aware that with HTML5 there may be multiple <header>, <footer>, and <aside> elements within a page so you may need to write more specific styles for individual instances.
Once the styles for the And the winner isn't... have been amended accordingly we're back in business:
Now, although we're telling user agents which section of the page is the aside, within that we have two distinct sections, UNSUNG HEROES and OVERHYPED NONSENSE. Therefore, in the interest of semantically defining those areas let's amend our code further:
<!-- the sidebar --> <aside> <section> <div class="sideBlock unSung"> <h4>Unsung heroes...</h4> <a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a> <a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a> </div> </section> <section> <div class="sideBlock overHyped"> <h4>Overhyped nonsense...</h4> <a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a> <a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a> </div> </section> </aside>
The important thing to remember is that <section> isn't intended for styling purposes, rather to identify a distinct, separate piece of content. Sections should normally have natural headings too, which suits our cause perfectly. Because of the HTML5 outline algorithm, we can also amend our <h4> tags to <h1> tags and it will still produce an accurate outline of our document:
