CreateaFreeWebsite  with Responsive Web Design

The Footer Tag introduced in HTML5

The footer tag has been introduced in HTML5 for producing better page structure:
The Code: <footer></footer>

Is like a closing statement for a web page or a section which can contain information about the author, copyright information, etc.

Common Uses

Where to Use the Footer

Rules:
You can nest divisions and paragraphs inside footers
Do not nest footers inside footers!

 

Examples:

Different ways to use the footer element:

<body>
<h1>Page title</h1>
<article>
 <h1>article title</h1>
 <video>
  <p><a href="*.ogv">Download video</A>.</p>
 </video>
  <footer> <!-- footer for article -->
  <p>Published : date and time</p>
 </footer>
</article>

<section>
 <h1>section title</h1>
 <p>section information</p>
 <p>section information</p>
 <footer> <!-- footer for section -->
  <p>Last Modified: date</p>
 </footer>
</section>

<footer> <!-- site wide footer -->
 <nav>
  <p><a href="/credits.html">Credits</A>
     <a href="/tos.html">Terms of Service</A>
     <a href="/index.html">Blog Index</A></p>
 </nav>
 <p>© 2009 Gordon Freeman Contact at: br@549.if</p>
</footer>
</body>

 

New Elements and Beginners

Some of the new tags used as shown below might make the body code of a basic HTML5 document easier to read.

This structure can be used instead of using class customized divisions .

<body>
<header></header> NEW
<nav></nav> NEW
<main></main> Not NEW, but rarley used.
<footer></footer> NEW
</body>

 

*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.

 

Free Tools and Resources

Need more advanced information? Visit our Web Developer Resources page for a collection of other great tutorials and reference guides on the subjects of HTML5, CSS3, Responsive Design and SEO.

 

Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅

Have you tried our NEWEST template kit with scrolling columns? Download Template Kit #601 - 4 Page Kit or Test Drive It!