HTML <footer> Tag

The <footer> tag defines a footer for its nearest sectioning content or sectioning root element.

A footer generally contains information about the author, copyright information or some links related to the documents.

You can use number of <footer> elements in one document.

All browsers' new versions support <footer> element which is new in HTML5.

Syntax

The <footer> tag comes in pairs. The content must be written between opening (<footer>) and closing (</footer>) tags.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .header {
      height: 40px;
      padding: 20px 20px 0;
      background: #e1e1e1;
    }
    .main-content {
      height: 60vh;
      padding: 20px;
    }
    footer {
      padding: 10px 20px;
      background: #666666;
      color: white;
    }
    a {
      color: #00aaff;
    }
  </style>
</head>
<body>
 <div class="header">Header / Menu</div>
  <div class="main-content">
    <h1>Main content</h1>
    <p>This is some paragraph. </p>
  </div>
  <footer>
    <p>Company © W3docs. All rights reserved.</p>
  </footer>
</body>
</html>

A contact information inside a <footer> tag can go inside a <address> element.

Let's see another example to clarify what other usage the <footer> tag can have.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .main-content {
      width: 60%;
      height: 400px;
      padding: 20px;
      line-height: 28px;
    }
    footer {
      padding: 10px 20px;
    }
    a {
      color: #00aaff;
    }
  </style>
</head>
<body>
  <div class="main-content">
    <h1>This is some message</h1>
    <p>We are happy to inform that we have new feature called snippets. Snippet is a programming term of a small piece of  reusable source code or a text. As you can see  below there are following snippet sections:  AngularJS, CSS, HTML, JavaScript, Linux, NodeJs, PHP and Symfony. For the future we are planning to add more snippets as well as snippet sections.</p>
  </div>
  <footer>
    <p>Written by: W3docs Team</p>
    <p>To Contact: <a href="mailto:info@w3docs.com">info@w3docs.com</a>.</p>
    <address>
      Verin Antarayin St. 160/6<br/>
      Yerevan, RA<br/>
      (+374) 95-588689
   </address>
  </footer>
</body>
</html>

The <footer> tag also supports the Global Attributes.