Often contains address elements for contact info. Learn more →
<address> - Contact Information Element
The <address> Element
Section titled “The <address> Element”The <address> element represents contact information for its nearest <article> or <body> ancestor. It typically includes email addresses, physical addresses, URLs, phone numbers, social media handles, or other contact methods. Despite its name, it’s not limited to physical addresses—it’s for any type of contact information.
Quick Example
Section titled “Quick Example” Result
Syntax
Section titled “Syntax”<address> <!-- Contact information --></address>Attributes
Section titled “Attributes”Element-Specific Attributes
Section titled “Element-Specific Attributes”The <address> element has no element-specific attributes.
Global Attributes
Section titled “Global Attributes”This element supports all global attributes.
Common Use Cases
Section titled “Common Use Cases”Site Footer Contact Information
Section titled “Site Footer Contact Information”Contact details for the entire website:
Result
Article Author Contact Information
Section titled “Article Author Contact Information”Contact details for the author of an article:
Result
Business Card Style Contact
Section titled “Business Card Style Contact”A compact business card-style contact section:
Result
Contact Form with Address
Section titled “Contact Form with Address”Contact information alongside a contact form:
Result
Multiple Locations
Section titled “Multiple Locations”Contact information for different office locations:
Result
Social Media Contact
Section titled “Social Media Contact”Contact information focused on social media channels:
Result
What Should and Shouldn’t Go in Address
Section titled “What Should and Shouldn’t Go in Address”Should Include:
Section titled “Should Include:”- Email addresses
- Phone numbers
- Physical addresses
- Social media profiles
- Website URLs
- Contact forms
- Business hours (when related to contact)
Should NOT Include:
Section titled “Should NOT Include:”- Arbitrary postal addresses (unless they’re for contact purposes)
- Author publication dates
- Generic descriptive text
- Content not related to contact information
<!-- Good: Contact information --><address> <p>Phone: <a href="tel:+15551234567">(555) 123-4567</a></p></address>
<!-- Wrong: Non-contact information --><address> <p>Published on March 15, 2025</p><!-- Not contact info --> <p>123 Random Street</p><!-- Not for contact purposes --></address>
<!-- Good: Physical address for contact --><address> <p>Visit our office at:</p> <p>123 Business St, San Francisco, CA 94102</p> <p>Open Monday-Friday, 9am-5pm</p></address>Best Practices
Section titled “Best Practices”Remove Default Italic Styling
Section titled “Remove Default Italic Styling”Browsers typically render <address> in italics. Override this if desired:
address { font-style: normal;}<address style="font-style: normal;"></address>Use Semantic Markup for Contact Methods
Section titled “Use Semantic Markup for Contact Methods”Use appropriate elements and attributes for contact information:
<address> <!-- Email with mailto: -->
<!-- Phone with tel: --> <p>Phone: <a href="tel:+15551234567">+1 (555) 123-4567</a></p>
<!-- Physical address with proper line breaks --> <p> 123 Business Street<br> Suite 456<br> San Francisco, CA 94102 </p>
<!-- URLs with proper links --> <p>Website: <a href="https://example.com">example.com</a></p></address>Place in Appropriate Context
Section titled “Place in Appropriate Context”The <address> element’s scope depends on its context:
<!-- Page-level contact (in footer) --><body> <main>Content</main> <footer> <address> <!-- Contact info for the site/organization --> </address> </footer></body>
<!-- Article-level contact --><article> <h1>Article Title</h1> <p>Content...</p> <footer> <address> <!-- Contact info for article author --> </address> </footer></article>Combine with Other Elements
Section titled “Combine with Other Elements”Use headings and other semantic elements within address:
<address> <h2>Contact Information</h2>
<h3>Mailing Address</h3> <p> 123 Street<br> City, State 12345 </p></address>Accessibility
Section titled “Accessibility”Implicit ARIA Role
Section titled “Implicit ARIA Role”The <address> element has no implicit ARIA role, but it has semantic meaning:
<address> <p>Contact information here</p></address>Use Proper Link Labels
Section titled “Use Proper Link Labels”Provide context for contact links:
<!-- Good: Clear link text --><address> <p>Call us: <a href="tel:+15551234567">+1 (555) 123-4567</a></p></address>
<!-- Avoid: Unclear links --><address></address>Abbreviations
Section titled “Abbreviations”Use <abbr> for abbreviated terms:
<address> <p> 123 Main Street<br> <abbr title="California">CA</abbr> 94102<br> <abbr title="United States of America">USA</abbr> </p></address>Browser Support
Section titled “Browser Support”| Browser | Version |
|---|---|
| Chrome | All versions |
| Firefox | All versions |
| Safari | All versions |
| Edge | All versions |
| IE | All versions |
Related Elements
Section titled “Related Elements”
Can have author contact info in address. Learn more →
Used for email and phone links in address. Learn more →
Common Mistakes
Section titled “Common Mistakes”Using for Non-Contact Addresses
Section titled “Using for Non-Contact Addresses”<!-- Wrong: Shipping address (not for contact) --><address> <h2>Ship to:</h2> <p>John Doe<br> 123 Customer Street<br> City, State 12345</p></address>
<!-- Correct: Use div or section --><section> <h2>Ship to:</h2> <p>John Doe<br> 123 Customer Street<br> City, State 12345</p></section>
<!-- Correct: Use address for contact info --><address></address>Nesting Address Elements
Section titled “Nesting Address Elements”<!-- Wrong: Nested address elements --><address> <address> Contact info </address></address>
<!-- Correct: Single address element --><address> <p>Contact info</p></address>Using for Dates or Non-Contact Info
Section titled “Using for Dates or Non-Contact Info”<!-- Wrong: Publication info in address --><article> <h1>Article Title</h1> <address> Published by Jane Doe on March 15, 2025 </address></article>
<!-- Correct: Separate metadata from contact --><article> <h1>Article Title</h1> <p class="byline">Published by Jane Doe on March 15, 2025</p> <footer> <address> </address> </footer></article>