HTML address Tag: Contact Information

The address tag in HTML shows contact details. The <address> tag helps show who owns the page or article.

Understand the <address> Tag in HTML

The <address> tag defines contact info. It refers to the page author or owner. Use it to show names, emails, URLs, or phone numbers.

The syntax looks like this:

<address>
  Contact Name<br>
  <a href="mailto:email@example.com">email@example.com</a>
</address>

You can place these types of content:

• Full name
• Email link
• URL
• Street address
• Phone number

Do not add unrelated content. The <address> tag must hold contact data only.

You can place the <address> element inside the <footer> element and place it under a <article> tag. You can also place it inside the <body> tag near the content it supports.

Here is a quick example:

<footer>
  <address>
    Written by John Smith<br>
    <a href="mailto:john@example.com">john@example.com</a>
  </address>
</footer>

— Can You Nest Other Tags Inside <address>?

How Browsers Render the <address> Tag

Browsers apply default styles to the <address> tag. In most cases, the text appears in italic. The block gains space above and below. The style looks like a normal paragraph but with a soft font.

Browsers handle it this way:

• Apply block layout
• Add an italic font style
• Add margins before and after
• Respect line breaks inside

The Difference Between <address> and <footer> or <p>

The <address> tag holds contact details. Always about the author. While the <footer> groups end with info and hold copyright or links. The <p> shows normal text and holds any type of text block.

• The <address> to show contact data.
• Use <footer> to end a page or article.
• Use <p> for general text blocks.

Examples

Author Contact with Email Only:

<address>
  Author: Jane Doe<br>
  <a href="mailto:jane@example.com">jane@example.com</a>
</address>

This shows the author’s name and email. Use to place them on separate lines. Browsers show the block in italic by default.

Contact Details with Phone and Address:

<address>
  John Smith<br>
  42 Market Street<br>
  New York, NY 10001<br>
  (555) 123-4567
</address>

This shows a full contact section. Each line appears in block format. This keeps the info easy to scan.

Inside a Footer Section:

<footer>
  <address>
    Created by Alice Smith<br>
    Visit: <a href="https://www.example.com">example.com</a>
  </address>
</footer>

This places contact info at the bottom. The <address> tag sits inside the <footer> element.

Using Address for Multiple Authors:

<address>
  By: Tom White & Sarah Black<br>
  Email: <a href="mailto:team@example.com">team@example.com</a>
</address>

This holds data for a group. You can include names and a shared email. Keep the format clean and direct.

Wrapping Up

In this article, you learned what the <address> tag does. And how to write, place, and use it.

Here is a quick recap:

• The <address> tag holds contact info.
• Place it near the content it supports.
• Use inline tags only.
• Browsers show it in italic.
• Avoid non-contact content inside.

FAQs

<address>
  Email: <a href="mailto:user@example.com">user@example.com</a>
</address>

<footer>
  <address>Author Name</address>
</footer>

<address>
  Contact: <a href="mailto:hello@example.com">hello@example.com</a>
</address>

<address>
  <a href="mailto:a@b.com">a@b.com</a>
  <br>
  <strong>Office Address</strong>
</address>

Similar Reads