HTML <footer> Element

Publish in HTML Tutorial el 24/05/2025 14:34

The <footer> element represents a footer for its nearest sectioning content or root element. Typically containing metadata, copyright information, author details, related documents, or navigation links. Unlike traditional footers in documents, HTML footers can appear multiple times on a page - at the bottom of the entire page or at the end of individual sections/articles.

Key Characteristics:

Semantic HTML5 element
Can be used multiple times per page
Typically contains authorship info, copyright data, contact info
Often includes navigation links or social media icons
Improves accessibility and SEO when used properly

Basic Syntax

Here's the basic structure of a footer element:

Usage Examples

Example 1: Basic Page Footer

A simple footer with copyright information and authorship:

Play Code

<footer style="background-color: #f8f9fa; padding: 20px; text-align: center;">
  <p>© 2023 MyWebsite. All rights reserved.</p>
  <p>Created by: John Doe</p>
  <p>Contact: <a href="mailto:contact@example.com">contact@example.com</a></p>
</footer>

Example 2: Footer with Navigation Links

A footer containing navigation links and social media icons:

Play Code

<footer style="background-color: #343a40; color: white; padding: 30px 0;">
  <div style="display: flex; justify-content: space-around;">
    <div>
      <h4 style="color: #ffc107;">Quick Links</h4>
      <ul style="list-style: none; padding: 0;">
        <li><a href="/about" style="color: white;">About Us</a></li>
        <li><a href="/services" style="color: white;">Services</a></li>
        <li><a href="/contact" style="color: white;">Contact</a></li>
      </ul>
    </div>
    <div>
      <h4 style="color: #ffc107;">Follow Us</h4>
      <div>
        <a href="#" style="color: white; margin-right: 10px;">Facebook</a>
        <a href="#" style="color: white; margin-right: 10px;">Twitter</a>
        <a href="#" style="color: white;">Instagram</a>
      </div>
    </div>
  </div>
  <p style="text-align: center; margin-top: 20px;">© 2023 Company Name</p>
</footer>

Example 3: Article Footer

A footer used within an article element:

Play Code

<article style="border: 1px solid #ddd; padding: 20px; margin-bottom: 30px;">
  <h3>Understanding Semantic HTML</h3>
  <p>Semantic HTML introduces meaning to the web page rather than just presentation...</p>
  
  <footer style="background-color: #f5f5f5; padding: 10px; margin-top: 20px; font-size: 0.9em;">
    <p>Published on: <time datetime="2023-05-15">May 15, 2023</time></p>
    <p>Author: Jane Smith</p>
    <button style="background: none; border: none; color: #007bff; cursor: pointer;">Share this article</button>
  </footer>
</article>

Example 4: Footer with JavaScript (Current Year)

A footer that automatically updates the copyright year using JavaScript:

Play Code

<footer style="background-color: #212529; color: white; padding: 20px; text-align: center;">
  <p>© <span id="currentYear"></span> My Awesome Website. All rights reserved.</p>
  <p>Last updated: <span id="lastUpdated"></span></p>
</footer>

<script>
  // Update copyright year automatically
  document.getElementById('currentYear').textContent = new Date().getFullYear();
  
  // Display last modified date
  document.getElementById('lastUpdated').textContent = new Date(document.lastModified).toLocaleDateString();
</script>

Example 5: Footer with Back-to-Top Button

A footer with a functional back-to-top button using JavaScript:

Play Code

<footer style="background: linear-gradient(to right, #6a11cb, #2575fc); color: white; padding: 30px; text-align: center; position: relative;">
  <div style="max-width: 800px; margin: 0 auto;">
    <h3 style="margin-bottom: 20px;">Ready to get started?</h3>
    <p>Join thousands of satisfied customers today!</p>
    <button onclick="scrollToTop()" style="background: white; color: #2575fc; border: none; padding: 10px 20px; border-radius: 50px; cursor: pointer; margin-top: 20px; font-weight: bold;">
      Back to Top
    </button>
  </div>
</footer>

<script>
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
</script>