HTML <address> Tag

Q: What is the HTML address tag used for?

The HTML address element represents contact information for the author or owner of the nearest article or body element — typically email, physical address, or phone details in a footer or byline.

Q: Can I use address for any postal address on a page?

No. The address tag is for contact information related to the document itself, not arbitrary business addresses in page content. Use regular text or structured data for unrelated locations.

Q: Where should the address tag be placed?

Most often inside a footer element for site-wide contact details, or near an article for author information. It can appear wherever document-related contact info is relevant.

Q: Does the address tag have specific attributes?

No tag-specific attributes exist. Use global HTML attributes like class, id, style, and lang for styling and identification.

Q: Can I put links inside an address element?

Yes. mailto: and tel: links are common inside address for clickable email addresses and phone numbers.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Semantic HTML

HTML address tag tutorial — contact information and author details

Overview

What You’ll Learn

By the end of this tutorial, you’ll confidently mark up contact information with semantic HTML in real-world projects.

Core Syntax

Write valid <address> elements for document-related contact details.

Semantic Rules

Understand when to use address vs regular text for postal information.

Footer Patterns

Place site-wide contact info inside <footer> elements.

Author Contact

Mark up bylines and article author details with mailto: links.

CSS Styling

Override default italics and match your site’s design system.

Production Tips

Apply accessibility and semantic HTML best practices for contact sections.

Fundamentals

What Is the `<address>` Tag?

The address element (<address>) is a semantic HTML tag used to represent contact information for the author or owner of the nearest <article> or <body> element. It is commonly found in footers, article bylines, and author bio sections.

💡

Document contact, not any address

Use <address> for contact details related to the page itself—the site owner’s email, phone, or physical address. Do not use it for arbitrary business addresses mentioned in article body text.

The element is a flow content block that starts on a new line by default. Browsers render it in italics, and it is most often nested inside a <footer> for site-wide contact details or placed below a blog post for author information.

Foundation

📝 Syntax

Wrap the relevant contact information inside opening and closing <address> tags:

syntax.html

<!-- Basic address syntax -->
<address>
  Your Contact Information Here
</address>

Syntax Rules

Include plain text, <br> line breaks, and <a> links for email or phone.
Use mailto: and tel: links for clickable contact actions.
Do not nest an <address> inside another <address>.
Reserve the element for document-related contact—not random locations in body content.

footer-example.html

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

Cheat Sheet

⚡ Quick Reference

Use Case	Code Snippet	Result
Basic contact	`<address>Email: contact@example.com</address>`	Email: contact@example.com
Email link	`<address><a href="mailto:...">...</a></address>`	Contact hello@codetofun.com
Author byline	`<address>Written by <a href="mailto:...">...</a></address>`	Written by John Doe
Footer contact	`<footer><address>...</address></footer>`	Site-wide contact block
Phone link	`<a href="tel:+15551234567">Call us</a>`	Call us
Default style	`<address>...</address>`	Italic text by default

Reference

🧰 Attributes

The <address> tag has no tag-specific attributes. Use global HTML attributes for styling and identification:

class / id Global

Hook for CSS and JavaScript. Common pattern: class="author-info" or class="site-contact".

<address class="site-contact">

style Optional

Inline styling for quick overrides. Prefer CSS classes in production for maintainability.

style="font-style: normal;"

lang Optional

Hints the language of the contact information when it differs from the page language.

lang="en-US"

Allowed content Phrasing

Text, links, and <br> elements. No nested <address> or block-level children.

Text, <a>, <br>

The address element uses global attributes only. There are no tag-specific attributes in the HTML specification.

Hands-On

Examples Gallery

Real-world contact patterns with copy-ready code, live previews, and hands-on practice.

Basic Syntax

The simplest form: wrap contact text inside <address>. Browsers display it in italics by default.

basic-syntax.html

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

Styling with class & style

Apply class and style attributes to customize the appearance of author contact information.

address.html

<address class="author-info" style="font-style: italic;">
  Author: John Doe <br>
  Email: john.doe@example.com
</address>

Try It Yourself

📚 Common Use Cases

Here are the most frequent ways developers use the <address> tag in real projects.

Document Author Information

Place author contact details below an article or page. Use mailto: links so visitors can email the author directly.

document-author-information.html

<address>
  Written by <a href="mailto:author@example.com">John Doe</a>.<br>
  Visit us at: 123 Main Street, Anytown, USA.
</address>

Try It Yourself

Footer Contact Details

The most common pattern: nest <address> inside <footer> alongside copyright text for site-wide contact information.

footer-contact-details.html

<footer>
  <p>Copyright &copy; 2026 Your Website Name</p>
  <address>
    Contact us at <a href="mailto:info@example.com">info@example.com</a>
  </address>
</footer>

Try It Yourself

Design

Styling <address> with CSS

Override the default italic style and match your site design:

default Italic text

font-style: normal Override italics

address a Link styling

footer address Footer spacing

address-styles.css

/* Base address */
address {
  font-style: normal;
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Links inside address */
address a {
  color: #2563eb;
  text-decoration: underline;
}

/* Footer contact block */
footer address {
  margin-top: 0.5rem;
}

Live styled contact block

🧠 How <address> Works

Author adds contact markup

Wrap document-related contact details in <address>, often inside <footer>.

Markup

Browser applies semantics

The element is exposed to assistive technology as contact information for the document. Default italic styling is applied.

Semantics

User interacts with links

mailto: and tel: links inside address open the email client or phone dialer.

Interaction

Clear, accessible contact info

Visitors find how to reach the author or site owner. Search engines and screen readers understand the purpose of the content.

Compatibility

Universal Browser Support

The <address> tag is supported in every browser without polyfills or fallbacks.

✓ Baseline · Since HTML 2

Works everywhere your users are

From legacy Internet Explorer to the latest Chromium builds — the address element is one of the most universally supported semantic HTML tags.

100% Core tag support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<address> tag 100% supported

Bottom line: Ship contact markup with confidence. The <address> element is safe to use in every production environment today.

Wrap Up

Conclusion

By incorporating the <address> tag into your HTML documents, you provide valuable contact information and enhance the overall user experience.

Place it within a <footer> for site-wide details or near articles for author info. Use mailto: links, apply CSS for a polished look, and reserve the element for document-related contact—not arbitrary addresses in body content.

View Quick Reference Explore Related Topics

Pro Tips

💡 Best Practices

✅ Do

Use <address> inside <footer> for contact details related to the document
Provide mailto: and tel: links for enhanced user interaction
Use CSS to make contact information visually appealing and easy to find
Keep contact info accurate and up to date
Use <address> for the author or site owner, not random businesses mentioned in content

❌ Don’t

Use <address> for any postal address mentioned in article body text
Nest an <address> inside another <address>
Include non-contact content like opening hours without contact context
Rely on default italics alone—style it to fit your design system
Forget to test mailto links on mobile devices

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<address>`

Bookmark these before you ship — they’ll make every contact section clearer and more accessible.

Core concepts

📧 01

Document Contact Info

<address> marks contact details for the document or article author—not any random address.

Foundation

🛠 02

Footer Placement

Commonly nested inside <footer> for site-wide contact details.

Pattern

🔗 03

Global Attributes Only

No tag-specific attributes—use class, id, and style for customization.

Reference

✉ 04

mailto: Links

Include clickable email links inside address for direct contact.

Essential

🎨 05

Override Default Italics

Browsers render address in italics by default—style it to match your design.

Design

🌐 06

Universal Support

Supported in every browser including IE. No polyfills or fallbacks required.

Compatibility

❓ Frequently Asked Questions

What is the HTML address tag used for?

The <address> element represents contact information for the author or owner of the nearest article or body element—typically email, phone, or physical address in a footer or byline.

Can I use address for any postal address on a page?

No. Use <address> only for contact information related to the document itself. For unrelated business addresses in content, use regular paragraph text.

Where should the address tag be placed?

Most often inside a <footer> for site-wide contact, or below an article for author details. It can appear anywhere document-related contact info is appropriate.

Does the address tag have specific attributes?

No tag-specific attributes exist. Use global attributes like class, id, style, and lang.

Can I put links inside an address element?

Yes. mailto: and tel: links are standard inside <address> for clickable email and phone contact.

Practice in the Live Editor

Build a footer with address contact info and preview it instantly.

Try Footer Example →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

7 people found this page helpful

HTML acronym Tag HTML applet Tag

HTML <address> Tag

What You’ll Learn

Core Syntax

Semantic Rules

Footer Patterns

Author Contact

CSS Styling

Production Tips

What Is the <address> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

🧰 Attributes

Examples Gallery

Basic Syntax

Styling with class & style

📚 Common Use Cases

Document Author Information

Footer Contact Details

Styling <address> with CSS

🧠 How <address> Works

Author adds contact markup

Browser applies semantics

User interacts with links

Clear, accessible contact info

Universal Browser Support

Works everywhere your users are

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <address>

Document Contact Info

Footer Placement

Global Attributes Only

mailto: Links

Override Default Italics

Universal Support

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <a> Tag

HTML <abbr> Tag

HTML Entities

Footer Patterns

Email Links

HTML Editor

Practice in the Live Editor

About the author

What Is the `<address>` Tag?

Six truths every developer should know about `<address>`