HTML5 - The Footer Element

Footer Tag - HTML5

The footer tag has been introduced in HTML5 for producing better page structure: The Code: <footer></footer> Represents a footer for a section and can contain information about the author, copyright information, etc.

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

When the footer element contains entire sections, they can present appendices, indexes, verbose license agreements, and other such content.

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

The footer element is not sectioning content; it isn't used to introduce a new section.

Rule: Do not nest 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>

<ARTICLE>
 <H1>Article title</H1>
 <P>Article information</P>
 <P>Article information</P>
 <FOOTER> <!-- footer for article -->
  <P>Last Modified: date</P>
 </FOOTER>
</ARTICLE>

<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>Copyright ? 2009 Gordon Freeman<br/>
Contact at: br@549.if</P>
</FOOTER>
</BODY>

Here is a page with two footers, one at the top and one at the bottom, with the same content:

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <h2>The ipsum of all lorems</h2>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. </p>
 <footer><a href="../">Back to index...</a></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>
<nav></nav>
<section class="main></section>
<footer></footer>
</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.

The footer element accepts Global Attributes.

Note: some of these overlap in purpose.

For a complete list of New Elements visit W3.org

Free Tools and Resources We Recommend

Free Responsive Web Design Certification freeCodeCamp: freeCodeCamp is a proven path to your first software developer job.; More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.; Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.; FREE Certification Courses!!
Free Ebook How to Code in HTML5 and CSS3: "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
Free Logo Generator Turbologo.com: If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
FREE HTML Editor (Windows): NoteTab Light: All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp: Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users: If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.; For image resizing we've found the easiest Linux tool to be Krita.

Have you tried our Free Mobile Ready website template kit? Download Template #402 - 6 Page Kit