HtmlHow-ToBeginner · 3 min read

How to Create Address in HTML: Simple Guide with Examples

To create an address in HTML, use the <address> tag which semantically marks contact information. Place the address content inside this tag to show it properly in browsers and assistive technologies.

📐

Syntax

The <address> tag defines contact information for the author or owner of a document or article. It usually contains physical address, email, phone number, or other contact details.

Use it like this:

<address>: Starts the address block.
Contact details inside the tag.
</address>: Ends the address block.

html

<address>
  123 Main Street<br>
  Springfield, USA<br>
  Email: contact@example.com<br>
  Phone: (123) 456-7890
</address>

Output

123 Main Street Springfield, USA Email: contact@example.com Phone: (123) 456-7890

💻

Example

This example shows a simple webpage with an address block using the <address> tag. It displays contact info clearly and semantically.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Info</title>
</head>
<body>
  <h1>Contact Us</h1>
  <address>
    456 Elm Street<br>
    Metropolis, USA<br>
    Email: support@website.com<br>
    Phone: (987) 654-3210
  </address>
</body>
</html>

Output

⚠️

Common Pitfalls

Many beginners make these mistakes when creating addresses in HTML:

Using <div> or <p> instead of <address>, which loses semantic meaning.
Putting non-contact info inside <address>, which confuses screen readers.
Not using line breaks (<br>) or block elements inside <address>, causing poor formatting.

html

<!-- Wrong way -->
<div>
  123 Fake Street<br>
  Springfield
</div>

<!-- Right way -->
<address>
  123 Fake Street<br>
  Springfield
</address>

📊

Quick Reference

<address>: Use for contact info only.
Include physical address, email, phone, or social links.
Use <br> for line breaks inside.
Do not use for general text or unrelated info.

✅

Key Takeaways

Use the

tag to mark contact information semantically in HTML.

Include physical address, email, and phone inside the

tag with line breaks for clarity.

Avoid using generic tags like

for addresses to keep meaning clear for browsers and assistive tools.

Keep only contact details inside

to prevent confusion.

Use
tags inside

to format the address on separate lines.