<footer> contains information about its surrounding page or section, such as authorship, related links, or copyright. It does not automatically sit at the bottom of the viewport.
Two scopes
The article footer gives article information. The page footer gives site information.
HTML and CSS
HTML
<main>
<article>
<h1>Watering seedlings</h1>
<p>Check the soil before adding water.</p>
<footer><p>Written by Alex Example</p></footer>
</article>
</main>
<footer><p>Garden notes · Example site</p></footer>CSS
footer {
border-top: 1px solid #94a3b8;
margin-top: 1rem;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Structure and accessibility
A page-level footer normally exposes a content-information landmark. A footer inside sectioning content or main is local information and is not another global footer landmark. Inspect this distinction in the accessibility tree.
It accepts flow content but cannot contain another footer or a header. A footer does not introduce a new section or replace a heading. Contact details for the page or article author can be enclosed in address.
Common mistakes
Do not use a footer merely to move content to the bottom of a box; CSS controls positioning. Use tfoot for a table summary. Keep important instructions in the content where readers need them rather than placing them in a region readers may skip.
Sources and browser support
MDN: footer describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.