This post gives you a footer checklist you can work through in ten minutes: the items every website needs, the extras that matter for your type of site, what actually helps (and does not help) SEO, the accessibility details people miss, and a complete responsive footer in HTML and CSS that I tested on desktop and phone widths.

The footer is where people go when they could not find something anywhere else. They scroll to the bottom looking for a phone number, a returns policy, a login link or proof that you are a real business. If it is there, they carry on. If it is not, many of them leave. So a good footer is less about design and more about answering the questions people bring to it.

Whatever you are building, start with these. If your footer has nothing else, it should have this.

  • Contact route. At least one of email, phone, contact page or address. Use a mailto: or tel: link so phones can act on it with one tap.
  • Legal links. A privacy policy is required almost everywhere you collect personal data, including analytics and form submissions. Add terms of service if you sell anything or have accounts, and a cookie settings link if you use a consent banner, so people can change their mind later.
  • Copyright line. © 2026 Your Company Ltd. You own copyright without it, but it signals that the site is maintained. Keep the year current (or generate it on the server) because a stale year makes a site look abandoned.
  • Company identity. Your business name and, where required, the legal details. In the UK and EU, registered companies are expected to show things like the company name, registration number and registered address on their website; the footer is the usual place.
  • A few key links. About, pricing or services, and contact. Not every page on the site, just the ones people look for.

That is enough for a small site. Everything below is about tailoring it.

What to add by type of site

Different visitors arrive at the bottom of the page with different questions. Here is what I add for each kind of site.

Site type Add to the essentials
SaaS Product links (features, pricing, integrations, changelog), docs and API, status page, security or trust page, login and sign-up
Online shop Shipping, returns and refunds, order tracking, size guide, payment methods, customer service hours
Local business Full address, opening hours, phone, map or directions link, service area
Agency or freelancer Selected work, services, a clear “start a project” link, social profiles where you actually post
Blog or publication Categories, about the author, newsletter, RSS feed, editorial or affiliate disclosure

SaaS

SaaS footers tend to grow into big multi-column link lists, and that is fine as long as the columns have clear headings: Product, Resources, Company, Legal. The items people hunt for most are pricing, docs, status and the login link. A status page link in particular saves support tickets during an outage. If you run your own help desk (for example with Relay), link the support portal here too.

Online shop

Shoppers check the footer just before they buy. They want to know what shipping costs, how long it takes and whether returns are easy. Put shipping and returns links in plain sight, and say who to contact about an order. Payment method icons are optional; if you add them, give them text alternatives.

Local business

For local businesses the footer is basically a business card. Show the full address as text (not only inside an image or map), opening hours and a tappable phone number. Make the name, address and phone match exactly what is on your Google Business Profile and other listings, since consistent details help both customers and local search.

Agency or freelancer

Agency visitors are evaluating you. The footer should make the next step obvious: a “start a project” or “book a call” link, your email, and links to your best work. Skip social icons for networks you abandoned years ago; an empty profile hurts more than no link.

Blog

Readers who reach the footer have finished an article, which makes it a good place for the newsletter signup and links to your main categories. If you earn affiliate income, a short disclosure link belongs here as well as near the links themselves.

Usually yes, if you actually send a newsletter. The footer appears on every page, so it catches people at the end of reading without interrupting them. A few things make it work:

  • Say what they get. “One useful email a month” beats “Subscribe to our newsletter”.
  • Use a real label, not only placeholder text. Placeholder text disappears as soon as someone types and is often low contrast.
  • Use type="email" and autocomplete="email" so phones show the right keyboard and can autofill.
  • Keep it to one field. Asking for a name as well is rarely worth the drop-off.
  • Handle consent properly if your audience is in the EU or UK: say what you will send and link to the privacy policy.

If you do not have a newsletter, do not add a form that leads nowhere. Put a contact link in that space instead.

Footers attract a lot of old SEO advice. Here is what holds up.

Myth: stuffing the footer with keyword links boosts rankings. Long lists like “plumber London, plumber Croydon, plumber Camden” were a common trick years ago. Search engines treat repeated sitewide boilerplate very differently from links in your main content, and Google’s spam policies call out keyword stuffing directly. At best it does nothing; at worst it looks spammy to people and search engines alike.

Myth: footer links are ignored completely. Also not right. Footer links are normal links and crawlers follow them. They help search engines discover important pages, such as category or contact pages, and they help people navigate. They just carry less weight than a well-placed link inside your content.

Fact: sitewide footer links to other sites need care. If you link out to a partner or client from every page, use rel="sponsored" for paid links. “Website by Agency” credits are fine as a normal link if they are honest, but do not sell them.

Fact: your contact details can help local SEO. For local businesses, a consistent name, address and phone number in the footer supports the same details on your listings. You can also add LocalBusiness structured data, but that goes in JSON-LD, not in the visible footer.

Fact: the footer matters for page experience. A footer that loads heavy widgets (embedded maps, social feeds, chat scripts) on every page slows the whole site. Prefer a simple “Get directions” link over an embedded map on every page.

A footer is easy to make accessible, which makes it a shame when it is not. Check these four things.

  1. Use the <footer> element. When it is the page footer (not inside an <article>, <main> or similar), browsers expose it to assistive technology as the “contentinfo” landmark, so screen reader users can jump straight to it. You only need one page-level footer.
  2. Label your navigation blocks. If you have more than one <nav> on the page (and you do, because your header has one), give each a name with aria-label or aria-labelledby, such as “Legal”. Otherwise screen reader users hear “navigation, navigation” with no way to tell them apart.
  3. Write link text that makes sense alone. “Privacy policy” and “Shipping and returns” are good. “Click here” and a row of unlabelled icons are not. Social icons need an accessible name, for example visually hidden text or aria-label="Instagram".
  4. Check contrast. Footers are often light grey text on a dark background, and the grey drifts too dark. WCAG asks for at least 4.5:1 contrast for normal text. Also make sure links are distinguishable without colour alone (underlines help) and that keyboard focus is clearly visible.

Two smaller ones: make tap targets comfortably large on phones (the form controls below are 44px tall), and use <address> for contact information about the site owner.

This footer follows the checklist above for a small agency: brand, a labelled navigation column, contact details, a newsletter form and a bottom bar with copyright and legal links. It stacks into one column on phones, two on tablets and four on desktop. There is no JavaScript.

I tested it in Chrome with Playwright at 1280px and 390px: no horizontal overflow, no console errors, tab order runs logically from the logo through every link, the email field and the button, focus outlines are visible, and submitting the empty form is blocked by the required email field.

HTML

<footer class="site-footer">
  <div class="footer-inner">
    <div class="footer-brand">
      <a class="footer-logo" href="/">Acme Studio</a>
      <p>Websites and brand design for small businesses.</p>
    </div>

    <nav aria-labelledby="footer-company">
      <h2 id="footer-company">Company</h2>
      <ul>
        <li><a href="/about/">About us</a></li>
        <li><a href="/work/">Our work</a></li>
        <li><a href="/pricing/">Pricing</a></li>
        <li><a href="/careers/">Careers</a></li>
      </ul>
    </nav>

    <div>
      <h2>Contact</h2>
      <address>
        12 Market Street, Leeds LS1 6DT<br>
        <a href="tel:+441130000000">0113 000 0000</a><br>
        <a href="mailto:hello@example.com">hello@example.com</a>
      </address>
    </div>

    <form class="newsletter" action="/subscribe" method="post">
      <h2>Newsletter</h2>
      <label for="footer-email">One useful email a month. No spam.</label>
      <div class="newsletter-row">
        <input id="footer-email" name="email" type="email" autocomplete="email" required placeholder="you@example.com">
        <button type="submit">Subscribe</button>
      </div>
    </form>
  </div>

  <div class="footer-bottom">
    <p style="margin:0">&copy; 2026 Acme Studio Ltd. Registered in England, no. 01234567.</p>
    <nav aria-label="Legal">
      <ul>
        <li><a href="/privacy/">Privacy policy</a></li>
        <li><a href="/terms/">Terms</a></li>
        <li><a href="/cookies/">Cookie settings</a></li>
        <li><a href="/accessibility/">Accessibility</a></li>
      </ul>
    </nav>
  </div>
</footer>

CSS

.site-footer {
  --footer-bg: #0f172a;
  --footer-text: #cbd5e1;
  --footer-heading: #ffffff;
  --footer-accent: #38bdf8;
  background: var(--footer-bg);
  color: var(--footer-text);
  font: 15px/1.6 system-ui, sans-serif;
  padding: 3rem 1rem 1.5rem;
}
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
.footer-brand p { margin: .5rem 0 0; max-width: 28ch; }
.footer-logo {
  color: var(--footer-heading);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}
.site-footer h2 {
  color: var(--footer-heading);
  font-size: .95rem;
  margin: 0 0 .75rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: .4rem; }
.site-footer a { color: var(--footer-text); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--footer-heading); }
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer input:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 2px;
}
.site-footer address { font-style: normal; }
.newsletter label { display: block; margin-bottom: .5rem; }
.newsletter-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 12rem;
  min-height: 44px;
  padding: 0 .75rem;
  border: 1px solid #475569;
  border-radius: 6px;
  background: #1e293b;
  color: #fff;
  font: inherit;
}
.newsletter button {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--footer-accent);
  color: #0f172a;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.footer-bottom {
  max-width: 72rem;
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid #334155;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  font-size: .875rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-bottom li + li { margin-top: 0; }
@media (min-width: 640px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .site-footer a { transition: color .15s ease; }
}

A few choices worth pointing out:

  • Colours live in custom properties on .site-footer, so you can rebrand it by changing four lines. The body text colour #cbd5e1 on #0f172a has a contrast ratio well above 4.5:1.
  • Links stay underlined. That keeps them recognisable as links without relying on colour.
  • The grid is mobile-first. One column by default, then 640px and 960px breakpoints. The newsletter row uses flex-wrap, so the button drops under the field on very narrow screens instead of squashing.
  • Transitions only run when the user has not asked for reduced motion.
  • The legal nav has aria-label="Legal" and the company nav is labelled by its heading, so both are named landmarks.

Replace the placeholder company details, point the form action at your email provider, and you are done. If you would rather start from a finished design, the HTML footer templates include multi-column, minimal and newsletter-focused layouts built on the same principles. For the other end of the page, see how to build a responsive navbar, and if your footer links to cookie settings, the cookie consent banner guide shows how to build the banner it reopens.

Copy this and tick it off:

  • Contact route (email, phone or contact page) with tappable links
  • Privacy policy, plus terms and cookie settings where relevant
  • Copyright line with the current year and legal company name
  • Registered company details if your country requires them
  • The extra links your site type needs (see the table)
  • Newsletter signup only if you actually send one, with a visible label
  • No keyword-stuffed link lists
  • <footer> element, labelled <nav> blocks, descriptive link text
  • Text contrast of at least 4.5:1 and visible focus styles
  • Tested on a phone-width screen

FAQ

A way to contact you and a link to your privacy policy. Those are the two things people most often scroll to the bottom for, and the privacy policy is a legal requirement in many places if you collect any personal data.

Not strictly. In most countries your content is protected by copyright automatically. The notice is still worth adding because it shows who owns the site and, with a current year, that it is maintained.

As many as people actually need, grouped under clear headings. A small business site might need eight; a large SaaS product might need forty across five columns. If a link is there only for search engines, remove it.

Should the footer be the same on every page?

Mostly, yes. Consistency helps people find things. It is common to simplify the footer on checkout or sign-up pages to reduce distractions, while keeping the legal and contact links.

They help search engines discover and understand important pages, and they help people navigate, but they carry less weight than links within your main content. Keyword-stuffed footer links do not help and can hurt.

footerhtmlcssaccessibilityweb-design
Written by

Amir Iqbal

Full-stack developer and the maker of every product in this store. I write about running self-hosted software and the problems our products solve.

About the store