HTML <footer> Tag

The <footer> tag defines the footer of a web page or a section. As a rule, it contains copyright information, contact details, navigation links, etc.

You can have several <footer> tags on a web page. For example, you can place a footer inside the <article> tag to store information related to the article (links, footnotes, etc.).

The tag can contain other HTML elements, except for the <footer> and <header> tags.

The <footer> has recently become a part of HTML5 specification.

If the footer contains contact details, you should put it in the <address> tag.

Syntax

The <footer> element comes in pairs, however, the closing tag (</footer>) isn’t required.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        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>

Result

Attributes

The <footer> tag supports the Global Attributes and the Event Attributes.

Browser support

6+ 9+ 4+ 5+ 11.1+