Implementing the footer tag_HTML5 Multimedia Development Cookbook-QQ阅读男频历史网

上QQ阅读APP看书，第一时间看更新

Implementing the footer tag

"The <footer> element represents a footer for the completed documented or its nearest ancestor sectioning content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

We've all used footers on our web pages — typically for things like secondary navigation and more. This contains all the information you typically see at the bottom of a page, like a copyright notice, privacy policy, terms of use, and many more. Like the new <header> tag, the new <footer> tag can occur in more than one place.

How to do it...

In this case, we're going to use the new <footer> tag to place Roxane's copyright information at the bottom of the page.

Tip

And that's one to grow on

Remember: Copyright does not mean you have the right to copy it!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roxane</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="About">
<h3>About</h3>
<p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p>
<p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p>
</section>
<section id="Work">
<h3>Work</h3>
<p>sample 1</p>
<p>sample 2</p>
<p>sample 3</p>
</section>
<section id="Contact">
<h3>Contact</h3>
<p>email</p>
<p>phone</p>
<p>address</p>
</section>
<aside>
<h4>What I'm Reading</h4>
<ul>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li>
<footer> tagimplementing</ul>
</aside>
<aside>
<h4>Elsewhere</h4>
<p>You can also find me at:</p>
<ul>
<li><a href="http://linkedin.com/in/">LinkedIn</a></li>
<li><a href="http://twitter.com/">Twitter</a></li>
<li><a href="http://facebook.com/">Facebook</a></li>
</ul>
</aside>
<footer>
<h5>All rights reserved. Copyright Roxane.</h5>
</footer>
</body>
</html>

How it works...

Though this <footer> is located at the bottom of Roxane's single-page portfolio site, it can be used elsewhere on a page, such as at the bottom of a <section> tag to contain information like author, publication date, and so on. The result is more flexible than something like the old <div id="footer"> allowed us. In this and many other instances, HTML5's new tags allow us to place appropriate tags where they make the most sense, based on our content, not our layout.

There's more...

The HTML5 specification suggests author information be included in the new <footer> tag no matter if the <footer> is part of a <section> or <article> or even at the bottom of the page.

This happens usually

The vast majority of the time, you'll use the <header> tag at the top of your document, the <footer> tag at the bottom, and <aside> tags for the sides.

Flexible footer content

When the <footer> element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.