Skip to content
finote

09. footer Element

Introduction

Section titled “Introduction”

The <footer> element represents a footer for its nearest sectioning content or sectioning root element. It typically contains copyright information, contact details, related links, and other footer content. The footer element helps identify footer content and improves document structure.

Basic Usage

Section titled “Basic Usage”
<footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

Common Use Cases

Section titled “Common Use Cases”
Section titled “Site Footer”
<footer>
    <p>&copy; 2024 My Company</p>
    <nav>
        <ul>
            <li><a href="/privacy">Privacy</a></li>
            <li><a href="/terms">Terms</a></li>
        </ul>
    </nav>
    <address>
        Contact: <a href="mailto:info@example.com">info@example.com</a>
    </address>
</footer>

Article Footer

Section titled “Article Footer”
<article>
    <h1>Article Title</h1>
    <p>Content...</p>
    <footer>
        <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
        <p>Author: John Doe</p>
    </footer>
</article>

Multiple Footers

Section titled “Multiple Footers”

You can have multiple footers:

<body>
    <main>
        <article>
            <footer>Article footer</footer>
        </article>
    </main>
    <footer>Site footer</footer>
</body>

Best Practices

Section titled “Best Practices”

Footer Content

Section titled “Footer Content”

Include appropriate footer content:

<footer>
    <p>Copyright information</p>
    <nav>Footer navigation</nav>
    <address>Contact information</address>
</footer>

References

Section titled “References”