HTML address Tag: A Step-by-Step Guide

The HTML address tag is used to define contact information for a webpage or article.

It is a semantic HTML tag that helps browsers and search engines understand that the content inside it is contact information.

If you are learning HTML, understanding the <address> tag will help you write cleaner and more meaningful code.

In this guide, you’ll learn:

What the HTML address tag is
Where to use it
Syntax and examples
Best practices
Common mistakes
Real-world use cases

Let’s start step by step.

What is the HTML Address Tag?

The <address> tag is used to define contact information for:

A webpage
An article
An author
A company

The browser usually displays the content in italic style.

Important: It is not meant for just any physical address. It is specifically for contact information related to the content.

Basic Syntax of HTML Address Tag

<address>
    Contact information here
</address>

Everything inside the <address> tag is treated as contact information.

Simple Example

<!DOCTYPE html>
<html>
<body>

<h2>Contact Information</h2>

<address>
Written by John Doe<br>
Visit us at: example.com<br>
Email: john@example.com<br>
Phone: +91 9876543210
</address>

</body>
</html>

The browser will usually show the text in italics.

Where Should You Use the address Tag?

Inside a Webpage Footer

The most common use is inside the <footer> sectio

<footer>
    <address>
        Email: support@example.com<br>
        Phone: +91 1234567890
    </address>
</footer>

For Article Author Information

<article>
    <h2>HTML Tutorial</h2>
    <p>This is a beginner-friendly tutorial.</p>

    <address>
        Author: Arvinder Kaur<br>
        Email: arvinder@example.com
    </address>
</article>

For Company Contact Details

<address>
    ABC Company Pvt. Ltd.<br>
    123 Main Street, Delhi<br>
    Email: info@abccompany.com
</address>

Address Tag with Links

You can combine <address> with anchor tags for better functionality.

Example:

<address>
    Email: <a href="mailto:info@example.com">info@example.com</a><br>
    Phone: <a href="tel:+911234567890">+91 1234567890</a>
</address>

This makes the email and phone number clickable.

Address Tag vs Paragraph Tag (Comparison Table)

Feature	`<address>` Tag	`<p>` Tag
Purpose	Contact information	General text
Semantic meaning	Yes	No
Default style	Italic	Normal
SEO value	Higher (semantic)	Basic
Used for contact info	✅ Yes	❌ No

The <address> tag gives meaning to your content, which helps search engines.

Step-by-Step Guide to Using HTML Address Tag

Step 1: Open Your HTML File

Use a code editor like VS Code or Notepad.

Step 2: Add Contact Information Section

<h2>Contact Us</h2>

Step 3: Wrap Contact Details Inside `<address>`

Email: support@example.com<br>
Phone: +91 9876543210
</address>

Step 4: Save and Test in Browser

Open the file in your browser and check the formatting.

Real-World Use Cases

The HTML address tag is used in:

Business websites
Portfolio websites
Blog author sections
E-commerce websites
Company contact pages

Common Mistakes to Avoid

Using Address Tag for Random Physical Addresses

Wrong:

<address>
Taj Mahal, Agra
</address>

Use it only if it is contact information related to the page.

Using It for General Text

Wrong:

<address>
Welcome to my website!
</address>

The address tag is not for regular content.

Forgetting Line Breaks

Without <br>, content may appear on one line.

Correct:

Email: info@example.com<br>
Phone: +91 1234567890
</address>

Overusing the Address Tag

Use it only where appropriate (footer, author info, contact section).

Best Practices for HTML Address Tag

Use it only for contact information
Place it inside <footer> when possible
Combine with <a> for clickable email/phone
Keep it clear and structured
Avoid unnecessary text inside it

SEO Benefits of HTML Address Tag

The <address> tag is semantic, which means:

Search engines understand it better
Improves structured content
Helps accessibility tools
Enhances professional coding standards

Semantic HTML is important for modern SEO.

Complete Structured Example

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

<body>

<h1>Contact Us</h1>

<p>If you have any questions, feel free to reach out.</p>

<footer>
    <address>
        Company: LearnWebCoding<br>
        Email: <a href="mailto:support@learnwebcoding.com">
        support@learnwebcoding.com
        </a><br>
        Phone: <a href="tel:+911234567890">
        +91 1234567890
        </a>
    </address>
</footer>

</body>
</html>

This is clean, semantic, and SEO-friendly.

FAQs About HTML Address Tag

What is the purpose of the HTML address tag?

It defines contact information for a webpage or author.

Does the address tag make text italic?

Yes, browsers usually display it in italics by default.

Can I use links inside the address tag?

Yes, you can use <a> for email and phone links.

Is the address tag important for SEO?

Yes, because it adds semantic meaning to contact information.

Can I style the address tag with CSS?

Yes.

w3htmlschool