HTML <footer> Tag

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 3 Examples
Document Structure
HTML footer tag tutorial — semantic page footer with copyright and navigation
Overview

What You’ll Learn

By the end of this tutorial, you’ll build semantic page footers with copyright, navigation, and contact information.

In web development, the <footer> tag plays a crucial role in structuring the bottom section of a webpage. This guide explores syntax, attributes, accessibility, and best practices for beginners and web developers alike.

01

Core Syntax

Wrap footer content in <footer> tags.

02

Copyright Notices

Display ownership and legal text at the page bottom.

03

Footer Navigation

Link to important pages with nav inside footer.

04

Contact Info

Pair footer with address for email and links.

05

CSS Styling

Visually separate footer from main content.

06

Landmark Role

Understand contentinfo for assistive tech.

Fundamentals

What Is the <footer> Tag?

The footer element (<footer>) is a semantic HTML5 tag that defines a footer for its nearest sectioning ancestor or the page. It typically contains metadata, copyright information, navigation links, contact details, or any content that belongs at the bottom of a section.

💡
Page footer vs section footer

A footer at the page level wraps site-wide copyright and links. A footer inside article or section applies only to that block — such as author info or publication date.

When used as the page footer, browsers expose a contentinfo landmark for screen readers. Common child elements include <p>, <nav>, and <address>.

Foundation

📝 Syntax

Enclose footer content between opening and closing <footer> tags, usually after <main>:

syntax.html
<footer>
  <!-- Your footer content here -->
</footer>

Syntax Rules

  • Place the page-level footer after <main> when possible.
  • Use one primary page footer per document for clear landmarks.
  • Label footer navigation with aria-label on nav (e.g. aria-label="Footer").
  • Do not confuse <footer> with the site template file named footer — they are different concepts.
Cheat Sheet

⚡ Quick Reference

PatternCode SnippetNotes
Copyright<footer><p>&copy; 2026...</p>Most common page footer
Footer nav<footer><nav><ul>...</ul>Secondary site links
Contact block<footer><address>...</address>Email or physical contact
Article footer<article><footer>...</footer>Scoped to the article
Landmark rolecontentinfoImplicit for page footer
Tag-specific attrsNoneGlobal attributes only
Reference

🧰 Attributes

The <footer> tag has no tag-specific attributes. Use global attributes and semantic child elements inside the footer:

class / id Global

CSS hooks for layout, background, and spacing of the footer block.

class="site-footer"
aria-labelledby A11y

Labels the footer landmark when multiple footers exist on one page.

aria-labelledby="footer-heading"
lang Global

Language of footer text when it differs from the document.

lang="en"
Child elements Content

Use nav, p, address, and links inside footer.

<nav aria-label="Footer">

Style and structure the footer with CSS and child elements — not with obsolete presentational tags like font.

Hands-On

Examples Gallery

Copyright notices, footer navigation, and complete site footers with copy-ready code and live previews.

Live Preview

A simple page footer with copyright text:

© 2026 Your Website Name. All rights reserved.

📚 Common Use Cases

Use <footer> for site-wide copyright lines, footer navigation menus, social media links, legal pages (Privacy, Terms), contact email via address, and article-level author or publication metadata at the bottom of blog posts.

Navigation Links

Including navigation links in the footer gives users quick access to important sections of your website.

navigation-links.html
<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</footer>
Try It Yourself

Complete Site Footer

Combine footer navigation, copyright, and contact information in one semantic block.

complete-site-footer.html
<footer>
  <nav aria-label="Footer">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <p>&copy; 2026 Your Website Name. All rights reserved.</p>
  <address>
    Contact us at <a href="mailto:info@example.com">info@example.com</a>
  </address>
</footer>
Try It Yourself
Design

Styling <footer> with CSS

Visually distinguish the footer from main content with spacing, borders, and background:

border-top Separate from main
padding Comfortable spacing
footer nav Horizontal link row
background Dark footer bar
footer-styles.css
/* Site footer styling */
footer.site-footer {
  margin-top: 2rem;
  padding: 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 0.875rem;
  color: #64748b;
}

footer nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0 0 0.75rem;
}

footer address {
  font-style: normal;
  margin-top: 0.5rem;
}

Live styled footer

A11y

♿ Accessibility

Semantic footers help all users find page metadata:

  • Use one page footer — a single contentinfo landmark per page is clearest for screen readers.
  • Label footer nav — add aria-label="Footer" when header and footer both contain nav.
  • Keep links descriptive — avoid vague link text like “Click here” in footer menus.
  • Place after main — put footer after main in the DOM for logical reading order.

🧠 How <footer> Works

1

Author marks the footer region

Wrap copyright, links, and contact info in footer.

Markup
2

Browser exposes a landmark

Page-level footers map to the contentinfo landmark for assistive tech.

Accessibility
3

CSS styles the footer block

Borders, backgrounds, and flex layouts visually separate footer from main content.

Design
=

Organized, accessible pages

Users and search engines understand where page metadata lives.

Compatibility

Universal Browser Support

The <footer> element is fully supported in all modern browsers and Internet Explorer 9+.

✓ Baseline · HTML5 Semantic

Footer landmarks that work everywhere

From legacy Internet Explorer to the latest mobile browsers — footer is a safe HTML5 building block for page structure.

100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 9+ · Legacy environments
Full support
Opera All modern versions
Full support
<footer> tag 100% supported

Bottom line: Ship semantic page footers with confidence. The <footer> element is safe to use in every production environment today.

Wrap Up

Conclusion

Understanding the purpose and implementation of the <footer> tag is essential for creating well-structured and user-friendly webpages. Whether displaying copyright information or providing easy navigation links, footer contributes to a cohesive and organized website layout.

Use one clear page footer after main, label footer navigation for accessibility, and style the block with CSS so it is visually distinct from your primary content.

View Examples Gallery Try complete site footer
Pro Tips

💡 Best Practices

✅ Do

  • Use footer for copyright, footer nav, and contact info
  • Place page footer after main in the DOM
  • Add aria-label on footer nav elements
  • Style footer to visually distinguish it from main content

❌ Don’t

  • Put primary page content inside footer
  • Use multiple unlabeled page-level footers without reason
  • Duplicate the entire header nav in footer without purpose
  • Replace semantic footer with a plain div
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <footer>

Bookmark these before you ship — they’ll keep your page structure semantic and accessible.

6
Core concepts
📋 01

Page Footer

<footer> holds bottom-of-page metadata.

Foundation
© 02

Copyright

Common home for legal and ownership text.

Use Case
🔗 03

Footer Nav

Secondary links with labeled nav.

Navigation
📧 04

Contact Info

Pair with address for email links.

Content
♿ 05

contentinfo

Implicit landmark for page footers.

Accessibility
🌐 06

Universal Support

HTML5 semantic element with full browser support.

Compatibility
🎯 You’re ready to build semantic page footers
Review Quick Reference →

❓ Frequently Asked Questions

It defines a footer for its nearest section or the page — typically copyright, navigation links, and contact details.
Yes. A footer inside article or section applies to that block only — for author info, dates, or tags.
footer is semantic with a contentinfo landmark. div is a generic container with no built-in meaning.
No tag-specific attributes exist. Use global attributes like class, id, and aria-labelledby.
Yes. footer is fully supported in all modern browsers and Internet Explorer 9 and later.

Build Semantic Footers

Add copyright, navigation, and contact info with footer in the interactive HTML editor.

Try complete site footer →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML font Tag HTML form Tag