16. address Element

Introduction

The <address> element represents contact information for a person, people, or organization. It’s used for email addresses, physical addresses, phone numbers, and other contact details. The address element helps identify contact information and improves semantic meaning.

Basic Usage

<address>
    <p>123 Main Street<br>
    City, State 12345</p>
    <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
</address>

Common Use Cases

Site Contact

<footer>
    <address>
        <p>Contact Us:</p>
        <p>123 Main St, City, State</p>
        <p><a href="mailto:contact@example.com">contact@example.com</a></p>
        <p><a href="tel:+1234567890">+1 (234) 567-890</a></p>
    </address>
</footer>

Article Author

<article>
    <h1>Article Title</h1>
    <p>Content...</p>
    <address>
        <p>Author: <a href="mailto:author@example.com">Author Name</a></p>
    </address>
</article>

Best Practices

Contact Information Only

Use address for contact info:

<!-- Good: Contact information -->
<address>
    <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
</address>

<!-- Avoid: General location -->
<address>
    <p>This is not contact information.</p>
</address>

References

• MDN Web Docs - address element