HTML/Elements/footer

From Web Education Community Group
< HTML‎ | Elements
Jump to: navigation, search

<footer>

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

Point

  • A footer typically contains information about its section: [Example A]
    • author
    • links to related documents
    • copyright data

etc.

  • Footers don't necessarily have to appear at the end of a section, though they usually do. [Example B]


HTML Attributes

See global attributes.


Examples

Example A

Here is an example which shows the footer element being used both for a site-wide footer and for a section footer [try it]:

<body>
  <h1>What's HTML5?</h1>
  <article>
    <h1>New Elements</h1>
    <p>HTML5 has some new elements. ...</p>
    <footer> <!-- footer for article -->
      <p>Published <time pubdate datetime="2009-10-21T18:26-07:00"></time></p>
    </footer>
  </article>
  <footer> <!-- site wide footer -->
    <nav>
      <p><a href="/credits.html">Credits</a> —
             <a href="/tos.html">Terms of Service</a> —
             <a herf="/index.html">Blog Index</a>
      </p>
    </nav>
    <p>Copyright © 2010 Hiroki Yamada</p>
  </footer>
</body>

Footer01.png

Example B

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

<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. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

Footer02.png

HTML Reference

The HTML5 specification defines the <footer> element in 4.4.9 The footer element.