Tutor:Contact information needs semantic meaning. We use the <address> tag to mark up contact details for the author or owner of content. This helps search engines and screen readers understand the context.

⭐ 0 EXP

Skill Matrix

UNLOCK NODES BY LEARNING SEMANTIC CONTACT MARKUP.

Concept 1: The Contact Container

The <address> tag is a semantic element specifically for marking up contact information. It should only be used for contact details related to the author or owner of the content.

System Check

What is the primary purpose of the <address> tag?

To style text in italicsTo mark up contact information semanticallyTo create a mailing address formTo display physical locations on a map

Community Holo-Net

Share Contact Blocks

Built an accessible contact section? Share your semantic address markup.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Address Tag & Semantics

Pascual Vila

Frontend Instructor // Code Syllabus

The <address> tag is a semantic HTML element used to mark up contact information for the author or owner of the nearest <article> or <body> element. It provides meaning to contact data, making it more accessible and SEO-friendly.

Semantic Meaning

Unlike generic containers like <div> or <span>, the <address> tag tells browsers, search engines, and screen readers that the content inside is specifically contact information. This semantic meaning improves accessibility and helps search engines understand your content structure.

Proper Usage

Use <address> only for contact information related to the content's author or the site's owner. It's not for any physical address—only contact details. You can nest other HTML elements inside, including <p>, <br>, and especially <a> tags with mailto: or tel: links.

Accessibility

Screen readers can identify contact information when it's wrapped in <address>, making it easier for users with disabilities to find and interact with contact details. Always include clickable links (mailto:, tel:) for better accessibility.

Glossary

<address>: A semantic HTML element that marks up contact information for the author or owner of content. It provides meaning beyond visual presentation.
mailto: protocol: A URL scheme used in href attributes to create clickable email links. Example: mailto:info@example.com
tel: protocol: A URL scheme used in href attributes to create clickable phone number links. Example: tel:+1234567890
Semantic HTML: HTML elements that convey meaning about the content they contain, not just how it looks. This improves accessibility and SEO.

📖 INDEX