Footers templates
Site footers, from a single line to a full sitemap.
2 templates
The footer is the last thing anyone reads and the first thing that gets thrown together. These handle the link columns, the legal line and the newsletter box without collapsing into a mess on a phone.
The last thing anyone reads, and the first thing thrown together
A footer carries real work: the links people go looking for when the navigation failed them, the legal lines you are obliged to show, and often the newsletter signup that is the page's second conversion point. It is also the block most likely to collapse into a mess on a phone.
Label every link group. Four <nav> elements with no labels give a
screen reader user four identical "navigation" landmarks. aria-label="Shop" on each makes the
landmark list useful instead of confusing.
Column headings are not document headings. "Shop", "Company" and "Help" label a
navigation group. Marking them up as <h3> — which is very common — injects four headings
into your outline at the end of every page, which is noise when someone pulls up the heading list.
Do not set the text below 14 pixels. Footers are routinely typeset at 11 or 12, and this is functional navigation rather than fine print.
How many links belong down there
Four columns is roughly the limit before a footer becomes a sitemap. If you genuinely have more to link, a minimal footer plus a real sitemap page is the better structure — it keeps the footer scannable and gives the long list a page where depth is expected.
Footer links are crawled on every page, so they are a strong internal linking signal. That cuts both ways: a footer stuffed with fifty keyword-heavy links to thin pages is a pattern search engines have discounted for over a decade. Link the pages people actually want.
Other categories
All of them are free
No attribution, no licence to read. Copy what you need.