How to Make a Footer in HTML & CSS
To make a footer, add a <footer> element as the last thing inside <body> and put your copyright line, links and contact details in it. Style it with CSS, use grid to arrange columns, and give the page min-height: 100vh with flexbox to keep the footer at the bottom on short pages.
Last updated: October 4, 2026
Quick answer
Step 1: Add the <footer> element
The <footer> element marks the closing section of a page. Placed directly inside <body> (not inside an article or section), it’s the footer for the whole site, and screen readers let users jump to it as the page’s “content information” region.
- After your main content, before
</body>, add<footer>and</footer>. - Put the footer content inside: at minimum a copyright line and links to your important pages.
- Use the same footer on every page of the site, so visitors always know where to find it.
A page can also have smaller footers inside <article> elements, for example for a blog post’s author and date. Those belong to the article, not the whole page.
Step 2: Decide what goes in the footer
Visitors scroll to the footer when they’re looking for something specific. Common, useful contents:
- Copyright line:
© 2026 Your Name(the©entity draws ©). - Legal links: Privacy Policy, Terms, Cookie settings. These are expected here, and ad networks such as AdSense look for them.
- Contact details: email, phone or address, wrapped in
<address>. - Key pages: a short list of the most important links, grouped under small headings.
- Social links: icons linking to your profiles.
- A newsletter sign-up, if you have one.
Step 3: A simple centered footer
For a small site, one centered block is plenty: a row of links and the copyright line underneath. Flexbox with flex-wrap keeps the links in a row that wraps neatly on phones.
Step 4: A multi-column footer with CSS grid
Bigger sites group footer links into columns. CSS grid does this in one rule, and it can switch to fewer columns on small screens automatically:
- Wrap each group in a
<div>(or<nav aria-label="…">for link groups) with a small heading. - On the container, set
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));. The browser fits as many 160px+ columns as there’s room for, so four columns on a laptop become two or one on a phone, without a media query. - Put the copyright line in a separate bar underneath, with a top border.
In this narrow preview the columns stack. Open it in the full editor and switch to Desktop to see them side by side.
Step 5: Keep the footer at the bottom of short pages
On a page with little content, the footer floats up into the middle of the screen with empty space below it. To push it to the bottom of the window (while still letting it sit after the content on long pages), make the body a column that’s at least as tall as the screen:
- On
body:min-height: 100vh; display: flex; flex-direction: column; margin: 0; - On
main:flex: 1. The main content grows to fill the spare space, which pushes the footer down.
This is not the same as a fixed footer that always covers the bottom of the screen; that hides content and is rarely what people want.
Keep the copyright year up to date
A footer that still says “© 2023” makes a site look abandoned. If your pages are plain HTML, a tiny script can fill in the current year:
Write the current year inside the span as well, so the text is still correct if JavaScript doesn’t run. Many people also write a range such as 2021–2026 to show when the site started.
Footer accessibility and SEO tips
- Label link groups. If the footer has several
<nav>groups, give each anaria-label(“Product”, “Company”), so screen reader users can tell them apart from the main menu. - Use real headings, but keep them small. Column titles can be headings (often
<h2>) styled small with CSS; don’t skip levels just to get a smaller default size. - Make contact details tappable. Wrap emails in
mailto:links and phone numbers intel:links so phones can act on them. - Link to pages that matter. Footer links appear on every page, so they help search engines discover your key pages. Keep the list focused rather than linking to everything.
- Keep it consistent. The same footer on every page builds trust and helps visitors find your privacy policy and contact details quickly.
Footer layouts compared
| Layout | How | Good for |
|---|---|---|
| Single centered block | Flexbox row of links + copyright line | Small sites, portfolios, landing pages |
| Multi-column | CSS grid with auto-fit / minmax | Sites with many sections, shops, businesses |
| Bottom of short pages | Body as a flex column, main { flex: 1 } | Any site with some short pages |
| Fixed to the screen | position: fixed; bottom: 0 | Rarely: cookie bars or app toolbars, not site footers |
Common footer mistakes
- Using
<div class="footer">instead of<footer>. The element tells browsers and screen readers what the section is. - Low-contrast text. Grey text on a dark footer is often too faint to read. Check the contrast like any other text.
- Tiny links on phones. Give footer links enough spacing to tap comfortably.
- A fixed footer covering content. Use the flexbox method above instead of
position: fixed. - An outdated copyright year. Update it, or let a script do it.
- Missing legal links. A privacy policy link in the footer is expected, and required by most ad and analytics services.