footer Element in HTML
Purpose, Content, Best Practices

HTML <footer> Element: Bringing Closure with Meaning

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.

What Is the <footer> Element?

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

Basic Structure

<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.

Example: Page-Level Footer

<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

Example: Article-Level Footer

<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.

Semantic Meaning and Accessibility

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

Full Page Example with Footer

<!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>

Summary

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

What’s Next?

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

QUIZ

Question 1:What is the primary role of the <footer> element in an HTML page?

Question 2:Multiple <footer> elements can be used within a single HTML document for different sections.

Question 3:Which of the following are typical contents you might find inside a <footer> element?

Question 4:Why is using the <footer> element considered a best practice in modern HTML?

Question 5:The <footer> element can contain other block-level elements like <address> or <nav>.

Question 6:Which of these practices are recommended when creating a footer?