The <footer> tag in HTML is used to define the footer section of a webpage or a section within a webpage. It typically contains information about the content's author, copyright details, contact information, or related links. The <footer> element helps organize and semantically mark the end of a section or the whole page, providing a consistent place for footer-related content.

Syntax:

<footer>
  <p>&copy; 2024 Your Company. All rights reserved.</p>
  <address>
    <p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
  </address>
  <ul>
    <li><a href="/privacy-policy">Privacy Policy</a></li>
    <li><a href="/terms-of-service">Terms of Service</a></li>
  </ul>
</footer>

Key Characteristics:

1. Semantic Meaning: The <footer> tag provides semantic meaning by indicating that the enclosed content represents the footer of a page or section. This helps with the logical structure of the document and improves accessibility.

2. Content: Common content found within <footer> tags includes:

   • Copyright information
   • Contact details (often using the <address> tag)
   • Links to legal or privacy-related pages
   • Social media links
   • Author information or credits

3. Placement: The <footer> tag can be used in various contexts:

   • Page Footer: At the bottom of the entire webpage, usually containing site-wide information.
   • Section Footer: At the bottom of individual sections, such as articles or <section> elements, providing specific details related to that section.

4. Styling: The <footer> tag can be styled using CSS to fit the design of the webpage. This can include setting background colors, text alignment, padding, margins, and other visual properties.

Example Usage:

Basic Example:

<footer>
  <p>&copy; 2024 Your Company. All rights reserved.</p>
  <address>
    <p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
  </address>
</footer>

In this example:

• The footer includes copyright information and contact details.
• The <address> tag is used for contact information.

Example with Additional Links:

<footer>
  <p>&copy; 2024 Your Company. All rights reserved.</p>
  <ul>
    <li><a href="/about">About Us</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</footer>

In this example:

• The footer contains a list of links to various sections of the website.

Accessibility and SEO:

• Accessibility: The <footer> tag improves accessibility by providing a clear structure for the end of a page or section. Screen readers and other assistive technologies can identify and interpret the footer content, enhancing the user experience for those with disabilities.
• SEO: Proper use of the <footer> tag can contribute to better SEO by organizing important information and providing consistent navigation and contact details. Clear and relevant footer content can help search engines understand the structure and purpose of the webpage.