HTML Addresses

by

HTML addresses are used to display contact information on a webpage. The HTML <address> element is specifically designed for representing contact information related to a person, organization, or webpage.

The <address> element can contain information such as an email address, phone number, physical address, website URL, or social media information. Using this semantic HTML element helps browsers and other tools understand that the content represents contact information.

In this tutorial, you will learn what HTML addresses are, how to use the <address> element, its syntax, examples, styling, common mistakes, and best practices.

What Is the HTML <address> Element?

The HTML <address> element is used to provide contact information for the nearest article or webpage.

A simple example is:

<address>
  Written by John Doe<br>
  Email: john@example.com<br>
  Phone: +1 123-456-7890
</address>

The <address> element tells the browser that the information inside it represents contact details.

It is commonly used in the footer of a webpage or at the end of an article.

HTML <address> Syntax

The basic syntax of the HTML <address> element is:

<address>
  Contact information
</address>

For example:

<address>
  Web4Learners<br>
  Email: contact@example.com<br>
  New York, USA
</address>

The <address> element is a container element, so it has both an opening and closing tag.

HTML Address Example

Here is a simple HTML address example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Address Example</title>
</head>
<body>

  <h1>Contact Us</h1>

  <address>
    Web4Learners<br>
    Email: contact@example.com<br>
    Phone: +1 123-456-7890
  </address>

</body>
</html>

The browser displays the information as contact details.

The <br> element is used to place each piece of information on a separate line.

HTML Address for a Website Author

The <address> element can be used to provide information about the author of an article.

For example:

<article>
  <h2>Learn HTML</h2>

  <p>
    HTML is the standard markup language used to create webpages.
  </p>

  <address>
    Written by John Doe<br>
    Email: john@example.com
  </address>
</article>

Here, the <address> element provides contact information for the person responsible for the article.

This is particularly useful for blogs, tutorials, documentation, and other content websites.

HTML Address for a Company

You can also use <address> to display company contact information.

<address>
  Web4Learners<br>
  123 Main Street<br>
  New York, NY 10001<br>
  USA
</address>

A company contact section may contain:

  • Company name
  • Street address
  • City
  • State
  • Country
  • Email address
  • Phone number
  • Website

However, only information that represents contact details should normally be placed inside the <address> element.

HTML Address With Email

Email addresses are commonly included inside an <address> element.

For example:

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

The mailto: link allows users to click the email address and open their default email application.

You can learn more about creating links in our guide to HTML Links.

Using an email link makes contact information more useful for website visitors.

HTML Address With Phone Number

A phone number can also be included in an HTML address.

<address>
  Phone:
  <a href="tel:+11234567890">
    +1 123-456-7890
  </a>
</address>

The tel: link allows compatible devices to open the phone application when the user taps the number.

This can be particularly useful for websites viewed on smartphones.

HTML Address With a Website Link

You can include a website link within the <address> element.

<address>
  Visit:
  <a href="https://example.com">
    Example Website
  </a>
</address>

The <a> element creates the clickable link, while the <address> element identifies the surrounding information as contact information.

If you are learning how links work in HTML, understanding the HTML Links tutorial will help you understand the href attribute and different types of links.

HTML Address With Multiple Lines

The <address> element can contain multiple lines of contact information.

<address>
  Web4Learners<br>
  123 Main Street<br>
  New York, NY 10001<br>
  USA<br>
  Email: contact@example.com<br>
  Phone: +1 123-456-7890
</address>

The <br> element creates a line break between each piece of information.

You can learn more about line breaks in HTML in our tutorial on HTML Line Breaks.

HTML <address> vs <p> Element

You might wonder why you need <address> when you can simply use a paragraph.

For example:

<p>
  Web4Learners<br>
  Email: contact@example.com
</p>

This displays the information, but it does not provide the same semantic meaning.

With <address>:

<address>
  Web4Learners<br>
  Email: contact@example.com
</address>

The browser and other tools can understand that the content represents contact information.

Therefore, <address> is more appropriate when the content is specifically contact information.

HTML <address> and Semantic HTML

The <address> element is a semantic HTML element.

Semantic elements describe the meaning of the content they contain.

For example:

<header>

represents introductory content.

<footer>

represents footer content.

<article>

represents an independent piece of content.

<address>

represents contact information.

Using semantic HTML helps make your webpage structure clearer and more meaningful.

If you are learning the fundamentals of HTML, it is also useful to understand HTML Elements because elements form the basic building blocks of an HTML document.

HTML Address Inside a Footer

One of the most common places to use <address> is inside a webpage footer.

<footer>
  <address>
    Web4Learners<br>
    Email:
    <a href="mailto:contact@example.com">
      contact@example.com
    </a><br>
    Phone:
    <a href="tel:+11234567890">
      +1 123-456-7890
    </a>
  </address>
</footer>

This creates a semantic contact section within the footer.

A footer can contain other information as well, such as copyright information, navigation links, and related content.

HTML Address Inside an Article

The <address> element can also be used at the end of an article.

<article>
  <h1>HTML Tutorial</h1>

  <p>
    HTML is used to structure content on the web.
  </p>

  <address>
    Written by John Doe<br>
    Email:
    <a href="mailto:john@example.com">
      john@example.com
    </a>
  </address>
</article>

In this example, the address provides contact information for the article’s author.

The <address> element should be associated with the nearest article or webpage rather than being used simply because the content happens to contain a physical location.

HTML Address and <br> Element

The <address> element does not automatically require every item to appear on a separate line.

You can use <br> when you want to create line breaks.

<address>
  John Doe<br>
  123 Main Street<br>
  New York, NY<br>
  USA
</address>

Without <br> elements, the browser may display the information as continuous text.

For more information about creating separate lines, see our guide to HTML Line Breaks.

HTML Address Styling With CSS

You can style the <address> element using CSS.

For example:

<style>
  address {
    font-style: normal;
    line-height: 1.8;
  }
</style>

By default, browsers commonly display the content of <address> in italic text.

You can remove the italic style with:

address {
  font-style: normal;
}

You can also change the color, font size, spacing, background, border, and other visual properties.

HTML Address With CSS Class

You can assign a class to the <address> element.

<address class="contact-info">
  Web4Learners<br>
  Email: contact@example.com<br>
  Phone: +1 123-456-7890
</address>

Then style it using CSS:

.contact-info {
  font-style: normal;
  line-height: 1.7;
  font-size: 16px;
}

Using a class is useful when you have multiple contact sections with different designs.

HTML Address With Email and Phone Links

A complete contact section can combine several HTML elements.

<address>
  Web4Learners<br>
  123 Main Street<br>
  New York, NY 10001<br>
  USA<br>

  Email:
  <a href="mailto:contact@example.com">
    contact@example.com
  </a><br>

  Phone:
  <a href="tel:+11234567890">
    +1 123-456-7890
  </a>
</address>

This example combines:

  • <address> for contact information
  • <br> for line breaks
  • <a> for clickable links
  • mailto: for email
  • tel: for phone numbers

Understanding HTML Links is useful when creating interactive contact information.

What Should You Put Inside <address>?

The <address> element can contain relevant contact information such as:

  • Author name
  • Company name
  • Email address
  • Phone number
  • Physical address
  • Website
  • Social media contact information

For example:

<address>
  John Doe<br>
  Email:
  <a href="mailto:john@example.com">john@example.com</a><br>
  Phone:
  <a href="tel:+11234567890">+1 123-456-7890</a>
</address>

The important point is that the content should represent contact information.

What Should Not Be Put Inside <address>?

The <address> element should not be used simply for any text containing a geographical location.

For example:

<address>
  New York is one of the largest cities in the United States.
</address>

This is not an appropriate use because the sentence is general information about a location rather than contact information.

A normal paragraph is more appropriate:

<p>
  New York is one of the largest cities in the United States.
</p>

Use <address> when the information provides a way to contact a person, organization, or the relevant content’s author.

HTML Address Best Practices

Follow these best practices when using the <address> element.

Use It for Contact Information

Use <address> specifically for contact details.

Use Semantic HTML

Use <address> instead of generic containers when the content represents contact information.

Use Links for Email and Phone Numbers

Make contact details interactive where appropriate.

<a href="mailto:contact@example.com">Email Us</a>

and:

<a href="tel:+11234567890">Call Us</a>

Use <br> Carefully

Use <br> when line breaks are required inside contact information.

Style With CSS

Keep presentation separate from HTML structure whenever possible.

Common HTML Address Mistakes

Using <address> for Any Physical Location

A physical location is not automatically contact information.

Forgetting the Closing Tag

Incorrect:

<address>
  Web4Learners

Correct:

<address>
  Web4Learners
</address>

Using <address> for Normal Text

Do not use <address> simply to style text.

Use CSS when you need styling.

Forgetting mailto:

Instead of:

<a href="contact@example.com">
  contact@example.com
</a>

use:

<a href="mailto:contact@example.com">
  contact@example.com
</a>

This allows the email link to work as intended.

HTML Address Example: Complete Contact Section

Here is a complete example that combines the concepts covered in this tutorial:

<!DOCTYPE html>
<html>
<head>
  <title>Contact Information</title>

  <style>
    address {
      font-style: normal;
      line-height: 1.8;
    }
  </style>
</head>

<body>

  <footer>

    <h2>Contact Us</h2>

    <address>
      Web4Learners<br>
      123 Main Street<br>
      New York, NY 10001<br>
      USA<br>

      Email:
      <a href="mailto:contact@example.com">
        contact@example.com
      </a><br>

      Phone:
      <a href="tel:+11234567890">
        +1 123-456-7890
      </a>
    </address>

  </footer>

</body>
</html>

This example creates a complete contact section with a company name, physical address, email address, and phone number.

HTML <address> vs <div>

Both <address> and <div> can contain text, but they have different purposes.

<div>
  Web4Learners
</div>

The <div> element is a generic container and does not communicate what the content means.

On the other hand:

<address>
  Web4Learners<br>
  Email: contact@example.com
</address>

provides semantic meaning because the content represents contact information.

Therefore, use <address> when the content is contact information and <div> when you need a generic container.

HTML Address and SEO

The <address> element is primarily a semantic HTML element rather than a direct SEO ranking technique.

Using semantic HTML can help make your content structure clearer, but you should not expect <address> alone to improve search rankings.

For SEO, focus on:

  • Useful content
  • Clear headings
  • Good internal linking
  • Descriptive page titles
  • Helpful metadata
  • Mobile-friendly design
  • Fast page performance
  • Accessible HTML
  • Logical site structure

For example, linking naturally between related HTML tutorials can help users discover more relevant content. If you’re continuing through the HTML tutorial series, you can learn about HTML Links next.

HTML Address and Accessibility

Semantic HTML can make content easier for browsers and assistive technologies to interpret.

Using <address> correctly tells the browser that a section represents contact information.

You should also use meaningful link text.

Instead of:

<a href="mailto:contact@example.com">Click Here</a>

you can write:

<a href="mailto:contact@example.com">
  Email Web4Learners
</a>

Descriptive link text gives users more information about where the link leads or what action it performs.

Key Takeaways

The HTML <address> element is used to represent contact information.

Remember these important points:

  • <address> is a semantic HTML element.
  • It is used for contact information.
  • It can contain an author’s contact information.
  • It can contain company contact information.
  • Email addresses can use the mailto: scheme.
  • Phone numbers can use the tel: scheme.
  • <br> can be used to create line breaks.
  • CSS can be used to style an <address> element.
  • <address> should not be used for every physical location mentioned on a webpage.
  • Use <address> for meaningful contact information rather than general text.

The basic syntax to remember is:

<address>
  Contact information
</address>

Once you understand HTML addresses, the next useful topic is HTML Links, where you can learn how to create clickable links, email links, phone links, and links to other webpages.

Frequently Asked Questions

What is the HTML <address> element?

The <address> element is used to represent contact information for the nearest article or webpage.

Can <address> contain an email address?

Yes. You can place an email address inside <address> and make it clickable using the mailto: scheme.

Can I put a phone number inside <address>?

Yes. Phone numbers can be included and made clickable using a tel: link.

Is <address> a semantic HTML element?

Yes. <address> is a semantic element that identifies contact information.

Can I use <address> in a footer?

Yes. The <address> element is commonly used within a webpage footer to provide contact information.

Is <address> used only for physical addresses?

No. It can contain different types of contact information, including email addresses, phone numbers, website information, and other relevant contact details.

Does <address> improve SEO?

The <address> element provides semantic meaning, but using it alone does not guarantee better search rankings. Good content, site structure, accessibility, performance, and internal linking are more important for overall SEO.

Can I style <address> with CSS?

Yes. You can style <address> using CSS just like other HTML elements.

What is the difference between <address> and <div>?

<address> has a specific semantic purpose for contact information, while <div> is a generic container without specific semantic meaning.