What is a footer?

Footer definition and purpose

On modern websites, the footer acts as a structural safety net. It supports discoverability for important pages and gives users a reliable final navigation point after scanning main content.

Footer types

Website footer examples

• SaaS footer: Product docs, status page, pricing, API links, and security/legal links.
• Agency footer: Service categories, case studies, locations, and proposal/contact paths.
• Marketplace footer: Buyer/seller flows, help center, trust resources, and policy navigation.

HTML <footer> semantics

Use the semantic <footer> element for document or section-level footer content and pair it with <nav> blocks for grouped links. This improves structural clarity for assistive technologies and crawler parsing.

<footer>
  <nav aria-label="Company">
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  <nav aria-label="Legal">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

SEO and accessibility best practices

• • Use descriptive anchor text for footer links, not generic labels like "click here".
• • Keep your footer links crawlable in HTML and avoid hiding critical links behind scripts.
• • Group links by intent (product, resources, company, legal) so users and crawlers can scan fast.
• • Preserve text contrast and keyboard focus states for all interactive elements.
• • Include consistent legal and trust signals (privacy, terms, contact, copyright).

Common footer mistakes

• • Stuffing dozens of low-value links into one footer block.
• • Using duplicate anchor text for different destinations.
• • Injecting footer links in a way that is not reliably crawlable.
• • Shipping mobile footers with poor tap targets and visual contrast.
• • Forgetting to keep compliance links current across every domain.

Footer implementation checklist

1. • Define footer goals by audience: navigation, trust, legal, conversion, or support.
2. • Design link groups and copy with plain language and predictable labels.
3. • Implement semantic HTML using <footer>, nested <nav>, and accessible headings.
4. • Validate responsiveness, focus order, and contrast on mobile and desktop.
5. • Audit link health and update cadence to keep content accurate over time.

Footer FAQ