The <address> element is a block‑level, semantic tag that signals contact information.
Browsers render it in italics by default and treat it as a paragraph that belongs to the nearest <article> or the whole page if it sits directly under <body>.
It’s useful when you need to expose an email, phone, address, or a set of social links that belong to the content you’re presenting.
Use it in footers, author bios, or anywhere a human might need to reach you.
Where does <address> belong?
What’s the rule?
If the contact data is for the entire document, put <address> right under <body>.
If it’s specific to a piece of content, nest it inside that <article>.
Scenario:
You’re a freelance designer.
Your portfolio page is a single article.
You place the <address> inside that article so readers can email you without scrolling to the bottom.
What content can I put inside?
You can mix plain text, <a> links, <p>, <ul>, or any inline element.
Just keep it readable and accessible.
Scenario:
Your mom keeps asking where to find your résumé.
You add a paragraph inside <address> that links directly to a PDF.
No more hunting in your Dropbox.
How do I override the default italic style?
address {
font-style: normal; /* no italics */
margin: 1rem 0; /* vertical spacing */
padding: 0.5rem 1rem; /* room to breathe */
background: #f9f9f9; /* subtle background */
border-left: 4px solid #007acc; /* visual cue */
}Scenario:
You’re in a meeting that runs late.
You pull up your site on a phone, and the address bar is too small.
The CSS gives you a clear block that’s easy to tap.
Can I put a form inside <address>?
Yes, if it’s a quick way to reach you.
Just keep the form simple and label the fields.
<address>
<form>
<label>Need help? <input type="text" placeholder="Your question"></label>
<input type="submit" value="Send">
</form>
</address>Scenario:
You’re hosting a webinar.
A participant hits “reply” but the email thread is cluttered.
Your embedded form lets them send a message without leaving the page.
What if I need multiple contact methods?
Stack them in separate <p> tags or a list.
<address>
<p><strong>MeshWorld</strong></p>
<p>123 Innovation Ave, Surat, Gujarat, India 🇮🇳</p>
<p>Phone: <a href="tel:+918123456789">+91 812 345 6789</a></p>
<p>Email: <a href="mailto:info@meshworld.in">info@meshworld.in</a></p>
<p>
<a href="https://meshworld.in" target="_blank">Website</a> |
<a href="https://twitter.com/meshworldindia" target="_blank">Twitter</a>
</p>
</address>Scenario:
Your coworker asks where to find the latest release notes.
They can click the website link right inside the address block, no tabbing.
When should I avoid <address>?
If the content isn’t contact info, don’t use it.
Misusing the tag can confuse screen readers.
Scenario:
You’re writing a blog about cooking recipes.
The paragraph about ingredients is not contact data.
Use <p> instead.
Quick checklist
| ✔ | What to verify |
|---|---|
| ✅ | <address> is inside <body> or an <article> |
| ✅ | Content is contact‑related |
| ✅ | Default italics overridden if desired |
| ✅ | Accessible link text (e.g., “Phone” instead of just a number) |
| ✅ | No extra clutter inside the block |
Wrap‑up
The <address> tag is simple, but it carries a semantic weight that matters for accessibility and SEO.
Use it where you actually provide contact details.
Treat it like a mini‑footer that stays wherever you need it.
Happy coding!
Related Articles
Deepen your understanding with these curated continuations.
An Intro to HTML <kbd> Tag
Use the HTML kbd semantic tag instead of code tag to denote our text as a keyboard input. Great for preparing documentations...
How to create collapsible content using HTML5 details tag
How to create collapsible content using HTML5 details tag
Horizontal Rules & Line Breaks in Markdown
Master horizontal rules and line breaks in Markdown. Learn how to separate sections with ---, ***, or ___ and when to use trailing spaces vs blank lines.
