The semantically correct HTML element for adding contact information is the <address> tag. You can use it to provide the following contact information for example, for a single person, multiple people, or for an organization:
- Physical address;
- Contact or social media links;
- Email address;
- Phone number;
- Social media handle;
- Geographic coordinates;
- Any other type of contact information that's relevant to the context.
Please note that (as per the W3 spec), if the <address> element appears inside an <article> element (or its descendants), then it is considered as representing the contact information relevant to the article, otherwise the contact information applies to the document as a whole.
It is important to note that the <address> element must not contain any other information than the contact information, and it must not be used for contact information that's not relevant for the current document or article. For arbitrary addresses, you can use the <p> element for example.
For example, the following contact information is considered relevant to the document:
<body>
<footer>
<address>
<a href="mailto:[email protected]">[email protected]</a><br />
<a href="tel:+1234567891">(123) 456-7891</a>
</address>
<!-- ... -->
</footer>
</body>
The following contact information is considered relevant to the article:
<body>
<article>
<!-- ... -->
<address>
<a href="https://www.twitter.com/designcise">@designcise</a><br />
</address>
</article>
</body>
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.