skip to content

Footer

in production

Tags:

Guidelines:

Similar to the page header, most websites also have a region at the bottom of every page that contains site-wide information, such as copyright information, privacy statements, or disclaimers. HTML5 provides the <footer> element, which can be used to define such a region.

Note: If the <footer> element is used inside <article> and <section> elements, it is not identified as the footer for the whole page but only relates to that specific <article> or <section>.

HTML Code

<footer class="footer-page"
        aria-labelledby="footer-title">
  <h2 class="visually-hidden"
      id="footer-title">
    Footer
  </h2>
  <div class="column">
    <div>
      <h3 id="resources-title">Resources</h3>
      <ul class="list-resources"
          aria-labelledby="resources-title">
        <li><a href="#">About</a></li>
        <li><a href="#">Solutions</a></li>
        <li><a href="#"><abbr title="Frequently Asked Questions">FAQ</abbr></a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Accessibility Statement</a></li>
        <li><a href="#">Sitemap</a></li>
      </ul>
    </div>
    <div>
      <h3 id="contact-title">Contact</h3>
      <address class="address-contact"
               aria-labelledby="contact-title">
        <div class="label-data phone">
          <div class="label inline"
               id="phone-label">
            Phone:
          </div>
          <div class="data inline">
            <a href="tel:0000000000">000-000-0000</a>
          </div>
        </div>
        <div class="address">
          4240 Airport Road<br>
          Suite 206<br>
          Cincinnati, <abbr title="Ohio">OH</abbr> 45226
        </div>
      </address>
    </div>
    <div>
      <h3 id="connect-title">Social media</h3>
      <ul class="list-connect list-inline"
          aria-labelledby="connect-title">
        <li><a href="#"
               class="fa-icon fab fa-twitter"
               aria-labelledby="label-twitter">
          <span id="label-twitter"
                class="visually-hidden"
                aria-hidden="true">
            Follow us on Twitter
          </span>
        </a></li>
        <li><a href="#"
               class="fa-icon fab fa-linkedin-in"
               aria-labelledby="label-linkedin">
          <span id="label-linkedin"
                class="visually-hidden"
                aria-hidden="true">
            Follow us on LinkedIn
          </span>
        </a></li>
        <li><a href="#"
               class="fa-icon fab fa-instagram"
               aria-labelledby="label-instagram">
          <span id="label-instagram"
                class="visually-hidden"
                aria-hidden="true">
            Follow us on Instagram
          </span>
        </a></li>
        <li><a href="#"
               class="fa-icon fab fa-facebook-f"
               aria-labelledby="label-facebook">
          <span id="label-facebook"
                class="visually-hidden"
                aria-hidden="true">
            Follow us on Facebook
          </span>
        </a></li>
      </ul>

      <form id="frm-lang-selector"
            action="/"
            method="post">
        <label id="lbl-lang-selector"
               for="sel-lang-selector">
          Site language
        </label>
        <select id="sel-lang-selector">
          <option lang="en"
                  value="en"
                  selected>
            English
          </option>
          <option lang="es"
                  value="es">
            Espanol
          </option>
          <option lang="fr"
                  value="fr">
            Français
          </option>
        </select>
        <input id="btn-lang-selector"
               type="submit"
               value="Go!" />
      </form>
    </div>
  </div>
</footer>

CSS code

.footer-page li {
  list-style: none;
  margin: .25rem;
}

.footer-page .list-resources,
.footer-page .address-contact {
  font-size: .825rem;
  padding-left: 0;
}

.footer-page .list-resources a:hover,
.footer-page .address-contact a:hover {
  font-weight: bold;
}

.footer-page .list-connect {
  padding-left: 0;
}

.footer-page .address {
  font-style: italic;
}

@media screen and (min-width: 56.25em) {
  .footer-page .column {
    display: flex;
    justify-content: space-between;
  }
}

.footer-page a[href].fa-icon {
  border: 1px solid #eee;
  outline: 4px solid #eee;
  padding: .5rem;
}

.footer-page a[href].fa-icon:hover,
.footer-page a[href].fa-icon:focus {
  background-color: #004da1;
  border: 1px solid #000;
  color: #eee;
  outline: 4px solid #999;
  padding: .5rem;
}

.footer-page .label-data .inline {
  display: inline;
}

.footer-page .label-data .label {
  font-weight: bold;
}

.footer-page .list-resources abbr[title],
.footer-page .list-resources abbr[data-original-title] {
  text-decoration: none;
}

Tested using

  • Chrome with JAWS,
  • Edge with NVDA,
  • Safari with Voiceover.
W3C SVG