Learn-WebDevelopment.com home page Learn-WebDevelopment.com

<address>

The HTML <address> element provides contact information such as a person, company, physical address (if relevant), phone number, email, social media handles, URL, and co-ordinates.

Providing contact information for its nearest <article> or <body> ancestor, if this is the <body>, then the contact information applies to the whole document. It is a semantic (descriptive) element that helps both users and search engines understand which content represents contact details.

📝 Note: The <address> element is not just for physical addresses - it can contain any type of contact information.

Syntax

<address>
  Article by <a href="mailto:[email protected]">Homer Simpson</a><br>
</address>

Common use cases

  • Social media links/information for article author.
  • Business contact details in a footer.
  • Contact section of a webpage.

Basic usage

Here's a simple example of using <address> in an article:

<article>
  <p>A guide to writing meaningful and descriptive HTML.</p>

  <address>
    Article by <a href="mailto:[email protected]">Homer Simpson</a><br>
    Follow me on <a href="https://x.com/hsimpsonexample">X/Twitter</a>
  </address>
</article>

The <address> element is often used in the <footer> section:

<footer>
  <address>
    <strong>Learn Web Development</strong><br>
    Building 123, Tech Street 123<br>
    <a href="https://learn-webdevelopment.com">Visit our website</a> for more courses.
  </address>
</footer>

Common mistakes to avoid

  • Don't nest <address> elements inside of each other.
  • Don't include contact information that isn't contact-related (article tags, date, etc).
  • Avoid using the <address> element for arbitrary addresses/postal information that aren't relevant contact information.
<!-- Don't do this -->
<address>
  Please ship to:
  1 Example Street,
  Example Town, 12345
</address>

<!-- Instead, use <p> or another appropriate element -->
<p>
  Please ship to:
  1 Example Street,
  Example Town, 12345
</p>

Accessibility and best practices

  • Use ARIA labels if required for complex contact information.
  • Use appropriate semantic elements inside of <address> (e.g. <a> for links).
  • Ensure contact links are clearly identifiable.

Styling

The <address> element usually displays in the browser in italic, but this can be changed using CSS:

address {
  font-style: normal;
  margin: 1rem 0;
}

Conclusion

The <address> element is used to describe the contents inside as contact information in HTML. Providing accessible and meaningful contact information for users, search engines, and screen readers.