<footer class="example-footer">
<p>Your brand</p>
<nav aria-label="Footer resources">
<ul>
<li><a href="/footer-examples">Footer examples</a></li>
<li><a href="/footer-accessibility">Accessibility guide</a></li>
</ul>
</nav>
</footer>
.example-footer {
display: grid; gap: 1.5rem; padding: 2rem;
background: #fff; color: #171717;
}
.example-footer ul { list-style: none; padding: 0; margin: 0; }
.example-footer a { color: inherit; display: inline-block; padding: .5rem 0; }
.example-footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (min-width: 40rem) {
.example-footer { grid-template-columns: 1fr 2fr; }
}
Check the result
At 320px, confirm the page has no sideways scroll. Press Tab to reach each link and check that its focus outline is visible. At wider widths, the brand and navigation should form two columns. Open every destination after publishing; an HTTP 200 alone does not prove that the correct page loaded.
Responsive CSS principles
Start mobile-first
Use a single-column layout first, then expand to two to five columns at wider breakpoints.
Use design tokens
Define CSS variables for color, spacing, type, borders, and focus states instead of scattered one-off values.
Keep one reusable component
Pass link groups through structured configuration so every page receives the same semantic baseline.
Validate before release
Run accessibility, link-health, and responsive checks before publishing to production.
Implementation checklist
• Start with one footer element and scoped aria labels for each navigation group.
• Render important destinations as crawlable HTML links.
• Test focus order, contrast, and tap targets on desktop and mobile.
• Keep content and required legal links in a versioned source of truth.
Footer HTML and CSS FAQ
Should I use one footer element or multiple?
Use one document-level footer for primary site navigation. Additional section footers are valid only when semantically necessary.
What CSS layout is best for responsive footers?
A mobile-first grid is usually the most maintainable pattern. Start with one column, then expand to two to five columns.
Can footer links be generated dynamically?
Yes, but they should render as crawlable HTML and preserve stable semantic structure across templates.
More footer guides
Review accessible footer requirements