The <footer> element
The <footer> tag represents closing content for its nearest ancestor — typically copyright info, related links, or contact details at the page level, or author info at the end of an <article>. Like <header>, a page can have more than one.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, palpable content |
| Content model | Flow content, but no nested <header> or <footer> elements |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts flow content, but not a descendant of <address>, <header>, or <footer> |
| DOM interface | HTMLElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | <footer> has no attributes of its own — only the global attributes shared by every HTML element. |
Common examples
A site footer
Copyright, contact details and a few useful links: the standard bottom-of-page footer.
An article footer
Articles can end with their own footer for the author, tags or related links.
Keep the footer at the bottom of short pages
Make the page a flex column and let the main content grow, so the footer stays at the bottom even when there’s little content.
Contact details in the footer
Wrap the site owner’s contact details in an <address> element inside the footer.
<footer> vs <aside>
Both hold “extra” content, but in different places and for different reasons. A <footer> closes its page or section: who wrote it, copyright, related links, contact details. An <aside> holds content that is related but separate from the main flow — a sidebar, a pull quote or a “did you know?” box — and can appear anywhere.
A quick test: if the content sums up or closes something, it’s a footer. If you could remove it and the main text would still make complete sense, it’s probably an aside.
| <footer> | <aside> | |
|---|---|---|
| Role | Closing information | Related side content |
| Position | End of page or section | Anywhere |
| Examples | Copyright, author, contact | Sidebar, pull quote, tips |
Common mistakes to avoid
- Putting main content in the footer. Important text belongs in <main>; footers are for supporting information.
- Nesting a
<header>or another footer inside a footer. That isn’t allowed. - Stuffing the footer with dozens of keyword links. Huge “link farms” look spammy to visitors and to Google; keep footer links genuinely useful.
- A copyright year that’s out of date. “© 2019” on a live site looks abandoned; update it each year or set it with JavaScript.
Accessibility & SEO tips
- The page-level footer becomes the “contentinfo” landmark, so screen reader users can jump straight to contact and legal links.
- Wrap contact details in an <address> element so their purpose is clear.
- A small set of useful footer links (About, Contact, Privacy) helps visitors and search engines find your key pages from anywhere on the site.
Browser support
Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds.
Tutorial: How to make a footer