Using the HTML `<footer>` Element: Structuring and Styling Web Page Footers

Learn how to create and style effective footers for your web pages using the HTML `<footer>` element. This tutorial demonstrates how to semantically structure footer content, improve website accessibility, and customize footer appearance using CSS.

Using the HTML `<footer>` Element to Create Footers

Understanding the `<footer>` Element

The HTML `<footer>` element is a semantic element used to define a footer for a document or section. Footers typically contain information like copyright notices, authorship details, contact information, sitemaps, and links back to the top of the page. This improves both the structure and accessibility of your HTML. The footer provides useful information to the user and typically appears at the bottom of the page or section. While the `<footer>` tag itself doesn't directly affect styling, it’s usually styled with CSS (Cascading Style Sheets) to create a visually distinct footer area.

Using the `<footer>` Element

To add a footer section to your webpage, place the content you want to appear in the footer within the opening and closing `<footer>` tags. For example:

<footer>
  <p>Copyright 2024 My Website</p>
</footer>

You can include various elements (paragraphs, links, etc.) within the footer. It's common to use the `

footer {
  background-color: #f0f0f0;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
  border-top: 1px solid #ccc;
}