HTML Address Element

When you need to get in touch with someone, you look for a name, an email, a phone number, or maybe a place to visit. The <address> element tells browsers and assistive tools that a piece of content is exactly that: contact information.

The name is a trap. <address> is not for any postal address you happen to mention. It has a narrow, specific meaning. This lesson explains what it is for, what it is not for, how to build useful contact links, and how to handle privacy and international formats.

What You Will Learn

What <address> means, and the two things it can be the contact for
What does not belong in an <address>
Building email, phone, and map links
Where to put it: footer, article, contact page
Resetting the default italic style
Spam and privacy concerns
International phone numbers and address formats
Accessibility and common mistakes

The Basics

HTML Code
Browser Output

index.html
<footer>
  <address>
    Spring Bread Festival<br />
    Market Square<br />
    Springfield, 12345<br />
    <a href="mailto:hello@example.com">hello@example.com</a><br />
    <a href="tel:+15551234567">+1 555 123 4567</a>
  </address>
</footer>

style.css
address {
  font-style: normal;   /* browsers show address in italics by default */
}

A few details worth noticing:

The <br /> line breaks are a correct use of <br>: in a postal address, the line break is part of the content, not just spacing.
The email and phone are real links: mailto: and tel:.
Browsers show <address> in italics by default. That is only a default style, and most sites reset it with font-style: normal.

What `<address>` Is For

The specification gives it one precise job:

The <address> element represents the contact information for its nearest <article> ancestor, or, if there is none, for the page (the <body>).

So it answers one of two questions:

Where it sits	It means	Example
Inside an `<article>`	How to reach the author or owner of that article	"Written by Ada. Write to ada@example.com"
Anywhere else on the page	How to reach the owner of the whole page or site	The company's contact details in the footer

Try It: Whose Contact Details Are These?

This page has two addresses. Press the button, and the script works out whose contact details each one is, using the "nearest article" rule.

HTML Code
Browser Output

index.html
<main>
  <article>
    <h2>How to shape a loaf</h2>
    <p>Start with a round of dough…</p>

    <footer>
      <address>
        Written by Ada. Write to <a href="mailto:ada@example.com">ada@example.com</a>
      </address>
    </footer>
  </article>
</main>

<footer>
  <address>
    Spring Bread Festival, Market Square ·
    <a href="mailto:hello@example.com">hello@example.com</a>
  </address>
</footer>

script.js
document.querySelectorAll("address").forEach((address) => {
  const article = address.closest("article");

  console.log(
    article
      ? "Contact for the article: " + article.querySelector("h2").textContent
      : "Contact for the whole page"
  );
});

What `<address>` Is Not For

Because of its name, people use <address> for every address. That is wrong, and the specification is clear about it.

Situation	Use `<address>`?	What to use instead
Your company's contact details in the footer	Yes
The author's contact details in an article	Yes
A delivery address the visitor types in a form	No	Form fields. See Autocomplete
An address mentioned in the text ("The festival is held at 12 Market Square.")	No	Plain text in a paragraph
A list of other businesses' addresses (a directory)	No	A list, a table, or a description list
A publication date, "last updated", or opening hours	No	`<time>`, or a paragraph
A postal address as a sample in a tutorial	No	A code block or a paragraph
An email address in a sentence ("Email us at ...")	Not needed	A link in the paragraph

Also, the content of <address> should be only contact information. The specification says not to put other things in it, such as a publication date or a long biography. And <address> cannot contain headings, sectioning elements (<article>, <section>, <nav>, <aside>), a <header>, a <footer>, or another <address>.

What about a list of branches?

A "Our offices" page with ten branch addresses is not the contact information for the page's owner in the narrow sense, though many sites mark them up with <address> anyway. The safe approach: use <address> for the primary contact details, and use a list with a <h3> for each branch (plus clear text), or an <address> inside each branch's own <article>, if each branch has its own page.

Building Contact Links

Contact details are most useful as links that do something. Here is the toolbox. Try the builder, and watch the href change.

HTML Code
Browser Output

index.html
<!-- Email, with an optional subject -->
<a href="mailto:hello@example.com?subject=Question%20about%20tickets">hello@example.com</a>

<!-- Phone: the href has no spaces, and has the country code -->
<a href="tel:+919876543210">+91 98765 43210</a>

<!-- Chat link -->
<a href="https://wa.me/919876543210">Message us</a>

<!-- Map search (a place name, URL-encoded) -->
<a href="https://www.openstreetmap.org/search?query=Market%20Square%2C%20Springfield">Find us on the map</a>

script.js
// Build safe links from values in code, never by gluing raw text together
const subject = "Question about tickets & prices";
const href = "mailto:hello@example.com?subject=" + encodeURIComponent(subject);

console.log(href);
// mailto:hello@example.com?subject=Question%20about%20tickets%20%26%20prices

http://127.0.0.1:5500/index.html

Kind of link

An email address

Subject line (optional)

<a href="mailto:hello@example.com?subject=Question%20about%20tickets">hello@example.com</a>

Try the link: hello@example.com (disabled in this demo)

Rules for each link type

Link	Rules
`mailto:`	Optional `?subject=` and `&body=`, URL-encoded with `encodeURIComponent`. Opens the visitor's email app, so also offer a contact form for people without one
`tel:`	Use the international format with `+` and the country code, with no spaces or punctuation in the `href` (`tel:+919876543210`). The visible text can be formatted for people
Chat links	Follow the service's own link format, and offer another way to reach you
Map links	Link to a map for a place, and also write the address as text, because a map is not enough for everyone

Write the visible text as clearly as the link

A screen reader reads the visible text: "hello at example dot com". For phone numbers, spaces help it read the digits in groups. A link such as "Call us on +91 98765 43210" is clearer than "Click here".

Where to Put It

Place	Use
In the page footer	The site or company contact details (the most common use)
In an article's footer or header	How to reach the author
On a contact page, in `<main>`	The main way to reach the organisation. Combine with a contact form
In a "Contact us" section of a landing page	Inside a `<section>` with a heading

An <address> has no heading of its own. If it needs one ("Contact us"), put the heading outside it, in the surrounding <section>.

Styling

style.css
address {
  font-style: normal;          /* remove the default italics */
  line-height: 1.6;
}

address a {
  display: inline-block;       /* easier to tap on phones */
  padding-block: 0.25rem;
}

Keep contact links large enough to tap (at least 24 by 24 CSS pixels, ideally 44).

Accessibility at a Glance

Use real links (mailto: and tel:), with clear visible text.
Do not put contact information only in an image (a picture of a phone number cannot be read, copied, or tapped).
Offer more than one way to get in touch: email, phone, a form, and a postal address. Some visitors cannot use the phone, or cannot use a form.
Write the address as text, not only as a map link or an embedded map.
Say when you answer: "Mon to Fri, 9:00 to 17:00 (UTC+05:30)", in a nearby paragraph.
Do not rely on icons (an envelope or a phone) without text.
Keep the font style readable: if you keep the default italics, make sure the text is still easy to read.
Give a contact form real labels, and clear error messages. See Accessible Forms.

Security and Privacy Notes

Spam bots harvest email addresses from pages. Publishing one invites spam. Options: use a contact form, use a role address (such as hello@) that you can filter, or accept the risk knowingly. Hiding the address with JavaScript tricks stops simple bots only, and also breaks the page for some real visitors.
Never publish a private person's contact details (home address, personal phone) without their clear permission. This can expose people to harassment. Business contact details are different, but still need consent from the people named.
Data protection laws (such as the GDPR in Europe, and similar laws elsewhere) treat names, emails, and phone numbers as personal data. Publish only what you need, and be ready to remove it on request.
Build mailto: and tel: links safely. If a value comes from user input, encode it, and do not allow line breaks or extra parameters to be injected into the link.
Beware of phishing: a link that shows one address and goes to another is deceptive. Keep the visible text and the real target in agreement.
Third-party maps and chat widgets may track your visitors. Load them only with consent, and give the address as plain text as well.
Open outside links safely: rel="noopener" for map and chat links in a new tab.

Global Audience Notes

Use the international phone format (+, country code, then the number) in both the href and the visible text, so the number works from any country.
Address formats differ a lot: the order of lines, whether there is a postal code, whether there are states or districts, and which script is used. Write addresses in the way that country's post expects, and include the country.
Provide the local-language version of an address (and a Latin-letter version, if your visitors may need it), so couriers and taxi drivers can read it.
Where street addresses are informal, add landmarks, a map link, or a location code such as a Plus Code.
Right-to-left pages: phone numbers and email addresses are left-to-right text. Wrap them in <bdi> or set dir="ltr" so punctuation such as the + does not jump to the wrong side:

<p dir="rtl">اتصل بنا: <bdi><a href="tel:+971501234567">+971 50 123 4567</a></bdi></p>

Show hours with a time zone, and mention languages your support speaks.
Do not assume every visitor has a phone, or an email app. Offer a form or chat as well.
Currency and regional contact numbers: list a local number for each region you serve, if you can.

Common Mistakes to Avoid

Using <address> for every postal address, including addresses in the story text.
Using it for a form's delivery address.
Putting a publication date, opening hours, or a biography inside it.
Putting a heading or a <footer> inside it.
Leaving the default italics on without meaning to.
Plain-text email and phone numbers that are not links.
A tel: link with spaces or no country code.
Putting contact details only in an image.
Publishing a private person's home address or phone.
Building mailto: links from unencoded user input.
Only a map link and no written address.
Using <br> for spacing everywhere, instead of only for real line breaks in addresses.

Practice Time

Try these in your editor:

Build a footer with an <address> containing a name, two address lines, an email link, and a phone link.
Reset the italics with font-style: normal.
Add an article with its own <address> for the author, and use the console script to confirm it belongs to the article.
Write a mailto: link with a subject that includes spaces and an ampersand, and encode it properly.
Write a tel: link in international format, and check it on a phone.
Add a map link and the address as text.
Take five addresses you can find on a website. Decide which should be <address> and which should not.
Write contact details for a page on a right-to-left site, using <bdi>.
Replace a picture of a phone number with real text and a link.
Bonus: write a short paragraph for your own site, saying when you answer and in which languages.

Quick Recap

Click a question to check your answer.

1. What is the <address> element for?

It marks contact information for its nearest <article> ancestor, or, if there is none, for the whole page. For example, an author's details in an article, or a company's details in the page footer.

2. Is <address> for any postal address?

No. It is not for delivery addresses in forms, addresses mentioned in a story, or lists of other people's addresses. Use plain text, form fields, or lists for those.

3. What should and should not go inside it?

Only contact information. No headings, sectioning elements, headers, footers, other addresses, or unrelated details such as publication dates. Use <br> for real line breaks within the address.

4. How do you write a good phone link?

Use tel: with the international format and no spaces or punctuation in the href, for example tel:+919876543210. Show the number in a readable format as the link text.

5. How do you deal with the default italic style?

Browsers show <address> in italics by default. Reset it with address { font-style: normal; } if you do not want italics.

6. What are the main privacy and spam concerns?

Published emails are harvested by bots, and personal details of private people can lead to harassment and may be protected by data laws. Prefer contact forms or role addresses, get consent, and encode values in mailto: links.

Key Takeaways

<address> holds contact information for the nearest article's author or owner, or else for the whole page.
It is not for arbitrary postal addresses, form delivery addresses, or other people's addresses.
Put only contact details in it. It cannot contain headings, sectioning elements, a header, a footer, or another address.
Make contact details real links: mailto: (with encoded subject) and tel: (international format, no spaces).
Reset the default italics with font-style: normal, and use <br> only for true line breaks.
Write the address as text as well as a map link, and offer more than one way to get in touch.
Protect privacy: beware of spam harvesting, publish only what people agreed to, and encode link values.
For international audiences, use + country codes, local address formats, and <bdi> for numbers on right-to-left pages.

Next, learn how to build expandable content with no JavaScript, in Details, or return to the Semantic HTML overview.

What You Will Learn​

The Basics​

What <address> Is For​

Try It: Whose Contact Details Are These?​

How to shape a loaf

What <address> Is Not For​

Building Contact Links​

Rules for each link type​

Where to Put It​

Styling​

Accessibility at a Glance​

Security and Privacy Notes​

Global Audience Notes​

Common Mistakes to Avoid​

Practice Time​

Quick Recap​

Key Takeaways​