SyntaxStudy
Sign Up
HTML Beginner 6 min read

Footer and Address

Footer and Address

The <footer> element represents the footer for its nearest ancestor sectioning element. A page footer typically contains copyright information, related links, legal notices, and contact details. Like <header>, a <footer> can also appear within an <article> to mark author information or article metadata.

The Address Element

The <address> element, when placed inside a <footer>, provides contact information for the page or site owner. When placed inside an <article> it provides contact information for the article's author. Do not use <address> for arbitrary postal addresses unrelated to the document — use a <p> or <div> for those instead.

Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Footer and Address</title>
  <style>
    footer {
      background: #222;
      color: #ccc;
      padding: 40px 24px;
      margin-top: 60px;
    }
    footer a { color: #aad4f5; }
    footer address { font-style: normal; margin-top: 16px; }
    .footer-grid { display: flex; gap: 40px; flex-wrap: wrap; }
  </style>
</head>
<body>
  <footer>
    <div class="footer-grid">
      <div>
        <h3>Company</h3>
        <ul style="list-style:none;padding:0;">
          <li><a href="#">About</a></li>
          <li><a href="#">Careers</a></li>
        </ul>
      </div>
      <div>
        <h3>Contact</h3>
        <address>
          123 Web Lane, Internet City<br>
          <a href="mailto:hello@example.com">hello@example.com</a><br>
          <a href="tel:+10005551234">+1 000 555 1234</a>
        </address>
      </div>
    </div>
    <p style="margin-top:24px;">&copy; 2025 Example Inc. All rights reserved.</p>
  </footer>
</body>
</html>
Pro Tip

A page can have multiple <footer> elements — one for the site and one inside each <article> for author bios. Just make sure each footer relates to its nearest ancestor sectioning element, not the page as a whole.