Skip to main content

HTML5 Footer Element (Live Playground)

Introduction​

The <footer> element in HTML5 is a semantic element used to define the footer or end-of-content section of a page, section, or article. In this tutorial, you will learn how to use the <footer> element to create a structured and accessible footer for your web pages, including common use cases and best practices.

The <footer> element can be used to group elements that represent the footer or end-of-content section of a page, section, or article. A typical use case for the <footer> element is to contain a copyright notice, author information, or links to related content.

Here's an example of using the <footer> element to create a simple page footer:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Footer Example</title>
  </head>
  <body>
    <!-- Page content -->
    <footer>
      <p>&copy; 2023 My Website. All rights reserved.</p>
      <p>Contact: <a href="mailto:info@mywebsite.com">info@mywebsite.com</a></p>
    </footer>
  </body>
</html>

In this example, the <footer> element contains a copyright notice and contact information.

Live Playground, Try it Yourself

You can use multiple <footer> elements in a single document, such as for individual sections or articles. When using multiple <footer> elements, ensure that each one is properly nested within its corresponding parent element, like a <section> or <article>.

Here's an example of using multiple <footer> elements within an article:

HTML
<article>
  <header>
    <h2>Article Title</h2>
    <p>Published on: <time datetime="2023-04-27">April 27, 2023</time></p>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et libero non lorem consequat dapibus...</p>
  <footer>
    <p>Author: John Doe</p>
    <p>Category: <a href="/category/web-development">Web Development</a></p>
  </footer>
</article>

In this example, the <footer> element contains the article author information and category.

Live Playground, Try it Yourself

Best Practices​

When using the <footer> element, consider the following best practices:

  1. Do not use the <footer> element as a container for content that is repeated across multiple pages, such as headers, sidebars, or advertisements. Instead, use the <header>, <aside>, or another appropriate semantic element for such content.

  2. Avoid using the <footer> element within a <header> element. Footers should be used for end-of-content information, whereas headers are meant for introductory content.

  3. Use appropriate elements within the <footer> element to denote the type and purpose of the content, such as <p> for paragraphs, <a> for links, or <time> for timestamps.

Conclusion​

In this tutorial, you learned how to use the HTML5 <footer> element to create a structured and accessible footer for your web pages. By using the <footer> element and following best practices, you can create more organized and accessible web content.

As you continue to develop your web development skills, you'll encounter more advanced techniques for working with semantic elements like the <footer>. For example, you might learn how to use CSS to style your footers, or use JavaScript to create dynamic, interactive elements within the footer.