HTML Contact Information Tutorial - Using the Address Element

Understanding HTML Contact Information

The HTML <address> element identifies contact information related to the author or owner of a webpage, article, or other relevant content.

It can contain names, email addresses, telephone numbers, website links, physical addresses, or other ways to contact the person or organization responsible for the surrounding content.

The <address> Element

The <address> element represents contact information for the author, owner, or organization responsible for the nearest relevant article or for the document as a whole.

<address>
  Example Author<br>
  <a href="mailto:author@example.com">author@example.com</a>
</address>

The element is semantic: it describes the purpose of the content as contact information rather than simply changing how the text looks.

Page Contact Information

When <address> appears at the page level, it can identify contact information for the person or organization responsible for the webpage or website.

<address>
  Example Website<br>
  <a href="mailto:contact@example.com">contact@example.com</a><br>
  <a href="tel:+12025550123">202-555-0123</a>
</address>

This type of contact information is often placed near the bottom of a webpage, but its semantic meaning does not depend on its visual position.

Article Contact Information

An <address> element can also provide contact information for the author of an individual <article>.

<article>
  <h1>Learning Semantic HTML</h1>

  <p>Article content...</p>

  <footer>
    <address>
      Written by Example Author<br>
      <a href="mailto:author@example.com">Contact the author</a>
    </address>
  </footer>
</article>

In this case, the contact information belongs to the article author rather than to the website as a whole.

What <address> Can Contain

The <address> element can contain several types of contact information as long as they relate to the author or owner of the surrounding content.

A person's or organization's name.
Email addresses.
Telephone numbers.
Links to contact pages or profiles.
Physical mailing or business addresses.
Other relevant contact methods.

The element should not be used merely because content happens to contain an address-like string or contact detail.

Physical Addresses

A common misunderstanding is that <address> is specifically for postal addresses. It can contain a physical address, but only when that address is part of the appropriate contact information.

<address>
  Example Company<br>
  123 Example Street<br>
  Example City, OR 97754<br>
  <a href="tel:+12025550123">202-555-0123</a>
</address>

A street address mentioned as ordinary content, such as the location of an event or a historical building, does not automatically belong inside <address>.

Contact information is frequently associated with a webpage or article footer, so <address> often appears inside <footer>.

<footer>
  <p>&copy; Example Website</p>

  <address>
    <a href="mailto:contact@example.com">contact@example.com</a>
  </address>
</footer>

The <footer> identifies the footer region, while <address> specifically identifies the contact information within that region.

<address> vs Generic Contact Content

Not every phone number, email address, or location should be wrapped in <address>. The element is intended for contact information associated with the author or owner of the surrounding document or article.

<p>
  The conference will be held at
  123 Example Street.
</p>

In this example, the street address describes an event location rather than how to contact the author or owner of the page, so a normal paragraph is more appropriate.

HTML Address Example

The following example demonstrates page-level contact information and separate author contact information for an article. Compare the two uses and notice how the surrounding structure determines what each <address> represents.

Play in Editor

Contact Information Best Practices

Use <address> for contact information related to the author or owner of a webpage or article.
Do not use <address> merely to format a postal address.
Use links such as mailto: and tel: when appropriate so visitors can interact with contact information.
Place article-specific contact information within the related article when appropriate.
Use page-level contact information for the person or organization responsible for the document or website.
Use normal HTML elements when an address or phone number is simply part of the surrounding content rather than contact information.
Use CSS to control the appearance of the element rather than relying on browser default styling.

HTML Contact Information