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 of a <section>, <article>, or other sectioning element. A footer usually holds copyright and authorship information, contact details, navigation links, related documents, or a "back to top" link.

This page covers what <footer> is for, how it maps to an accessibility landmark, why you should reach for it instead of a plain <div>, and how to place page-level and article-level footers on the same page.

The <footer> is one of the HTML5 semantic elements.

A typical <footer> may contain:

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

If the footer contains contact details, wrap them in the <address> tag.

Visually, <footer> and <div class="footer"> render the same — both are block-level boxes with no default styling beyond that. The difference is meaning, and that meaning has real benefits:

  • Accessibility. When <footer> is a direct child of <body>, browsers expose it as the contentinfo ARIA landmark. Screen-reader users can jump straight to it with a landmark shortcut, and assistive tech announces "content information" so they know what region they entered. A <div> conveys none of this.
  • SEO and machine readability. Search engines and reader-mode tools use semantic regions to understand page structure. A <footer> clearly marks supplementary, page- or section-level metadata.
  • Document outline & maintainability. Semantic tags make the markup self-describing, so the next developer (or you, months later) can read the structure at a glance.

Use <footer> whenever the content is genuinely footer material. Use a <div> only for generic, meaning-free grouping.

The contentinfo landmark

The ARIA role a <footer> maps to depends on where it sits:

  • A <footer> that is a direct child of <body> becomes the contentinfo landmark — the footer for the whole page. There should be only one such page-level footer.
  • A <footer> nested inside <article>, <section>, <aside>, <nav>, or <main> is not a landmark — it has no contentinfo role. It simply marks the footer of that piece of content, and you can have as many of these as you have sections.

This is why you can safely add a footer to every article on a page without confusing assistive technology: only the top-level one is the page's contentinfo.

Syntax

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

Example of a page-level <footer>:

The footer below is a direct child of <body>, so it acts as the page's contentinfo landmark.

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 »

Footers inside <article> and a page footer together

You can have several <footer> elements on one page. A common pattern is one footer per <article> (for that article's author, date, or tags) plus a single page-level footer at the bottom. The article footers are not landmarks; only the <body>-level one is contentinfo.

<!DOCTYPE html>
<html>
  <body>
    <main>
      <article>
        <h2>First post</h2>
        <p>Some article content...</p>
        <footer>
          <p>Posted by Jane Doe on 2026-06-18 · Filed under HTML</p>
        </footer>
      </article>

      <article>
        <h2>Second post</h2>
        <p>More article content...</p>
        <footer>
          <p>Posted by John Smith on 2026-06-17 · Filed under CSS</p>
        </footer>
      </article>
    </main>

    <!-- Page-level footer: this one is the contentinfo landmark -->
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>

See also the related sectioning elements: <header>, <main>, <section>, and <article>.

Nesting restriction

A <footer> cannot contain another <footer> or a <header> as a descendant. The following markup is invalid:

<!-- Invalid: a footer nested inside a footer -->
<footer>
  <p>Site footer</p>
  <footer>
    <p>This nested footer is not allowed.</p>
  </footer>
</footer>

If you need a footer for a sub-section, give that section its own sectioning element (such as <article> or <section>) and put the footer inside it instead.

Attributes

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

<footer> has no special default styles — it is just a block-level element — so you style it like any other box. A common look is a dark, centered bar:

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

Practice

Practice
When does an HTML footer element become the contentinfo ARIA landmark?
When does an HTML footer element become the contentinfo ARIA landmark?
Was this page helpful?