<footer> - Footer Element

The `<footer>` Element

Landmark HTML5

The <footer> element represents footer content for its nearest sectioning element or the document as a whole. It typically contains information about the author, copyright, links to related documents, or contact information. Like headers, you can have multiple footer elements in a document.

Quick Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<main>
  <h1>Welcome to My Website</h1>
  <p>Main content goes here...</p>
</main>

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <nav>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
    <a href="/contact">Contact</a>
  </nav>
</footer>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<main>
  <h1>Welcome to My Website</h1>
  <p>Main content goes here...</p>
</main>

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <nav>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
    <a href="/contact">Contact</a>
  </nav>
</footer>
</body>
</html>

Syntax

<footer>
  <!-- Footer content: copyright, links, contact info, etc. -->
</footer>

Attributes

Element-Specific Attributes

The <footer> element has no element-specific attributes.

Global Attributes

This element supports all global attributes.

Common Use Cases

The most common use is a page footer with copyright and links:

<footer style="background: #333; color: white; padding: 2rem;">
<div style="max-width: 1200px; margin: 0 auto;">
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
    <div>
      <h3>About Us</h3>
      <p>We create amazing web experiences for our customers worldwide.</p>
    </div>

    <div>
      <h3>Quick Links</h3>
      <nav>
        <a href="/about" style="display: block; color: white; margin: 0.5rem 0;">About</a>
        <a href="/services" style="display: block; color: white; margin: 0.5rem 0;">Services</a>
        <a href="/contact" style="display: block; color: white; margin: 0.5rem 0;">Contact</a>
      </nav>
    </div>

    <div>
      <h3>Contact</h3>
      <p>Email: info@example.com<br>
      Phone: (123) 456-7890</p>
    </div>
  </div>

  <hr style="margin: 2rem 0; border-color: #555;">

  <p style="text-align: center;">&copy; 2025 Company Name. All rights reserved.</p>
</div>
</footer>

Result

Interactive code playground requires JavaScript. Here's the code:

<footer style="background: #333; color: white; padding: 2rem;">
<div style="max-width: 1200px; margin: 0 auto;">
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
    <div>
      <h3>About Us</h3>
      <p>We create amazing web experiences for our customers worldwide.</p>
    </div>

    <div>
      <h3>Quick Links</h3>
      <nav>
        <a href="/about" style="display: block; color: white; margin: 0.5rem 0;">About</a>
        <a href="/services" style="display: block; color: white; margin: 0.5rem 0;">Services</a>
        <a href="/contact" style="display: block; color: white; margin: 0.5rem 0;">Contact</a>
      </nav>
    </div>

    <div>
      <h3>Contact</h3>
      <p>Email: info@example.com<br>
      Phone: (123) 456-7890</p>
    </div>
  </div>

  <hr style="margin: 2rem 0; border-color: #555;">

  <p style="text-align: center;">&copy; 2025 Company Name. All rights reserved.</p>
</div>
</footer>

Article Footer with Author Info

Footers can contain article metadata, author bio, or related links:

<article>
<header>
  <h2>Understanding JavaScript Closures</h2>
  <p>By Jane Doe | March 15, 2025</p>
</header>

<p>Closures are a fundamental concept in JavaScript that every developer should understand...</p>

<footer style="border-top: 1px solid #ccc; padding-top: 1rem; margin-top: 2rem;">
  <h3>About the Author</h3>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <img src="author.jpg" alt="Jane Doe" style="width: 60px; height: 60px; border-radius: 50%;">
    <div>
      <p><strong>Jane Doe</strong> is a senior web developer with 10 years of experience in JavaScript and web technologies.</p>
      <p>
        <a href="/author/jane">More articles by Jane</a> |
        <a href="https://twitter.com/janedoe">@janedoe</a>
      </p>
    </div>
  </div>

  <p style="margin-top: 1rem;">
    <small>Published: March 15, 2025 | Last updated: March 15, 2025</small>
  </p>
</footer>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<header>
  <h2>Understanding JavaScript Closures</h2>
  <p>By Jane Doe | March 15, 2025</p>
</header>

<p>Closures are a fundamental concept in JavaScript that every developer should understand...</p>

<footer style="border-top: 1px solid #ccc; padding-top: 1rem; margin-top: 2rem;">
  <h3>About the Author</h3>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <img src="author.jpg" alt="Jane Doe" style="width: 60px; height: 60px; border-radius: 50%;">
    <div>
      <p><strong>Jane Doe</strong> is a senior web developer with 10 years of experience in JavaScript and web technologies.</p>
      <p>
        <a href="/author/jane">More articles by Jane</a> |
        <a href="https://twitter.com/janedoe">@janedoe</a>
      </p>
    </div>
  </div>

  <p style="margin-top: 1rem;">
    <small>Published: March 15, 2025 | Last updated: March 15, 2025</small>
  </p>
</footer>
</article>

Section Footer with Navigation

Footers for sections containing navigation or summary links:

<section>
<h2>Product Catalog</h2>

<div>
  <article>
    <h3>Product A</h3>
    <p>Description of product A...</p>
  </article>

  <article>
    <h3>Product B</h3>
    <p>Description of product B...</p>
  </article>
</div>

<footer style="margin-top: 2rem; padding: 1rem; background: #f5f5f5;">
  <p>Showing 2 of 50 products</p>
  <nav>
    <a href="/products?page=1">Previous</a> |
    <a href="/products?page=2">1</a>
    <a href="/products?page=3">2</a>
    <a href="/products?page=4">3</a> |
    <a href="/products?page=3">Next</a>
  </nav>
</footer>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h2>Product Catalog</h2>

<div>
  <article>
    <h3>Product A</h3>
    <p>Description of product A...</p>
  </article>

  <article>
    <h3>Product B</h3>
    <p>Description of product B...</p>
  </article>
</div>

<footer style="margin-top: 2rem; padding: 1rem; background: #f5f5f5;">
  <p>Showing 2 of 50 products</p>
  <nav>
    <a href="/products?page=1">Previous</a> |
    <a href="/products?page=2">1</a>
    <a href="/products?page=3">2</a>
    <a href="/products?page=4">3</a> |
    <a href="/products?page=3">Next</a>
  </nav>
</footer>
</section>

A footer containing social media links and newsletter signup:

<footer style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3rem 1rem;">
<div style="max-width: 800px; margin: 0 auto; text-align: center;">
  <h2>Stay Connected</h2>
  <p>Follow us on social media for the latest updates</p>

  <div style="margin: 2rem 0;">
    <a href="#" style="color: white; margin: 0 0.5rem; font-size: 1.5rem;">📘</a>
    <a href="#" style="color: white; margin: 0 0.5rem; font-size: 1.5rem;">🐦</a>
    <a href="#" style="color: white; margin: 0 0.5rem; font-size: 1.5rem;">📷</a>
    <a href="#" style="color: white; margin: 0 0.5rem; font-size: 1.5rem;">💼</a>
  </div>

  <form style="margin: 2rem 0;">
    <input type="email" placeholder="Enter your email" style="padding: 0.5rem; width: 250px; border: none; border-radius: 4px 0 0 4px;">
    <button style="padding: 0.5rem 1rem; background: #333; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer;">Subscribe</button>
  </form>

  <p>&copy; 2025 Your Company. All rights reserved.</p>
</div>
</footer>

Result

Interactive code playground requires JavaScript. Here's the code:

<footer style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3rem 1rem;">
<div style="max-width: 800px; margin: 0 auto; text-align: center;">
  <h2>Stay Connected</h2>
  <p>Follow us on social media for the latest updates</p>

  <div style="margin: 2rem 0;">
    <a href="#" style="color: white; margin: 0 0.5rem; font-size: 1.5rem;">📘</a>
    <a href="#" style="color: white; margin: 0 0.5rem; font-size: 1.5rem;">🐦</a>
    <a href="#" style="color: white; margin: 0 0.5rem; font-size: 1.5rem;">📷</a>
    <a href="#" style="color: white; margin: 0 0.5rem; font-size: 1.5rem;">💼</a>
  </div>

  <form style="margin: 2rem 0;">
    <input type="email" placeholder="Enter your email" style="padding: 0.5rem; width: 250px; border: none; border-radius: 4px 0 0 4px;">
    <button style="padding: 0.5rem 1rem; background: #333; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer;">Subscribe</button>
  </form>

  <p>&copy; 2025 Your Company. All rights reserved.</p>
</div>
</footer>

Footer with tags, categories, and sharing options:

<article>
<header>
  <h1>10 CSS Tricks Every Developer Should Know</h1>
</header>

<p>Article content goes here...</p>

<footer style="border-top: 2px solid #eee; padding-top: 2rem; margin-top: 2rem;">
  <div style="margin-bottom: 1rem;">
    <strong>Categories:</strong>
    <a href="/category/css">CSS</a>,
    <a href="/category/web-development">Web Development</a>
  </div>

  <div style="margin-bottom: 1rem;">
    <strong>Tags:</strong>
    <a href="/tag/css">#CSS</a>
    <a href="/tag/tricks">#Tricks</a>
    <a href="/tag/tutorial">#Tutorial</a>
  </div>

  <div>
    <strong>Share:</strong>
    <button>Twitter</button>
    <button>Facebook</button>
    <button>LinkedIn</button>
    <button>Copy Link</button>
  </div>
</footer>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<header>
  <h1>10 CSS Tricks Every Developer Should Know</h1>
</header>

<p>Article content goes here...</p>

<footer style="border-top: 2px solid #eee; padding-top: 2rem; margin-top: 2rem;">
  <div style="margin-bottom: 1rem;">
    <strong>Categories:</strong>
    <a href="/category/css">CSS</a>,
    <a href="/category/web-development">Web Development</a>
  </div>

  <div style="margin-bottom: 1rem;">
    <strong>Tags:</strong>
    <a href="/tag/css">#CSS</a>
    <a href="/tag/tricks">#Tricks</a>
    <a href="/tag/tutorial">#Tutorial</a>
  </div>

  <div>
    <strong>Share:</strong>
    <button>Twitter</button>
    <button>Facebook</button>
    <button>LinkedIn</button>
    <button>Copy Link</button>
  </div>
</footer>
</article>

Best Practices

Use for Closing Content

The footer should contain closing or supplementary information:

<!-- Good: Footer with supplementary info -->
<article>
  <h2>Article Title</h2>
  <p>Main content...</p>
  <footer>
    <p>Author: Jane Doe</p>
    <p>Published: 2025-03-15</p>
  </footer>
</article>

<!-- Avoid: Primary content in footer -->
<footer>
  <h1>Main Article Content</h1>
  <p>The entire article should not be in the footer...</p>
</footer>

You can have multiple footers in a document:

<body>
  <main>
    <!-- Article footer (not a landmark) -->
    <article>
      <h2>Article Title</h2>
      <p>Content...</p>
      <footer>
        <p>Author: Jane Doe</p>
      </footer>
    </article>

    <!-- Section footer (not a landmark) -->
    <section>
      <h2>Section Title</h2>
      <p>Content...</p>
      <footer>
        <p>Section metadata</p>
      </footer>
    </section>
  </main>

  <!-- Page footer (contentinfo landmark) -->
  <footer>
    <p>&copy; 2025 Company Name</p>
  </footer>
</body>

Don’t Nest Footers

Avoid nesting <footer> elements:

<!-- Wrong: Nested footers -->
<footer>
  <footer>
    <p>Copyright info</p>
  </footer>
</footer>

<!-- Correct: No nesting -->
<footer>
  <div class="copyright">
    <p>&copy; 2025 Company</p>
  </div>
  <div class="links">
    <a href="/privacy">Privacy</a>
  </div>
</footer>

Footers can’t be descendants of <header> or <address> elements:

<!-- Wrong: Footer inside header -->
<header>
  <h1>Site Name</h1>
  <footer>Copyright info</footer>
</header>

<!-- Correct: Separate elements -->
<header>
  <h1>Site Name</h1>
</header>
<footer>
  <p>Copyright info</p>
</footer>

Accessibility

Contentinfo Landmark

A <footer> element at the page level (direct child of <body>) becomes a contentinfo landmark:

<!-- This is a contentinfo landmark -->
<body>
  <main>Content</main>
  <footer>
    <p>&copy; 2025 Company</p>
  </footer>
</body>

Not Always a Landmark

Footers inside sectioning elements (<article>, <aside>, <main>, <nav>, <section>) are NOT landmarks:

<main>
  <!-- This footer is NOT a landmark -->
  <article>
    <h2>Article Title</h2>
    <p>Content...</p>
    <footer>
      <p>Author info</p>
    </footer>
  </article>
</main>

Contact Information

Use <address> for contact information within footers:

<footer>
  <address>
    <p>Contact us at:</p>
    <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
    <p>Phone: <a href="tel:+11234567890">(123) 456-7890</a></p>
  </address>
  <p>&copy; 2025 Company Name</p>
</footer>

Footer navigation should be properly labeled:

<footer>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
    <a href="/sitemap">Sitemap</a>
  </nav>
  <p>&copy; 2025 Company</p>
</footer>

Browser Support

Browser	Version
Chrome	5+
Firefox	4+
Safari	5+
Edge	All versions
IE	9+

Represents introductory content for its section. Learn more →

Contact information, often used in footers. Learn more →

Self-contained content that can have footers. Learn more →

Common Mistakes

<!-- Limited: Only copyright -->
<footer>
  <p>&copy; 2025 Company</p>
</footer>

<!-- Better: More useful footer content -->
<footer>
  <nav aria-label="Footer">
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
    <a href="/privacy">Privacy</a>
  </nav>
  <address>
    Email: <a href="mailto:[email protected]">[email protected]</a>
  </address>
  <p>&copy; 2025 Company. All rights reserved.</p>
</footer>

Putting All End Content in Footer

<!-- Wrong: Unrelated end content in footer -->
<main>
  <h1>Article</h1>
  <p>Content...</p>
</main>
<footer>
  <section>
    <h2>Related Articles</h2>
    <!-- This should be in main, not footer -->
  </section>
  <p>&copy; 2025</p>
</footer>

<!-- Correct: Only footer-appropriate content -->
<main>
  <article>
    <h1>Article</h1>
    <p>Content...</p>
  </article>

  <section>
    <h2>Related Articles</h2>
    <!-- Related content in main -->
  </section>
</main>
<footer>
  <p>&copy; 2025</p>
</footer>

Multiple Page Footers

<!-- Wrong: Multiple page-level footers -->
<body>
  <main>Content</main>
  <footer>Footer 1</footer>
  <footer>Footer 2</footer>
</body>

<!-- Correct: One page footer -->
<body>
  <main>Content</main>
  <footer>
    <div>Section 1</div>
    <div>Section 2</div>
  </footer>
</body>

<footer> - Footer Element

The `<footer>` Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Common Use Cases

Site-Wide Page Footer

Article Footer with Author Info

Section Footer with Navigation

Best Practices

Use for Closing Content

Page Footer vs. Section Footers

Don’t Nest Footers

Footer Placement

Accessibility

Contentinfo Landmark

Not Always a Landmark

Contact Information

Navigation in Footers

Browser Support

Common Mistakes

Using Footer Only for Copyright

Putting All End Content in Footer

Multiple Page Footers

Specifications

<footer> - Footer Element

The <footer> Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Common Use Cases

Site-Wide Page Footer

Article Footer with Author Info

Section Footer with Navigation

Footer with Social Links

Blog Post Footer with Tags and Share

Best Practices

Use for Closing Content

Page Footer vs. Section Footers

Don’t Nest Footers

Footer Placement

Accessibility

Contentinfo Landmark

Not Always a Landmark

Contact Information

Navigation in Footers

Browser Support

Related Elements

Common Mistakes

Using Footer Only for Copyright

Putting All End Content in Footer

Multiple Page Footers

Specifications

The `<footer>` Element