Learn how to use the HTML <footer> element to define closing content for a page or section, and understand its role in accessibility.
What it is
The <footer> element represents a footer for its nearest ancestor <article>, <aside>, <main>, <nav>, <section>, or <body> element. It typically contains information about the author, copyright data, links to related documents, or navigation aids.
Mental Model: Think of the footer as the "signature" or "closing remarks" of a specific block of content. Just as a book has a back cover with publisher info, a web section can have a footer with relevant metadata.
Related terms: <header>, <address>, Landmark Roles.
Why it matters
- Semantic Structure: Helps browsers and search engines understand the layout and hierarchy of your document.
- Accessibility: Screen readers identify footers as landmarks, allowing users to jump directly to this region using keyboard shortcuts.
- Reusability: You can nest multiple footers within different sections (e.g., one for the whole page, one for each blog post).
- Styling Hooks: Provides a clear CSS selector target for consistent styling of bottom-of-section content.
Syntax or steps
The basic syntax is simple. Place the opening tag before the content and the closing tag after.
<footer>
<p>Content goes here</p>
</footer>You can place a <footer> inside the <body> for a site-wide footer, or inside an <article> or <section> for a component-specific footer.
Example
Here is a realistic example showing both a page-level footer and an article-level footer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Footer Example</title>
</head>
<body>
<article>
<h1>Understanding HTML5</h1>
<p>HTML5 introduced semantic elements like header and footer.</p>
<!-- Article-specific footer -->
<footer>
<p>Written by Jane Doe on Jan 1, 2024</p>
<a href="/contact">Contact Author</a>
</footer>
</article>
<!-- Page-level footer -->
<footer>
<p>© 2024 My Website. All rights reserved.</p>
<nav>
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
</nav>
</footer>
</body>
</html>Explanation: The first <footer> belongs to the <article>. It provides metadata specific to that post (author, date). The second <footer> is a direct child of <body>, serving as the global site footer with copyright and legal links.
Common mistakes
- Using it only for visual styling: Do not use
<footer>just because you want gray text at the bottom. Use it when the content is semantically a footer (metadata, links, copyright). - Nesting incorrectly: A
<footer>cannot be a descendant of another<footer>,<header>, or<address>element. - Forgetting the address element: If the footer contains contact information for the author or organization, wrap it in an
<address>tag inside the footer for better semantics. - Assuming it's always at the bottom: While visually often placed at the bottom, the semantic meaning is "closing content," which might appear elsewhere depending on layout logic (though rare).
When to use it
Compare <footer> with generic <div> containers.
| Feature | <footer> | <div> |
|---|---|---|
| Semantic Meaning | High (Landmark) | None (Generic) |
| Accessibility | Screen reader navigable | Invisible to AT structure |
| Use Case | Closing metadata/links | Layout grouping only |
Use <footer> whenever the content serves as a conclusion or reference point for the preceding section. Use <div> only if there is no semantic relationship to the surrounding content.
Practice
Guided Exercise: Create a simple HTML page with a <section> containing a heading and paragraph. Add a <footer> inside that section listing two fictional sources.
Challenge: Modify the previous exercise to include a page-level footer outside the section. Ensure the screen reader order makes sense (Section Footer then Page Footer).
Hint: Check your code in a browser's accessibility inspector to see if the "contentinfo" landmark appears correctly.
Quick check
Question: Can a <footer> element contain interactive elements like buttons or forms?
Answer: Yes. The <footer> element can contain any flow content, including forms, buttons, and links, provided they are relevant to the closing context of the section.
Summary
The <footer> element is a semantic tool for defining closing content associated with a specific section or the entire page. By using it correctly, you improve accessibility for screen reader users and create a more structured, maintainable document.