1. html
  2. /tags
  3. /footer

<footer>

Definition

The HTML <footer> element represents the footer of a section or document. It is typically used to provide information such as authorship, copyright notices, contact information, and links to related documents. The <footer> element is usually placed at the bottom of the content and may contain one or more of the following: text, images, links, lists, forms, and other HTML elements. The content inside the <footer> element is often visually distinguished from the main content of the page, using different font sizes, colors, or styles. The <footer> element is an optional part of the HTML structure, and its usage depends on the context and purpose of the document.

Examples

Here is an example of using the <footer> element in an HTML document:

<body>
  <header>
    <!-- header content here -->
  </header>

  <main>
    <!-- main content here -->
  </main>

  <footer>
    <p>&copy; 2023 John Doe</p>
    <p>Contact: [email protected]</p>
    <ul>
      <li><a href="https://example.com">Example.com</a></li>
      <li><a href="https://example.net">Example.net</a></li>
    </ul>
  </footer>
</body>

In this example, the <footer> element contains information about the author, contact information, and links to related websites. This content is displayed at the bottom of the page, after the main content.

Attributes

This element only includes the global attributes.

Best Practices

  • Use the <footer> element to provide additional information about the document or section, rather than just repeating information from the main content.
  • Place the <footer> element after the main content of the page or section, so that it is visually and structurally separated from the main content.
  • Use semantic HTML to structure the content of the <footer> element, such as headings, paragraphs, lists, and links, to improve accessibility and search engine optimization.
  • Use CSS to style the <footer> element, including its font size, color, spacing, and alignment, to make it visually distinguishable from the main content.
  • Consider using microformats or schema markup to add structured data to the <footer> element, such as author information, copyright notices, or contact details.
  • Test the layout and usability of the <footer> element across different devices and screen sizes, to ensure that it is accessible and readable for all users.
  • Avoid overloading the <footer> element with too much information or too many links, as this can detract from the main content and make the page harder to use. Keep the content of the <footer> concise and relevant to the document or section.

Accessibility Considerations

  • Use semantic HTML to structure the content of the <footer> element, including headings, paragraphs, lists, and links, to make it easier to navigate with assistive technologies such as screen readers.
  • Ensure that the <footer> element is visually distinguishable from the main content, using appropriate font size, color, spacing, and alignment, to help users with visual impairments to identify it as a separate section.
  • Use descriptive text in links within the <footer> element, rather than generic text like "click here" or "read more", to make it clear where the link will take the user.
  • If the <footer> element contains interactive elements like forms or buttons, ensure that they are keyboard accessible, with clear instructions and feedback, to help users who cannot use a mouse or trackpad.
  • If the <footer> element contains contact information, ensure that it is up-to-date and accessible to users with disabilities, for example by providing alternative contact methods such as email, phone, or video chat.
  • Use ARIA roles and attributes to add additional semantic information to the <footer> element, for example by using role="contentinfo" to indicate that it is a footer section. However, be careful not to overuse ARIA, as it can be confusing or misleading if used incorrectly.
  • Test the accessibility of the <footer> element using automated testing tools and manual testing with assistive technologies, to ensure that it is usable and understandable by all users.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes