0%

<footer> Footer

Closing content for a page or section, like copyright, contacts and related links.

By HTML6 (opens in a new tab) · Updated · How we write and check content

A <footer> holds information about its section or page: copyright, author details, contact links, related pages. The page footer acts as the contentinfo landmark.

Despite the name, it need not sit at the bottom visually. An <article> can have its own footer for tags or the author. A footer may not contain a header, another footer or a main.

How a footer relates to its nearest section is explained in the footer element section of the HTML standard (opens in a new tab). You build one yourself in the Header, Nav, Main, Footer lesson.

Syntax

<footer>
  <p>&copy; 2026 Site name</p>
</footer>

When to use it

The page footer holds what people expect at the bottom of a site: copyright, legal pages, contact details, a short sitemap and social links. Inside an article or section, a footer can carry the author, tags, a "last updated" note or share links for that piece alone.

Not every closing block is a footer. An "Order now" call to action at the end of a product page belongs to the main content. The site owner's contact details go in an address element, usually inside the footer, and a list of the main pages can be a labelled nav in there too.

Like the header, the footer counts as the contentinfo landmark only when it is not nested inside article, aside, main, nav or section. Wrap the whole page, footer included, in a <main> or <section> and the footer loses that role without a word. Keep it directly in the body or inside a plain div wrapper.

Live example

Edit the code and watch the preview.

<article>
  <h2>My trip</h2>
  <p>We walked for six hours.</p>
  <footer>Posted by Ana</footer>
</article>
<footer>
  <p><small>&copy; 2026 Travel Notes</small></p>
</footer>

More examples

Site footer with columns

A site footer often combines several kinds of content: a labelled navigation list, the owner's contact details in <address>, and the copyright line. Two inline-block columns arrange them side by side on wide screens.

<style>
footer{background:#333;color:#eee;padding:12px}
footer a{color:#9cf}
.col{display:inline-block;vertical-align:top;width:45%;margin-right:4%}
</style>
<footer>
  <nav class="col" aria-label="Footer">
    <a href="about.html">About</a><br>
    <a href="privacy.html">Privacy</a>
  </nav>
  <address class="col">
    <a href="mailto:[email protected]">[email protected]</a>
  </address>
  <p><small>&copy; 2026 Sunny Bakery</small></p>
</footer>

Product card footer

Each product card is an article with its own footer. The footer holds information about the product rather than its description: the price and a link to the category. This footer belongs to the card and is not a page landmark.

<article>
  <img src="pancakes.svg" alt="Pancake mix box" width="200" height="150">
  <h2>Pancake mix</h2>
  <p>Just add milk and eggs.</p>
  <footer>
    <p>$4.50 - <a href="breakfast.html">More breakfast items</a></p>
  </footer>
</article>

Tip: Have one page-level footer. Any extra footers belong to articles.

Browser support

Current browsers all support footer, an HTML5 addition. A footer that belongs to the body is exposed as the contentinfo landmark; footers inside articles and sections are treated as ordinary groups. Internet Explorer 8 and older needed a script to style it, which is no longer a concern.

Accessibility

Screen reader users look for contact and legal links in the contentinfo landmark. Keep a single page-level footer and there will be exactly one of them. The W3C landmark regions guide (opens in a new tab) explains how the contentinfo role is assigned.

Common mistakes

Wrong

<footer>
  <footer>Copyright</footer>
</footer>

Right

<footer>
  <p>Copyright 2026 Acme</p>
</footer>

Footers cannot hold another footer or a header.

Frequently asked questions

Can I use the footer tag inside an article?

Yes. A <footer> belongs to its nearest sectioning ancestor, so inside an <article> it can hold the author, publish date, tags or share links for that article. Only a footer scoped to the body (outside article, aside, main, nav and section) is exposed as the page-wide contentinfo landmark. Contact details in a footer usually go in an address element.

Does the footer have to be at the bottom of the page?

No. The name describes its job. A footer carries information about its section, such as who wrote it or a few related links. It usually comes last, but the standard does not demand that, and CSS alone decides where it appears.

Practise it

Related sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<nav>Wraps the major navigation links.<main>The page's unique, central content. One per page.<article>Self-contained content that makes sense alone, such as a post, card or comment.<section>A themed group of content, normally with its own heading.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.