← Back to All Tags

<address>

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

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

The <address> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

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: contact@htmlfreecodes.com
Website: htmlfreecodes.com
Follow us on Twitter: @htmlfreecodes

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

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

Related Tags