Runnable HTML Docs: Footer

Q: How do I write the copyright symbol in HTML?

Use the entity ©, which shows ©. You can also type the character directly when the page uses . Wrapping the line in marks it as small print.

Q: Can a page have more than one footer?

Yes. Each or can have its own footer for author details or tags. Only a footer that is not inside article, aside, main, nav or section is the page's contentinfo landmark for screen readers.

Put the closing content of your page in a <footer> element, usually the last thing in <body>. Like <header>, it has no default look; CSS makes it a footer bar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© prints the © symbol. <small> marks the copyright line as small print, which is its meaning in HTML, not just a smaller font. The link lists are real <ul> lists, so most screen readers announce how many links each column has.

On a page with little content, the footer sits right under that content, with empty space below it. The fix is a flex column: the container is at least as tall as the window, and the main area takes all the leftover height. The gray box below stands in for a browser window:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

Remove flex: 1 from main and the footer jumps up under the paragraph. On a real page, put the same rules on <body> with min-height: 100vh (and margin: 0) instead of a fixed height, so the footer sits at the bottom of short pages and after the content on long ones.

Footers inside articles

A <footer> closes its nearest article or section, so a blog post or a comment can have its own, with the author, date or tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

Screen readers treat only the page-level footer as the contentinfo landmark. A footer inside an article is an ordinary group, so it does not compete with the site footer.

Contact details with address

For contact information about the page or its owner, use <address> inside the footer. It is for contact details only (not for any postal address in your content), and browsers show it in italics by default:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

The line break inside the address is one of the good uses of <br>. For more on email links, see the mailto page.

A footer can hold links, lists, forms (a newsletter sign up), images and a <nav>. It cannot contain a <header>, another <footer> or a <main>. A second menu in the footer can be a <nav> with a label that tells it apart from the main one:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Common mistakes

Putting <footer> outside <body>. Everything visible goes inside <body>, the footer included.
Using position: fixed to keep it down. A fixed footer covers content on small screens and needs padding everywhere. Use the flex column pattern.
Using <address> for any address. It is for the contact details of the page or article author. A shop address in a list of locations is a plain <p>.
Link columns built from <br> tags. Use <ul> lists so the structure is announced.
Hardcoding last year. Update the copyright year in your template, or print it from your server or build step.

Frequently Asked Questions

What is the footer tag in HTML?

<footer> is a semantic element for the closing content of a page or section: copyright, contact details, related links or author information. It is a block box with no default styling.

What should go in a website footer?

Typical footers hold the copyright notice, links to legal pages such as privacy and terms, contact details, social links and a short site map. Keep the main navigation in <nav> near the top as well, since not every visitor scrolls to the end.

How do I keep the footer at the bottom of the page?

Make the body a flex column at least as tall as the window (display: flex; flex-direction: column; min-height: 100vh;) and give <main> flex: 1. The main area then grows to fill empty space and pushes the footer down on short pages.

How do I write the copyright symbol in HTML?

Use the entity ©, which shows ©. You can also type the character directly when the page uses <meta charset="utf-8">. Wrapping the line in <small> marks it as small print.

Can a page have more than one footer?

Yes. Each <article> or <section> can have its own footer for author details or tags. Only a footer that is not inside article, aside, main, nav or section is the page's contentinfo landmark for screen readers.

Related concepts