HTML footer Tag Explained: Usage, Examples & Best Practices
Introduction
When building a webpage, you’re not just adding content—you’re organizing it in a way that makes sense to users and search engines. That’s where HTML semantic elements come in.
Instead of relying only on <div>, modern HTML uses tags like <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to define different parts of a webpage clearly.
Learn basics: /html-basics
The HTML footer tag is used to define the bottom section of a webpage or a section. It usually contains information like copyright, links, and contact details.
Think of <footer> like the closing section of a book—it wraps everything up and provides additional useful information.
What is footer Tag?
The <footer> tag is a semantic HTML element used to define the bottom section of a webpage or a section, typically containing copyright, contact information, and navigation links.
The <footer> element provides supporting information about the page or section.
It often includes:
- Copyright text
- Contact information
- Social media links
- Footer navigation
- Legal links (privacy policy, terms)
Learn semantic HTML: /semantic-html-guide
The <footer> tag defines the bottom section of a webpage, usually containing copyright, contact info, and important links.
Basic Syntax of footer
Here is a simple footer tag example:
<footer>
<p>© 2026 My Website</p>
</footer>Explanation (Line by Line)
<footer>→ Starts the footer section<p>→ Displays footer text</footer>→ Ends the footer section
This creates a basic footer at the bottom of your page.
Where to Use footer Tag
The <footer> tag is used at the bottom of a webpage or section to provide additional information like copyright, links, and contact details.
The <footer> tag is flexible and can be used in multiple places.
Page Footer (Most Common)
<footer>
<p>© 2026 My Website</p>
</footer>Appears at the bottom of the entire page.
Inside Articles
<article>
<h2>HTML Guide</h2>
<p>Content goes here...</p>
<footer>
<p>Author: John Doe</p>
</footer>
</article>Provides metadata about the article.
Inside Sections
<section>
<h2>Services</h2>
<p>We offer web design...</p>
<footer>
<p>Contact us for more info</p>
</footer>
</section>Footer Navigation
<footer>
<nav>
<a href="#">Privacy Policy</a>
<a href="#">Terms</a>
</nav>
</footer>Real-World Examples
Let’s look at practical uses of the HTML footer tag.
Example 1: Full Website Footer
<footer>
<div>
<h3>About Us</h3>
<p>We build websites.</p>
</div>
<div>
<h3>Quick Links</h3>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
<div>
<h3>Follow Us</h3>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
</div>
<p>© 2026 My Website</p>
</footer>Why this works:
- Organized layout
- Useful links
- User-friendly
Example 2: Minimal Footer
<footer>
<p>© 2026 | All Rights Reserved</p>
</footer><footer>
<p>© 2026 | All Rights Reserved</p>
</footer>Explanation:
- Clean and simple
- Works well for small websites
footer vs div
Learn more: /html-tags-guide
| Feature | <footer> | <div> |
|---|---|---|
| Meaning | Semantic | Non-semantic |
| Purpose | Bottom section | General container |
| SEO | Better | Poor |
| Accessibility | High | Low |
Simple Explanation:
<footer>→ Defines end of content<div>→ Generic layout container
Best Practices
Follow these tips to use <footer> effectively:
1. Use for Closing Content
Only include content relevant to the end of the page or section.
2. Keep It Organized
Divide footer into sections:
- Links
- About
- Contact
3. Include Important Links
Such as:
- Privacy Policy
- Terms
- Contact
4. Avoid Overcrowding
Too many links can overwhelm users.
5. Use Semantic Elements Inside
Combine with:
<nav><section>
Common Mistakes
Using <footer> for Main Content
Footer is not for primary content.
Overloading with Links
Too many links reduce usability.
Ignoring Structure
Unorganized footer hurts UX.
SEO Benefits of footer
Using the footer tag in HTML improves SEO.
1. Better Structure
Search engines understand page layout.
2. Improved Navigation
Footer links help users and bots explore pages.
3. Enhanced Accessibility
Screen readers identify footer easily.
4. Trust Signals
Including contact info and policies improves credibility.
FAQs Section
1. What is the footer tag in HTML?
The <footer> tag defines the bottom section of a webpage.
2. Can I use multiple <footer> tags?
Yes, each section or article can have its own footer.
3. What should be inside <footer>?
Copyright, links, contact info, and legal pages.
4. Is <footer> important for SEO?
Yes, it improves structure and navigation.
5. Can <footer> contain <nav>?
Yes, it is commonly used for footer navigation.