<footer>

Designates footer content regions for a document or section

✨ HTML5

Quick Answer

What is the HTML <footer> tag?

The <footer> tag defines footer content for pages or sections, typically containing copyright info, contact details, sitemap links, or social media icons. Multiple footers can exist in a document for different sections. This HTML5 semantic element improves navigation, accessibility, and SEO structure.

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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Try in Code Playground

Default CSS Settings

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

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

footer {
  display: block;
}

Related Tags

<header>
Defines a header section
<article>
Defines an article
<section>
Defines a section
<address>
Defines contact information
<nav>
Defines navigation links