Course Content
HTML Tutorial
0/6
HTML introduction
HTML Editor
HTML Basics
HTML Elements
HTML Attributes
Assessment 3
HTML Tags
0/55
HTML comment Tag
HTML doctype Declaration
HTML a Tag
HTML abbreviations Tag
HTML acronym Tag
HTML address Tag
HTML applet Tag
HTML area Tag
HTML article Tag
HTML aside Tag
HTML audio Tag
HTML b Tag
HTML Strong Tag
HTML base Tag
HTML basefont Tag
HTML bdi Tag
HTML bdo Tag
HTML big Tag
HTML blockquote Tag
HTML body Tag
HTML br Tag
HTML button Tag
HTML canvas Tag
HTML caption Tag
HTML center Tag
HTML cite Tag
HTML code Tag
HTML col Tag
HTML colgroup Tag
HTML data Tag
HTML datalist Tag
HTML dd Tag
HTML del Tag
HTML details Tag
HTML dfn Tag
HTML dialog Tag
HTML dir Tag
HTML div Tag
HTML dl Tag
HTML dt Tag
HTML em Tag
HTML embed Tag
HTML fieldset Tag
HTML figcaption Tag
HTML figure Tag
HTML font Tag
HTML footer Tag
HTML Form Tag
HTML frame Tag
HTML frameset Tag
HTML h1 to h6 Tags
HTML head Tag
HTML hr Tag
HTML html Tag
HTML i Tag
HTML References
0/3
HTML Doctype References
HTML Global Attributes
HTML Event Attributes
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

Sponsored by Google

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.

Previous
Next