Introduction
Within HTML, the <address> serves as a semantic element utilized for structuring contact details pertaining to the nearest ancestor element within the content, such as an article or, at the highest level, the entire document. It does not merely act as an empty vessel for any mailing address; rather, it serves the purpose of delineating contact information for an author, proprietor, or an entity associated with the webpage or article.
The purpose of using the address element is to convey information to browsers, search engines, and assistive technologies. It is important to use this element thoughtfully, ensuring that real contact information is provided.
When to use <address> tag?
Use <address> tag when the content is contact information for:
- The author of an <article> (place <address> inside that <article>).
- The owner or contact point for the entire page (place <address> as a child of <body>).
Avoid resorting to <address> simply to provide a demonstration of postal addresses (for instance, using example addresses or arbitrary locations that are unrelated to the original author's contact information).
Note: The <address> tag is not a generic tag. Therefore, in the case of a non-contact address or a placeholder postal data, a <p> or any other semantic container should be used instead.
Syntax
<address>
Contact: <a href="mailto:hello@example.com">hello@example.com</a>
</address>
Imp. Notes:
- The <address> tag is a flow content element (displays as block by default in browsers).
- It supports global attributes (class, id, style, etc.) and can have links (<a>), line breaks, and inline text.
- Browsers typically render <address> in italics and add line-break spacing, but that is presentational - override with CSS when required.
Rules/ Semantics
<para>
- In case the address refers to the author of an article, the element address should be contained within the element of the article.
- If it is on the entire site or page (e.g. corporate contact), it should be a child of the <body>.
- Avoid nesting <address> in unrelated semantic regions (e.g., inside a <nav> or <form> unless the contact info really relates to that section).
Example 1: Company contacts block in footer
<footer>
<address>
C# Tutorial Pvt. Ltd.<br>
Support: <a href="mailto:support@example.com">support@example.com</a><br>
Phone: <a href="tel:+919876543210">+91 98765 43210</a>
</address>
</footer>
Output:
C# Tutorial Pvt. Ltd.
Support: support@example.com
Phone: +91 98765 43210
Explanation
The address found in the footer of the page serves as a clear point of contact for communicating with the owner of the website focused on C# Tutorial. Transforming the email and phone number into semantic links (mailto:, tel:) enables users to easily utilize them on various devices. By utilizing <address> in this context, it explicitly designates these contact details as the official means of communication within the document.
Example 2: Author contact for a blog article
<article>
<h1>How Web Performance Affects SEO</h1>
<p>...article content...</p>
<address>
Written by: <strong>Prachet Y</strong><br>
Email: <a href="mailto:prachet@example.com">prachet@example.com</a>
</address>
</article>
Output:
Written by: Prachet Y
Email: prachet@example.com
Explanation
By embedding the contact details within the article as an address, it confines the contact information to the article's author. This is particularly useful for websites with multiple authors or an array of archives, where each article needs its designated contact person. Implementing semantic HTML enhances the way screen readers and search engines interpret the author's metadata.
Accessibility & SEO
The contact information is well defined through the use of the <address element to make it more accessible to assistive technologies like screen readers. Nevertheless, to increase the search and optimization of the site, it will be advisable to add structured data to the available contact information. This is where JSON-LD and microdata come into play.
Such structured data is useful to make search engines better grasp the contact information of your organisation, and it is used in such functions as rich snippets in Google Search.
In practice, you can:
- Use <address> in your HTML to show contact info to users.
- Add a corresponding ContacC# Tutorial or Organization schema in JSON-LD format to make it machine-readable.
- Choose LocalBusiness markup if your website represents a physical business with a local branch.
Styling & presentation
In most cases, web browsers display <address> in an italic font style and as a block element. If a uniform branding appearance is required, you can use CSS to override this default rendering.
address { font-style: normal; color: #444; line-height:1.5; }
address a { text-decoration: none; }
Ensure that the spacing is consistent within headers and footers and avoid including excessive content in <address>.
Best practices
- Use <address> only for author/owner/organisation contact info.
- Place it inside the relevant scope: inside <article> for article authors; inside <body> (commonly footer) for site-level contact.
- Provide actionable links (mailto:, tel:).
- Pair visible <address> content with Schema.org ContacC# Tutorial/PostalAddress JSON-LD for search engines.
- Do not use <address> for arbitrary/example addresses. Instead, prefer using the <p> tag.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<address> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
The <address> element is a small yet significant semantic element which used properly helps to clarify communication with whom to contact and limits that knowledge to an article or document. Any contemporary Web site, add explicit address markup, action links, regular CSS, and Schema.org organisation data to provide reachable and computer-readable and search-friendly contacts pages.
FAQs - HTML address tag
Q1. What role does the <address> tag serve in HTML?
The purpose of the <address> tag is to offer contact information for the creator or proprietor of a webpage or document. Essentially, it serves as an indicator that the information enclosed pertains to contacting the individual.
Q2. Can the <address> tag be used for any address on a webpage?
No, the contact information metadata should solely be utilized for details pertaining to the author or owner of the document, and not for arbitrary places or postal addresses.
Q3. What type of data is typically contained within the <address> element?
You can include:
- Physical or mailing address
- Author's or company's name
- Website or social media links
- Email address (using <a href="mailto:...">)
- Phone number (using <a href="tel:...">)
Q4. Where should the <address> tag be used?
- It is usually placed inside the <footer> of a webpage.
- It can also be used inside an <article> or <section> to specify the contact info of that particular author.