By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HTML Footer Tag

Reference on how to use the Footer element of HTML, including live demos.

Edited: 2014-12-28 05:51

The html footer element is used to keep content relevant to its sectioning parent such as, information about who wrote the section, and copyright information, even links to related pages or documents.

If the footer is placed outside of a sectioning element, such as article or section, it will belong to semantically to the sectioning root.

You don't have to place footers at the end of a sectioning element. You can place them anywhere you like in its section, which is useful when working with absolute positioning.

Attributes

Attribute: Value: Description:
Attributes Global Attributes Global, Event, I18n

How to use footer elements

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>My first Website</title>
    <style type="text/css">
     article, section, footer { /* Older browsers need this fix, to render these elements properly */
     display: block;
    }
     
     /* The below styles are only included to
        demonstrate the structure of the page visually
        for the purpose of this example
     */
     section {
     border: 1px solid #298e31;
     padding: 1em;
    }
     article {
      border: 1px solid #ffbc66;
      padding: 1em;
      margin: 1em;
     }
     footer {
      border: 1px solid #ffbc66;
      padding: 1em;
      margin: 1em;
     }
     address {
      border: 1px solid #ffbc66;
      padding: 1em;
      margin: 1em;
     }
    </style>
  </head>

  <body>
    <article>
       <h1>Example of how to use the article element</h1>
       <p>Main blog post, article, etc..</p>
       
       <section>
        <h1>Subsection of article</h1>
        <p>A subsection of the main article.</p>

        <section>
         <h1>This is a subsection of the first subsection</h1>
         <p>This is a subsection to a subsection</p>
        </section>
       </section>
      <footer>
       <p>This Blog post was written by BlueBoden</p>
       <address>
        Contact the Author <a href="/users/BlueBoden/Profile">BlueBoden</a>,
        Contact <a href="/Infrastructure/contact">Brugbart</a>
       </address>
      </footer>

      <article>
        <h1>Some Blog comment or forum reply</h1>
        <p>The text of the comment, or individual post in a forum thread. Note. subsections are also allowed.</p>
       <footer>
        <p>This Blog comment was written by BlueBoden</p>
        <address>
         Contact the Author <a href="/users/BlueBoden/Profile">BlueBoden</a>,
         Contact <a href="/Infrastructure/contact">Brugbart</a>
        </address>
       </footer>
      </article>
      <article>
        <h1>Another Blog comment or forum reply</h1>
        <p>The text of the comment, or individual post in a forum thread. Note. subsections are also allowed.</p>
       <footer>
        <p>This Blog comment was written by BlueBoden</p>
        <address>
         Contact the Author <a href="/users/BlueBoden/Profile">BlueBoden</a>,
         Contact <a href="/Infrastructure/contact">Brugbart</a>
        </address>
       </footer>
      </article>
    </article>
    <footer>
      <p>Copyright © Brugbart</p>
      <address>
        Contact <a href="/Infrastructure/contact">Brugbart</a>
      </address>
    </footer>
  </body>

</html>

The footer which is placed in the body, belongs to the body of the page. This can be used for copyright information, and information about the CMS the website is using, etc.

The other footers in the example, belongs to the articles they are placed in.