Footer HTML and CSS

Semantic HTML baseline

Start with a single document-level <footer> wrapper and nested <nav> groups labeled by intent.

<footer>
  <div class="footer-grid">
    <nav aria-label="Product">
      <h2>Product</h2>
      <a href="/features">Features</a>
      <a href="/pricing">Pricing</a>
    </nav>
    <nav aria-label="Company">
      <h2>Company</h2>
      <a href="/about">About</a>
      <a href="/careers">Careers</a>
    </nav>
  </div>
</footer>

Responsive CSS example

.footer-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

Keep minimum tap target size, visible focus styles, and contrast-compliant text tokens in both light and dark environments.

Implementation checklist

1. • Start with one document-level <footer> element and scoped aria labels for each nav group.
2. • Design a mobile-first single-column layout before scaling to multi-column desktop variants.
3. • Use CSS variables for color, spacing, and type tokens to match your design system.
4. • Create one reusable footer component and pass content groups through structured config.
5. • Run accessibility and link-health checks before release to production.

Footer HTML/CSS FAQ