Enhancing Web Page Structure - HTML5 - page 246

Of course, the degree of content does not have to be as limited as this example. One of the trends
in web design these days is the aptly named fat footer . A fat footer may include a host of links to
related material, a separate section on the creation of the page or site, or other extensive content. If
the amount or depth of material warrants, you're free to use a <section> tag within a <footer> .
bringing it all Together
I'll close out this section by pulling together all the disparate tags so you can see how a fully devel-
oped, semantically correct HTML5 page would look in code:
<div id=”outerWrapper”>
<header>
<img src=”images/logo.jpg” />
<nav>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”products.htm”>Products</a></li>
<li><a href=”services.htm”>Services</a></li>
<li><a href=”about.htm”>About Us</a></li>
</ul>
</nav>
</header>
<div id=”contentWrapper”>
<section>
<hgroup>
<h1>Welcome to Our Company Website</h1>
<p>We Make Great Stuff</p>
</hgroup>
<p>Our stuff is the best stuff around. Nobody makes stuff like our stuff.
Best of all, our stuff is the least expensive stuff you'll ever see -
which makes our stuff a terrific value.</p>
<p>When you need stuff, come see ours! You'll be glad you did!</p>
</section>
<aside>
<h2>People Like Our Stuff</h2>
<p>Here's what people have to say about our stuff:</p>
<p>It's really great stuff!! <br /> - Joe Schmoe</p>
<p>Wow! Super stuff! <br /> - Jane Schmain</p>
<p>The best stuff at the best price! <br /> - Bob Schmob</p>
</aside>
</div> <!-- End contentWrapper -->
<footer>
<p>Copyright &copy; 2011 Good Stuff, Inc.
</footer>
</div> <!-- End outerWrapper -->
The first thing you'll notice is that this code still uses <div> tags to enclose content. Such enclosures
are used, in conjunction with CSS, to achieve presentation effects like centering of the page. It's fine
to combine <div> tags with the new semantic-based HTML5 tags as long as you use each to their
own purpose.