HTML Footer Tag: Syntax, Usage, and Examples

The HTML footer tag defines the footer section of a webpage or content area. You typically use it to include information such as contact details, copyright notices, navigation links, or related documents. The HTML footer tag is a semantic element, which means it tells browsers, developers, and screen readers that the content inside represents the footer of a section or page.

How to Use the HTML Footer Tag

The basic syntax of the footer tag HTML is straightforward:

<footer>
  <p>© 2025 MyWebsite. All rights reserved.</p>
</footer>

You can place a <footer> tag at the bottom of a web page or inside any <article>, <section>, <aside>, or <main> element. This allows you to define both global and local footers throughout your HTML document.

<article>
  <h2>Article Title</h2>
  <p>Article content goes here...</p>
  <footer>Posted by Jane Doe on April 8, 2025</footer>
</article>

This flexibility lets you organize content meaningfully and consistently across your site.

When to Use the Footer Tag in HTML

The footer tag HTML comes in handy whenever you need to group supplementary or concluding information. Here are common use cases:

Creating a Site-Wide Footer

At the bottom of most websites, you’ll find a persistent footer that includes branding, navigation links, or policies. This is a classic use of the HTML footer tag.

<footer>
  <nav>
    <a href="/about">About</a> |
    <a href="/privacy">Privacy Policy</a> |
    <a href="/terms">Terms of Service</a>
  </nav>
  <p>© 2025 Your Company</p>
</footer>

This global footer appears across all pages of a site.

Adding Author or Meta Information to Articles

Inside blogs or news posts, you can use a <footer> to provide the author's name, publication date, or citation links.

<article>
  <h2>Understanding HTML5</h2>
  <p>HTML5 introduced several new semantic elements, including the footer tag...</p>
  <footer>Written by Alex on April 8, 2025</footer>
</article>

This helps readers see who wrote the content and when it was posted.

Including Contact or Social Media Links

If you want to make it easy for users to connect, place those links in a footer tag for clarity and accessibility.

<footer>
  <p>Follow us on:</p>
  <a href="https://twitter.com/yourhandle">Twitter</a> |
  <a href="https://linkedin.com/company/yourcompany">LinkedIn</a>
</footer>

Examples of Footer Tag HTML in Action

Basic Footer at the Bottom of the Page

<footer>
  <p>© 2025 WebCraft Studio</p>
</footer>

This standard footer includes a copyright.

Footer with Navigation and Company Info

<footer>
  <div>
    <p>© 2025 Acme Inc.</p>
    <p>123 Main Street, Springfield, IL</p>
    <p>Email: contact@acme.com</p>
  </div>
  <nav>
    <a href="/faq">FAQ</a> |
    <a href="/support">Support</a> |
    <a href="/careers">Careers</a>
  </nav>
</footer>

This structure gives users valuable company and navigational information in one place.

Section-Level Footer Example

<section>
  <h2>Our Services</h2>
  <ul>
    <li>Web Development</li>
    <li>SEO Optimization</li>
    <li>Digital Marketing</li>
  </ul>
  <footer>
    <p>Prices starting at $299/month. Contact us for custom packages.</p>
  </footer>
</section>

Here, the footer closes a section with additional context, like a summary or promotional message.

Learn More About the Footer Tag for HTML

Styling the HTML Footer Tag with CSS

The HTML footer tag doesn’t include built-in styling, so you use CSS to format it. For instance, you can center the text, add spacing, or set a background color.

<style>
  footer {
    background-color: #222;
    color: #fff;
    padding: 20px;
    text-align: center;
  }

  footer a {
    color: #bbb;
    text-decoration: none;
    margin: 0 10px;
  }

  footer a:hover {
    color: #fff;
  }
</style>

This gives your footer a professional look and improves readability.

Using Multiple Footers in One Document

It’s valid to use multiple <footer> tags in one HTML file—as long as each one belongs to a different content section.

<article>
  <h2>Product Review</h2>
  <p>This is the review body.</p>
  <footer>Reviewed by Jamie in March 2025</footer>
</article>

<footer>
  <p>© 2025 ReviewSite Inc.</p>
</footer>

This structure maintains semantic clarity and helps screen readers navigate the page more effectively.

Footer and Accessibility

When you use the footer tag HTML properly, screen readers can identify it as a landmark region. This improves navigation for users relying on assistive technologies.

To make your footer even more accessible, consider adding ARIA labels or headings to clarify the purpose:

<footer aria-label="Site Footer">
  <h2>Stay Connected</h2>
  <p>Join our newsletter for updates.</p>
</footer>

This improves clarity without requiring any visible changes.

Responsive Footer Design

Responsive footers adjust to different screen sizes, especially important on mobile devices. Use flexible layouts like Flexbox or CSS Grid:

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

@media (min-width: 768px) {
  footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

This ensures your footer looks good on all devices, from smartphones to large desktops.

Avoid Common Mistakes

• Don’t put main content inside a <footer>—stick to supplementary information.
• Don’t use footer for every block of text at the end of a section unless it makes logical sense.
• Don’t nest block-level elements incorrectly. <footer> can contain other elements, but avoid nesting multiple <main> tags or complex layouts unless well-structured.

Footer Tag for HTML Emails

Email templates often include a footer with unsubscribe links, contact info, and legal disclaimers. Use inline styles for maximum compatibility:

<table width="100%" bgcolor="#f9f9f9">
  <tr>
    <td align="center" style="padding: 20px; font-size: 12px;">
      <p>You're receiving this email because you subscribed to our newsletter.</p>
      <a href="{{unsubscribe_url}}">Unsubscribe</a>
    </td>
  </tr>
</table>

Avoid using the <footer> tag in HTML emails because some email clients may not support it fully.

Footer HTML in Web Applications

In apps or SPAs (Single Page Applications), developers often use the footer tag HTML to house navigation, theme toggles, or dynamic status messages.

<footer>
  <p>All data synced at 10:42 AM</p>
  <a href="/settings">Settings</a>
</footer>

This keeps essential tools within easy reach of users.

Using the HTML footer tag properly helps you build semantically rich, well-structured, and accessible web pages. Whether you’re adding global navigation, legal disclaimers, contact information, or closing notes for specific sections, the footer tag HTML belongs in your toolkit. It organizes content, improves usability, and strengthens your site's design—without any unnecessary complexity.