HTML Footer Element

At the end of a letter, you sign off. At the end of a book, you find the publisher, the year, and the notes. At the end of a web page, you expect to find who made it, how to reach them, and the small print. The <footer> element marks that closing content.

It looks almost identical to <header>, and follows the same idea: it can be used for the whole page or for one article or section, and its meaning depends on where you put it. This lesson shows what belongs inside, what visitors expect to find there, and how to build one that works for everyone.

What You Will Learn

• What <footer> is for, and where it can be used
• When a footer becomes the contentinfo landmark
• What belongs in a page footer, and what does not
• Footers inside articles and sections
• The <small> element for fine print
• Legal and privacy links visitors expect
• A footer that stays at the bottom of short pages
• Accessibility, security, and global notes

The Basics

HTML Code

index.html

<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="/programme">Programme</a></li>
      <li><a href="/tickets">Tickets</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <p><small>&copy; 2026 Spring Bread Festival. All rights reserved.</small></p>
</footer>

style.css

footer {
  padding: 1.5rem 1rem;
  border-top: 1px solid #cbd5e1;
  font-size: 0.9rem;
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

Browser Output

http://127.0.0.1:5500/index.html

© 2026 Spring Bread Festival. All rights reserved.

As with <header>, a <footer> has no default look. It is a plain block, and the line and spacing above are CSS. Its job is meaning.

Two Kinds of Footer

The same element means different things, depending on where it sits:

Where it sits	What it is	Announced as
Directly in <body> (not inside another sectioning element)	The footer for the whole page	contentinfo landmark
Inside <article>	The footer for that article: tags, author note, share links	Nothing special
Inside <section>	The footer for that section: "See all" link, notes	Nothing special
Inside <main>, <aside>, or <nav>	The footer for that region	Nothing special

A page can have many footers, but only the page-level one is the contentinfo landmark. A page should have one.

<body>
  <main>
    <article>
      <h1>How to shape a loaf</h1>
      <p>…</p>

      <footer>                        <!-- the article's footer: no landmark -->
        <p>Filed under: <a href="/topics/bread">Bread</a></p>
      </footer>
    </article>
  </main>

  <footer>                            <!-- the page footer: contentinfo landmark -->
    <p><small>&copy; 2026 My Site</small></p>
  </footer>
</body>

A footer does not have to be at the very bottom of the screen. It is about meaning: closing information for its parent. And, like <header>, it cannot contain another <header> or <footer>.

What Belongs in a Page Footer

Visitors have learned where to look for certain things. Putting them in a footer is a convention worth following.

Typical content	Notes
Copyright line	Use <small>, and a &copy; symbol
Legal links	Privacy policy, terms, cookie settings
Accessibility statement	Required or expected in many places
Contact information	An email, phone number, or address, with <address>
Site links	A secondary menu or sitemap, in a <nav aria-label="Footer">
Social media links	With text names, not only icons
Language or region selector	Links with lang and hreflang
"Back to top" link	Helpful on long pages
Newsletter sign-up	With a proper label (see Accessible Forms)
Credits and licences	Photo credits, a content licence

What does not belong:

• The main page content (that is <main>).
• The primary navigation (that is the header's <nav>).
• Related content or ads (that is <aside>).
• Essential instructions that visitors must read before they can use the page.

Try It: Build a Footer

Choose what your site needs, and watch the markup grow. Notice the labels on each list. They let a screen reader user tell several lists apart.

HTML Code

index.html

<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="/programme">Programme</a></li>
      <li><a href="/tickets">Tickets</a></li>
    </ul>
  </nav>

  <address>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </address>

  <ul aria-label="Legal">
    <li><a href="/privacy">Privacy</a></li>
    <li><a href="/terms">Terms</a></li>
    <li><button type="button" id="cookie-settings">Cookie settings</button></li>
    <li><a href="/accessibility">Accessibility statement</a></li>
  </ul>

  <p><small>&copy; 2026 Spring Bread Festival. All rights reserved.</small></p>
</footer>

Browser Output

http://127.0.0.1:5500/index.html

What does your footer need?

Copyright line Privacy, terms, and cookie settings links Accessibility statement link Contact details Site links Social media links Language links

<footer>
  <ul aria-label="Legal">
    <li><a href="/privacy">Privacy</a></li>
    <li><a href="/terms">Terms</a></li>
    <li><button type="button" id="cookie-settings">Cookie settings</button></li>
    <li><a href="/accessibility">Accessibility statement</a></li>
  </ul>
  <p><small>&copy; 2026 Spring Bread Festival. All rights reserved.</small></p>
</footer>

The <small> Element

<small> marks side comments and fine print: copyright, legal notices, and licensing. It is not a way to make text tiny.

<p><small>&copy; 2026 Spring Bread Festival. All rights reserved.</small></p>
<p><small>Photos by Ada, licensed under CC BY 4.0.</small></p>

Browsers show it in a slightly smaller size by default, but its meaning is "fine print." Do not use it for long paragraphs of important text, because tiny text is hard to read.

A Year That Stays Correct

A hard-coded "2026" goes out of date. Options:

• Static site or build step: put the year in your template, and rebuild each year.
• In the browser: a small script, with the year written in HTML as a fallback:

<p><small>&copy; <span id="year">2026</span> Spring Bread Festival</small></p>

script.js

document.getElementById("year").textContent = new Date().getFullYear();

The copyright notice only needs the year of first publication (and, if you like, a range such as 2024 to 2026). It is not legal advice, so check what applies to you.

Legal and Privacy Links Visitors Expect

Footers are where people look for the "boring but important" links. Depending on your site and your visitors' countries, you may need or want:

Link	Why
Privacy policy	Explains what data you collect and why. Required in many places when you collect personal data
Terms of use	The rules for using your site or service
Cookie settings ("Manage cookies")	Lets visitors change their consent at any time. Use a real <button>, since it triggers an action rather than navigating
Accessibility statement	Tells visitors how accessible the site is and how to report problems
Imprint (for example, "Impressum")	Legally required in some countries to identify the site's operator
Contact and complaints	A real way to reach a person
Refund and shipping policies	For shops

Keeping the Footer at the Bottom

On a page with little content, the footer can float up under the text and leave an empty gap. The fix is a small CSS grid on <body>. Tick the box to see it at work.

HTML Code

index.html

<body>
  <header>Header</header>
  <main>A very short page. Not much content here.</main>
  <footer>Footer</footer>
</body>

style.css

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* header, main (stretches), footer */
}

Browser Output

http://127.0.0.1:5500/index.html

Use the sticky-footer CSS

Header

A very short page. Not much content here.

Footer

The footer floats up under the short content, leaving an empty gap below it.

Use 100dvh instead of 100vh if you want the layout to follow the visible area of mobile browsers whose address bars appear and disappear.

A Footer Inside an Article or Section

An article's footer holds details about that article:

<article>
  <h2>How to shape a loaf</h2>
  <p>Start with a round of dough…</p>

  <footer>
    <p>Filed under: <a href="/topics/bread">Bread</a>, <a href="/topics/beginners">Beginners</a></p>
    <p>Share: <a href="/share/email">Email</a> · <a href="/share/copy">Copy link</a></p>
  </footer>
</article>

It is a good home for tags, categories, author notes, licence details, and "next" and "previous" links belonging to that item. A section can do the same, with something like a "See all news" link. These footers are not landmarks.

Accessibility at a Glance

• Use one page-level <footer>, so there is a single contentinfo landmark.
• Name footer navigation with aria-label="Footer" when the page has other <nav> regions.
• Use lists for groups of links, so the number of links is announced, and label them if there are several.
• Give social icons text names: aria-label="Festival on Example", or visible text. An icon alone is not enough.
• Use a <button> for actions such as "Cookie settings", and a link for navigation.
• Keep text readable: <small> must not be tiny. Aim for at least 14 to 16 px with good contrast (4.5 to 1 or better).
• Make touch targets big enough (at least 24 by 24 CSS pixels, ideally 44), with space between links.
• Do not use a footer as the only place for something visitors urgently need.
• Add a "Back to top" link on long pages, and make sure it moves focus.

Security and Privacy Notes

• Do not put sensitive information in the footer, such as internal email addresses, staff phone numbers, server details, or version numbers that help attackers.
• Public email addresses attract spam. Use a contact form, or accept the risk knowingly.
• Open outside links safely: rel="noopener" (and rel="noreferrer" if you do not want to share the page address) for social and partner links.
• Third-party badges and widgets in footers (payment logos, review widgets, chat, analytics) can load tracking scripts. Load only trusted ones, and respect the visitor's cookie consent.
• Link to your real privacy policy, and make sure it matches what the site does.
• Escape anything dynamic, such as a visitor's name or a country shown in the footer.
• Do not show admin or login links that expose how your system is built. Hiding a link protects nothing, so always enforce access on the server.

Global Audience Notes

• Laws differ by country. Cookie consent, privacy rights, imprint, tax details, and accessibility statements are required in different places. Check the rules for the countries your visitors live in.
• Provide a language and region selector where you serve several. Write each language name in its own language, and mark it with lang.
• Use <address> and time-zone-aware contact details: say "Mon to Fri, 9:00 to 17:00 (UTC+05:30)" for support hours.
• Show currency and units clearly if your footer lists prices or shipping.
• Right-to-left pages: flex rows reverse by themselves with dir="rtl". Use logical properties such as margin-inline-end.
• Footers get long in translation, since legal words are lengthy. Let links wrap onto several lines.
• Do not depend on icons that mean different things in different cultures. Add text.
• Keep the footer light. Large logo walls and widgets slow every page, a real cost on low-bandwidth connections.

Common Mistakes to Avoid

1. Using <footer> for the main content, just because it is at the bottom.
2. Nesting a <footer> or <header> inside a footer.
3. Several page-level footers, or role="contentinfo" on more than one.
4. Using <footer> for side content that belongs in an <aside>.
5. Social icons with no accessible name.
6. Tiny, pale <small> text that is hard to read.
7. A "Cookie settings" link that does nothing or is a <div> instead of a <button>.
8. A copyright year that is years out of date.
9. Unlabelled footer menus, when the page has other <nav> regions.
10. A footer floating mid-screen on short pages.
11. Putting essential information only in the footer.
12. Loading trackers in the footer without consent.

Practice Time

Try these in your editor:

1. Build a page footer with a copyright line inside <small>.
2. Add a footer <nav> with aria-label="Footer" and four links.
3. Add <address> with an email link.
4. Add legal links, including a "Cookie settings" <button>.
5. Add an article with its own <footer> that lists tags.
6. Use your browser's accessibility panel to find which footer is the contentinfo landmark.
7. Use CSS grid on <body> to keep the footer at the bottom of a short page.
8. Add social links with accessible names, and rel="noopener".
9. Replace the hard-coded year with a small script, keeping a static fallback.
10. Bonus: check a site you use. Does it have an accessibility statement and a way to change cookie choices?

Quick Recap

Click a question to check your answer.

1. What is the <footer> element for?

It holds closing information for its parent: for a page, things like copyright, legal links, contact details, and site links. For an article or section, it holds details about that item, such as tags or related links.

2. When is a footer the contentinfo landmark?

When it is the page-level footer, directly in <body> and not inside <article>, <aside>, <main>, <nav>, or <section>. Footers inside those elements are just footers for that part.

3. Does a footer have to be at the bottom of the screen?

No. The element is about meaning, not position. It is usually at the bottom, but CSS decides where it is displayed.

4. What is <small> for?

Side comments and fine print, such as copyright and legal notices. It is not a way to make text tiny, and it should stay readable.

5. How do you keep a footer at the bottom of a short page?

Give <body> a minimum height of the viewport and a grid with rows auto 1fr auto, so the main area stretches and pushes the footer down.

6. Why should a "Cookie settings" control be a <button>?

It performs an action (opening a dialog) rather than navigating to another page, so a real button gives correct keyboard behaviour and meaning.

Key Takeaways

• <footer> holds closing information for a page, article, or section.
• Only the page-level footer is the contentinfo landmark. Use one per page.
• Typical contents: copyright in <small>, legal and privacy links, an accessibility statement, contact details, site links, and social links with text names.
• A footer cannot contain another <header> or <footer>, and is not for main content, primary navigation, or sidebars.
• Label footer navigation, use lists for link groups, and use buttons for actions such as cookie settings.
• Keep it at the bottom of short pages with CSS grid, and keep text readable and targets large.
• Check legal requirements for the countries you serve, and load third-party footer widgets only with consent.
• Do not hide anything essential, or anything sensitive, in a footer.

Next, learn how to mark up contact details, in Address, or return to the Semantic HTML overview.