W3docs
en
Log in

HTML <footer> Tag

The <footer> tag defines the footer of a website or a section. Tag description, attributes and examples.

The <footer> tag defines the footer of a web page or a section. Usually, 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, but it cannot contain another <footer> or <header> if they are descendants of the same sectioning content.

The <footer> is one of the HTML5 elements.

Tip

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

The <footer> element can contain the following:

  • copyright, authorship and contact information
  • related documents
  • sitemap
  • back to top links

Syntax

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

HTML <footer> Tag

<!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>
Try it Yourself »

Result

footer tag example

Attributes

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

How to style an HTML <footer> Tag

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

Practice

Practice

What is the function of the HTML <footer> tag, and where is it placed in a webpage?