An Intro to HTML <address> Tag

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!