What is the address tag <address>?
The address tag <address> is a semantic element used to identify contact information like a physical address, email address, phone number, or social media handle, for an organization, document, or person. It provides context and meaning to your HTML code, making it easier for browsers and assistive technologies to understand the content.
Contents
How does it work?
- When you wrap contact information within the
<address>tags, it’s typically rendered in italics by most browsers. Browsers might also add line breaks before and after the address element. - More importantly, using the
<address>tag helps with accessibility. Screen readers and other assistive technologies can identify this section as contact information, allowing them to convey it appropriately to users.
Structure:
HTML
<address>Contact Information</address>
Example:
Let’s say you’re creating a contact page for your website. You can use the <address> tag like this:
HTML
<address>
Company Name Inc. <br>
123 Main Street <br>
Anytown, CA 12345 <br>
<a href="mailto:[email protected]">[email protected]</a><br>
<a href="tel:15555551212">(555) 555-1212</a>
</address>
Where to use the <address> tag:
- Footers: Commonly used in website footers to display business contact information.
- Article Author Information: Can be placed within the
<article>element to mention the author’s contact details. - Business Cards: Used to structure digital business cards on webpages.
Things to Remember:
- The
<address>tag should only contain contact information relevant to its nearest<article>or<body>ancestor. - Avoid including non-contact information like publication dates within the
<address>tag. Use the<time>element for such purposes.
By using the <address> tag effectively, you can enhance the readability and accessibility of your webpages, making it a valuable tool for web development.
