← Back to All Tags

<footer>

Designates footer content regions for a document or section

✨ HTML5

Definition and Usage

The <footer> element establishes a footer for a document or section.

A <footer> element typically contains information about the author, copyright information, contact information, sitemap, back to top links, and related documents.

You can have several <footer> elements in one document - for example, one footer for the page and one footer for each article or section.

Tip: Contact information inside a <footer> element should be placed within an <address> tag.
Note: The <footer> element is new in HTML5 and provides semantic meaning to footer content.

Browser Support

The <footer> tag is supported in all major browsers:

Chrome
Chrome
5.0+
Firefox
Firefox
4.0+
Safari
Safari
5.0+
Edge
Edge
9.0+
Opera
Opera
11.1+

Attributes

The <footer> tag supports the Global Attributes in HTML.

The <footer> tag also supports the Event Attributes in HTML.

Examples

Basic Page Footer

Simple page footer with copyright information:

Example

<footer>
  <p>Copyright © 2024 My Website. All rights reserved.</p>
</footer>

Article Footer

Footer for an article with author and publication info:

Example

<article>
  <h2>Understanding HTML5 Semantic Elements</h2>
  <p>HTML5 introduces many new semantic elements...</p>

  <footer>
    <p>Author: John Doe</p>
    <p>Published: January 15, 2025</p>
    <p>Tags: HTML5, Web Development, Semantics</p>
  </footer>
</article>

Footer with Contact Information

Footer with address and contact details:

Example

<footer>
  <h3>Contact Us</h3>
  <address>
    <p>HTML Free Codes</p>
    <p>123 Web Street</p>
    <p>Internet City, IC 12345</p>
    <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
    <p>Phone: <a href="tel:+1234567890">(123) 456-7890</a></p>
  </address>
</footer>

Footer with Navigation Links

Footer with sitemap and navigation:

Example

<footer>
  <nav>
    <h3>Quick Links</h3>
    <ul>
      <li><a href="/about">About Us</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="/privacy">Privacy Policy</a></li>
    </ul>
  </nav>
  <p>© 2024 My Company</p>
</footer>

Footer with Copyright and Social Links

Complete footer with multiple sections:

Example

<footer>
  <div class="footer-content">
    <div class="footer-section">
      <h4>About Us</h4>
      <p>We are dedicated to providing quality HTML tutorials.</p>
    </div>

    <div class="footer-section">
      <h4>Follow Us</h4>
      <a href="https://facebook.com">Facebook</a>
      <a href="https://twitter.com">Twitter</a>
      <a href="https://linkedin.com">LinkedIn</a>
    </div>

    <div class="footer-section">
      <h4>Legal</h4>
      <a href="/terms">Terms of Service</a>
      <a href="/privacy">Privacy Policy</a>
    </div>
  </div>

  <div class="footer-bottom">
    <p>© 2024 HTML Free Codes. All rights reserved.</p>
  </div>
</footer>

Sticky Footer

Footer that stays at the bottom of the viewport:

Example

<style>
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
  }

  main {
    flex: 1;
  }

  footer {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
  }
</style>

<body>
  <header>
    <h1>My Website</h1>
  </header>

  <main>
    <p>Main content goes here...</p>
  </main>

  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>

Multi-Column Footer

Responsive multi-column footer layout:

Example

<style>
  footer {
    background: #2c3e50;
    color: white;
    padding: 40px 20px;
  }

  .footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .footer-column h4 {
    margin-bottom: 15px;
    color: #3498db;
  }

  .footer-column ul {
    list-style: none;
    padding: 0;
  }

  .footer-column a {
    color: white;
    text-decoration: none;
  }

  .footer-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #445566;
  }
</style>

<footer>
  <div class="footer-columns">
    <div class="footer-column">
      <h4>Company</h4>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Press</a></li>
      </ul>
    </div>

    <div class="footer-column">
      <h4>Resources</h4>
      <ul>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>

    <div class="footer-column">
      <h4>Support</h4>
      <ul>
        <li><a href="#">Help Center</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div>

    <div class="footer-column">
      <h4>Legal</h4>
      <ul>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Terms of Service</a></li>
        <li><a href="#">Cookie Policy</a></li>
      </ul>
    </div>
  </div>

  <div class="footer-bottom">
    <p>© 2024 My Company. All rights reserved.</p>
  </div>
</footer>

Footer Placement and Structure

  • Page Footer: Placed at the end of the <body> element, contains site-wide footer information
  • Article Footer: Placed at the end of an <article> element, contains article metadata
  • Section Footer: Placed at the end of a <section> element, contains section-specific information
  • Multiple Footers: A document can have multiple footers - one for the page and others for articles/sections
  • Nested Elements: Footers can contain navigation, headings, paragraphs, lists, and other elements

Page Footer vs Article/Section Footer

Page Footer

  • Placed at document bottom
  • Site-wide information
  • Copyright notice
  • Contact information
  • Site navigation links
  • Social media links
  • Usually styled with background

Article/Section Footer

  • Placed within article/section
  • Content-specific metadata
  • Author information
  • Publication date
  • Tags and categories
  • Related content links
  • Usually minimal styling

Styling Footers with CSS

Common styling patterns for footer elements:

Example - Modern Footer Styles

/* Basic footer styling */
footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 40px 20px 20px;
  margin-top: 60px;
}

/* Footer links */
footer a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: #2ecc71;
}

/* Footer headings */
footer h3, footer h4 {
  color: #3498db;
  margin-bottom: 15px;
}

/* Footer navigation */
footer nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Footer sections layout */
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 30px;
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid #445566;
  padding-top: 20px;
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
}

/* Responsive footer */
@media (max-width: 768px) {
  footer {
    padding: 30px 15px 15px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  footer nav ul {
    flex-direction: column;
    gap: 10px;
  }
}

/* Dark mode footer */
@media (prefers-color-scheme: dark) {
  footer {
    background-color: #1a1a1a;
    border-top: 1px solid #333;
  }
}

Common Footer Content

  • Copyright Information: Copyright notices and year
  • Contact Details: Email, phone, address within <address> tag
  • Navigation Links: Sitemap, quick links, important pages
  • Social Media Links: Links to social media profiles
  • Legal Links: Privacy policy, terms of service, cookie policy
  • Newsletter Signup: Email subscription forms
  • Back to Top: Link to scroll back to the top of the page
  • Company Information: About the company or website
  • Badges/Certifications: Trust badges, payment methods, certifications

Best Practices

  • Use <footer> for footer content instead of generic divs
  • Include copyright information with the current year
  • Place contact information within an <address> tag
  • Use <nav> for footer navigation menus
  • Keep footer content organized and easy to scan
  • Ensure footer links are accessible and keyboard-navigable
  • Make footer responsive for mobile devices
  • Use consistent styling across all footers on your site
  • Include important links like privacy policy and terms
  • Test footer appearance in different screen sizes
  • Don't nest a footer within another footer
  • Use semantic HTML for better SEO and accessibility

Accessibility Benefits

  • Screen readers can identify and navigate to footers
  • Provides semantic structure for assistive technologies
  • Helps users understand document organization
  • Improves keyboard navigation
  • Better landmark navigation for screen reader users
  • Clearer separation of main content from footer content

SEO Benefits

  • Search engines understand page structure better
  • Helps identify supplementary vs main content
  • Internal links in footer contribute to site architecture
  • Contact information improves local SEO
  • Semantic HTML is favored by search algorithms
  • Better crawlability of footer links

Try it Yourself

Interactive Example

Here's a live example of a styled footer:

Company

About Us

Careers

Resources

Blog

Tutorials

Support

Contact

FAQ

Copyright 2024 Example Company. All rights reserved.

Default CSS Settings

Most browsers will display the <footer> element with the following default values:

Default CSS

footer {
  display: block;
}

Related Tags