HTML footer Element

Just like every good story has a conclusion, every well-structured web page deserves a semantic ending. That’s where <footer> comes in. This tag is more than decoration — it signals the wrap-up, adds essential context, and improves the overall accessibility of your layout.

The <footer> element defines the “footer” for its nearest section or document. It often contains:

• Copyright notices
• Contact details
• Back to top links
• Site maps or secondary navigation
• Publication dates

<footer>
  <p>© 2025 Cherry & Co.</p>
  <a href="#top">Back to Top</a>
</footer>

© 2025 Cherry & Co.  
[Back to Top]

It’s often placed at the bottom of a page, but can also be used inside <article>, <section>, or <aside> to provide localized closing notes.

<footer>
  <nav>
    <a href="/terms">Terms of Use</a> |
    <a href="/privacy">Privacy Policy</a>
  </nav>
  <p>Contact us at <a href="mailto:hello@fruitblog.com">hello@fruitblog.com</a></p>
</footer>

[ Terms of Use | Privacy Policy ]  
Contact us at hello@fruitblog.com

<article>
  <h2>Banana Health Benefits</h2>
  <p>Bananas provide quick energy and support heart health.</p>

  <footer>
    <p>Published on <time datetime="2025-05-24">May 24, 2025</time></p>
    <p>Written by Fruit Lover 101</p>
  </footer>
</article>

Published on May 24, 2025  
Written by Fruit Lover 101

This keeps the article's metadata tidy and easy to find.

Just like <header> introduces content, <footer> signals its close. Screen readers and assistive technologies use this to help users skip to important contextual info.

Best Practices:

• Use only once per page for the main footer, but multiple times within sections if needed
• Keep content relevant — avoid stuffing footers with unrelated items
• Use <time> and <nav> inside footers where appropriate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fruit Daily</title>
</head>
<body>

  <header>
    <h1>Welcome to Fruit Daily</h1>
  </header>

  <main>
    <section>
      <h2>Today's Feature: Apple</h2>
      <p>Apples are crunchy and refreshing.</p>
    </section>
  </main>

  <footer>
    <nav>
      <a href="/about">About Us</a> |
      <a href="/contact">Contact</a>
    </nav>
    <p>© 2025 Fruit Daily. All rights reserved.</p>
  </footer>

</body>
</html>

The <footer> element anchors the end of a page or section with important links, contact info, and context. You now know how to:

• Use <footer> at both page and section level
• Include typical content like copyright and contact links
• Apply semantic structure that supports accessibility and SEO

Choose the option that lists all and only the correct statements.

1. Contact information
2. Copyright notices
3. Site navigation menus
4. Advertisements

Choose the option that lists all and only the correct statements.

1. Keep footer content concise and relevant
2. Avoid duplicating navigation links already in the header
3. Use semantic tags inside the footer like <address>
4. Place large images and videos inside the footer

Next, let’s navigate into the <nav> element — the semantic home of menus and internal links.