HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <footer> Tag


Concept

The <footer> tag in HTML is a semantic element used to define the footer of a document or a section. It’s a vital part of modern web design, often containing information like the author’s details, copyright data, legal links, contact information, social media links, and more.

Implementation

Example 1: Basic Footer with Copyright Notice

A simple footer can include a copyright notice:

<footer>
  <p>&copy; 2023 aptLearn. All rights reserved.</p>
</footer>

Example 2: Footer with Navigation Links

A more complex footer might include navigation links:

<footer>
  <nav>
    <a href="https://www.aptlearn.io/about">About Us</a> |
    <a href="https://www.aptlearn.io/contacts">Contact</a> |
    <a href="https://www.aptlearn.io/courses">Terms of Service</a>
  </nav>
  <p>&copy; 2023 aptLearn. All rights reserved.</p>
</footer>

Example 3: Footer with Social Media Links

Footers often include social media links:

<footer>
  <a href="https://www.facebook.com/aptLearn">Facebook</a> |
  <a href="https://www.twitter.com/aptLearn_io">Twitter</a> |
  <a href="https://www.linkedin.com/company/aptlearn/mycompany/verification/?viewAsMember=true">LinkedIn</a>
  <p>&copy; 2023 aptLearn. All rights reserved.</p>
</footer>

Try it out below:

Loading

Attributes


Global Attributes

The <footer> tag supports all the global attributes in HTML, such as class, id, style, etc.

Event Attributes

The <footer> tag also supports all the event attributes in HTML, like onclick, onmouseover, etc.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

Most browsers will display the <footer> element with the following default CSS settings:

footer {
  display: block;
}

Styling the Footer

Footers can be styled using CSS to match the website’s theme. Here’s an example of a styled footer:

footer {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

Accessibility Considerations

Using the <footer> tag helps screen readers and other assistive technologies understand the content’s structure. It’s part of the HTML5 specification and is preferred over using generic <div> elements for footers.

Conclusion

The <footer> tag is a versatile and essential part of web design. It not only adds a professional touch to a website but also provides valuable information and links.


By understanding and implementing the <footer> tag effectively, you can enhance the user experience and make your website more accessible and SEO-friendly. Whether it’s a simple copyright notice or a complex navigation structure, the <footer> tag offers the flexibility to create a footer that suits your needs.