Syntax
<footer>
<p>© 2026 Company Name</p>
</footer>Examples
Page Footer
A typical site-wide footer with copyright and links.
<footer>
<p>© 2026 Codectionary. All rights reserved.</p>
<nav>
<a href="/terms">Terms</a>
<a href="/privacy">Privacy</a>
</nav>
</footer>Article Footer
A footer scoped to a single article, containing author info.
<article>
<h2>10 CSS Tricks You Should Know</h2>
<p>Article content goes here...</p>
<footer>
<p>Written by Alex Chen. Posted in <a href="/category/css">CSS</a>.</p>
</footer>
</article>Styled Footer
A page footer with basic layout styling.
<footer style="display: flex; justify-content: space-between; padding: 24px; background: #111827; color: #9ca3af; font-size: 14px;">
<span>© 2026 Codectionary</span>
<span>Made with care in Manchester</span>
</footer>Best practices
- Use <footer> for closing/supplementary content, not as a generic bottom-of-page wrapper for unrelated content
- A <footer> can appear inside an <article> or <section>, not just at the very bottom of the page
- <footer> should not be nested inside <header> or another <footer>
- Include meaningful contact or copyright information rather than leaving it purely decorative
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<header>
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.<article>
The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.<article>
The <article> element represents a self-contained piece of content that could theoretically be distributed or reused independently — like a blog post, news story, forum post, or product card. The key test is whether the content would still make sense if syndicated on its own, separate from the rest of the page. Articles can be nested (e.g., a blog post article containing comment articles).