HTML <address> Tag

What is the <address> Tag?

The tag in HTML indicates contact information regarding a person, organization, or a website. It assesses a wide range of information, such as physical addresses, e-mail addresses, phone numbers, and even other types of social media handles.

You’ll often see it on websites that have “Contact Us” sections, footers, or any area of the site that might require users needing information regarding how to reach out to or find additional content information about its owner.

That said, here, it is worth stating that the tag does not only mark physical addresses (such as street addresses); it caters for any form of contact information concerning a person or organization.

Syntax for the <address> Tag

The tag syntax is quite simple. It is a block-level element, and so it occupies space in the document and can contain any kind of content, including text, links, and other HTML elements.

<address>
    Contact us at: <a href="mailto:someone@example.com">someone@example.com</a>
</address>

Breaking it Down.

<address>: This is a generic tag. Anything enclosed by it is “contact information.”

(<a href="mailto:...">) Now, I have provided an email link. What this does is, when anyone clicks this email address, it will automatically launch their default email client by using the mailto: scheme.

As mentioned, if the person clicks on the email address, their email application shall pop up and be ready for them to send an email.

When to use the <address> Tag?

The <address> tag is specifically used during the following scenarios:

Contact information section: If there exists a “Contact Us” page or section in the footer showing contact details for your website, you’d wrap that in an <address> tag.

Attribution: If you want to provide contact information for the author of an article or post for attribution, you can use this tag.

Example 1: Basic Contact Information

Here’s an example of how you might use the <address> tag to display a physical address:

<address>
    <strong>Company XYZ</strong><br>
    1234 Elm Street<br>
    Springfield, IL 62701<br>
    USA
</address>

Example 2: Contact Information with Email and Phone

If you want to include both email and phone number contact details, you could do something like this:

<address>
    <strong>John Doe</strong><br>
    <a href="mailto:john.doe@example.com">john.doe@example.com</a><br>
    Phone: <a href="tel:+11234567890">+1 (123) 456-7890</a>
</address>

In this case:

• <a href="mailto:...">: This is for email addresses.
• <a href="tel:...">: This special link format that can be used to dial phone numbers on mobile devices or in some desktop environments.

Example 3: Adding Social Media Links

If your contact section includes social media links, you can add those inside the <address> tag as well:

<address>
    Follow us on social media:<br>
    <a href="https://twitter.com/YourCompany">Twitter</a> |
    <a href="https://facebook.com/YourCompany">Facebook</a> |
    <a href="https://linkedin.com/company/YourCompany">LinkedIn</a>
</address>

This shows how the <address> tag can be flexible and handle multiple types of contact information, including social media profiles.

What to Remember?

Purpose: The <address> tag is for contact information — not just physical addresses but any type of info you want users to use to get in touch with you.
Semantics: By using it, you give meaning to your content, both for search engine spiders and for accessibility tools, such as screen readers.
Links: You’ll often use it in conjunction with <a> tags (for emails, phone numbers, social media links, etc.), which provide interactive functionality for your users.