HTML <footer> Tag

The <footer> tag defines a footer for a document or section. A footer typically contains information about the document or section, such as authorship, copyright information, contact details, site navigation links, or related documents. It is a semantic element that helps structure your HTML documents and improve accessibility and SEO.

HTML Footer: The Complete Guide to the <footer> Tag

Syntax

<footer>
  <!-- Footer content here -->
</footer>

The <footer> tag supports Global Attributes and Event Attributes in HTML.

Attributes

Attribute Value Description
class classnames Specifies one or more class names for the footer, often used to reference the footer in a CSS stylesheet
id id-name Specifies a unique ID for the footer, often used for Javascript manipulations or styling
style inline-css Specifies inline CSS styles for the footer element
title text Specifies extra information about the footer
accesskey character Specifies a keyboard shortcut to activate/focus on the footer
contenteditable true | false Specifies if the content of the footer is editable by the user.
dir ltr | rtl | auto Specifies the text direction for the footer.
draggable true | false | auto Specifies if the footer is draggable.
hidden true Specifies if the footer is hidden.
lang language-code Specifies the language of the footer's content
spellcheck true | false Specifies if the content of the footer should be spellchecked
tabindex number Specifies the tab order of the footer.
translate yes | no Specifies if the footer should be translated.

Example

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

More Examples

<footer>
  <nav>
    <a href="/privacy">Privacy Policy</a> |
    <a href="/terms">Terms of Service</a> |
    <a href="/contact">Contact Us</a>
  </nav>
</footer>

<footer>
  <p>Contact us: <a href="mailto:[email protected]">[email protected]</a></p>
  <p>Follow us on:
    <a href="https://facebook.com/codelucky">Facebook</a> |
    <a href="https://twitter.com/codelucky">Twitter</a> |
    <a href="https://instagram.com/codelucky">Instagram</a>
  </p>
</footer>

<article>
  <h2>Article Title</h2>
  <p>Article content here...</p>
  <footer>
    <p>Published on: 2023-10-27</p>
  </footer>
</article>

<footer>
  <div class="footer-content">
    <div class="footer-section about">
      <h3>About Us</h3>
      <p>A short description about your company or website.</p>
    </div>
    <div class="footer-section links">
      <h3>Quick Links</h3>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/services">Services</a></li>
      </ul>
    </div>
    <div class="footer-section contact">
      <h3>Contact</h3>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
      <p>Phone: +1-555-555-5555</p>
    </div>
    <div class="footer-section social">
      <h3>Follow Us</h3>
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
    </div>
  </div>
  <div class="footer-bottom">
      <p>&copy; 2023 Company Name. All rights reserved.</p>
    </div>
</footer>

<footer>
   <p>&copy; 2023 CodeLucky. All rights reserved.</p>
  <a href="#" id="back-to-top">Back to Top</a>
</footer>

Browser Support

The <footer> tag is supported by all modern browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Notes and Tips

  • The <footer> element is typically used at the bottom of a document or section. However, it's also acceptable to use it within articles or other content sections.
  • It's common practice to include copyright information, links to legal pages (privacy policy, terms of service), contact information, and social media links within a <footer> element.
  • You can have multiple <footer> elements in a single HTML document, each representing the footer for their respective section or document.
  • The <footer> tag is a semantic element that improves accessibility and helps search engines understand the structure of your web page.
  • Use CSS to style the <footer> element and make it visually appealing.
  • Ensure the footer is responsive and looks good on all devices.
  • Keep your footer consistent throughout the website for a professional look.
  • It's good practice to have a "back to top" link in long pages within the footer section.
  • Consider adding a form for newsletter subscription in the footer to engage visitors.
  • Be mindful of the content and keep the footer concise.

Continue Reading

HTML Datalist options Collection: Accessing List Options

January 10, 2025

HTML Document Anchors Collection: Accessing Anchor Elements

January 10, 2025

HTML Document applets Collection: Accessing Applet Elements

January 10, 2025

HTML Canvas transform() Method: Applying Transformations

January 10, 2025

HTML Canvas translate() Method: Translating the Canvas Origin

January 9, 2025

HTML Canvas textBaseline Property: Setting Text Baseline

January 9, 2025