<address>

Specifies author contact details for the author/owner of a document

Quick Answer

What is the <address> tag?

The <address> tag defines contact information for the author or owner of a document or article. It typically contains email addresses, physical addresses, phone numbers, or social media links. Browsers usually display address content in italic. It's commonly placed in the footer of a page or at the end of an article.

Definition and Usage

The <address> element establishes the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

Tip: The <address> tag should NOT be used to describe a postal address, unless it is part of the contact information.

Tip: The <address> element is usually included inside the <footer> element.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <address> tag supports the Global Attributes in HTML.

The <address> tag also supports the Event Attributes in HTML.

Examples

Basic Contact Information

Define contact information for a website:

Example
<address>
  Written by John Doe.<br />
  Visit us at: https://www.example.com<br />
  Email: contact@example.com
</address>

Contact Information with Links

Include clickable email and website links:

Example
<address>
  Contact <a href="mailto:info@example.com">info@example.com</a><br />
  Visit <a href="https://www.example.com">www.example.com</a>
</address>

Author Contact in Footer

Place address information in a footer element:

Example
<footer>
  <address>
    Written by Jane Smith<br />
    Email: <a href="mailto:jane@example.com">jane@example.com</a><br />
    Phone: <a href="tel:+1234567890">+1 (234) 567-890</a>
  </address>
</footer>

Article Author Information

Include author contact within an article:

Example
<article>
  <h1>Introduction to HTML5</h1>
  <p>HTML5 is the latest version of HTML...</p>

  <address>
    Article written by <a href="mailto:author@example.com">John Developer</a>
  </address>
</article>

Physical Address with Map Link

Include a physical address with Google Maps link:

Example
<address>
  <strong>Company Name</strong><br />
  123 Main Street<br />
  New York, NY 10001<br />
  United States<br />
  <a href="https://maps.google.com/?q=123+Main+Street+New+York">View on Map</a>
</address>

Social Media Contact

Include social media handles:

Example
<address>
  Follow us on social media:<br />
  Twitter: <a href="https://twitter.com/example">@example</a><br />
  LinkedIn: <a href="https://linkedin.com/company/example">Company Profile</a>
</address>

Styled Address with CSS

Style the address element with CSS:

Example
<style>
  address {
    font-style: normal;
    background-color: #f4f4f4;
    padding: 20px;
    border-left: 4px solid #745af2;
    border-radius: 4px;
  }

  address a {
    color: #745af2;
    text-decoration: none;
  }

  address a:hover {
    text-decoration: underline;
  }
</style>

<address>
  <strong>Contact Us</strong><br>
  Email: <a href="mailto:hello@example.com">hello@example.com</a><br>
  Phone: <a href="tel:+1234567890">+1 (234) 567-890</a>
</address>

Multiple Contact Methods

Provide various ways to contact:

Example
<address>
  <strong>Get in Touch</strong><br />
  📧 Email: <a href="mailto:support@example.com">support@example.com</a><br />
  📞 Phone: <a href="tel:+1234567890">+1 (234) 567-890</a><br />
  💬 Live Chat: <a href="/chat">Start Chat</a><br />
  📍 Address: 456 Tech Avenue, San Francisco, CA 94102
</address>

Try it Yourself

Interactive Example

Here's a live example of the <address> tag:

HTML Free Codes
Email:
Website: htmlfreecodes.com
Follow us on Twitter:

🚀 Try in Code Playground

Best Practices

Use <address> only for contact information, not for postal addresses in general content
Place it inside <footer> for page-level contact info
Place it inside <article> for article-specific author contact
Include multiple contact methods when possible (email, phone, social media)
Use semantic HTML elements like <a> for clickable contact info
Consider styling with CSS to override the default italic font-style
Make email addresses and phone numbers clickable with mailto: and tel: protocols

Default CSS Settings

Most browsers will display the <address> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

address {
  display: block;
  font-style: italic;
}

Related Tags

<footer>
Defines a footer for a document
<article>
Defines an article
<a>
Defines a hyperlink

Sample contact and navigation controls above are demonstrations. They do not contact anyone or open a destination.