#30DaysofHTML Day 1: <address>

It's not just for postal addresses

What does <address> do?

<address> should be used for addresses. You guessed that already. But what kind of addresses, and in what context?

Address context

<address> was originally used to indicate contact information for the page owner. It has since evolved to include any type of contact information, generally the address of an article author or the address of a website.

🔹 If <address> is placed within an <article>, it is assumed this is the article author's address.

🔸 If <address> is placed closest to the <body> tag, it's assumed to be the website organization's address. Usually this type of information is found in a page <header> or <footer>.

Kinds of addresses

✅ Any information that's used to contact the website organization or the article author is fair game. That might include:

  • email addresses

  • social media links

  • phone numbers

The contact person's name may also be included in an address element.

⛔️ However, non-contact information is to be avoided.

Address example

💯 Check out NASA's planetary fact sheet, which contains an old-school <address> tag near the bottom of the page. Cheers to Dr. Dave Williams for using this tag correctly!

Little known fact about <address>

📫 Postal addresses are controversial with the address element.

The W3C says postal addresses are best marked up with a <p> element.

However, MDN indicates that postal address are fine to use with the address element.

✅ We lean towards postal addresses being OK to use with <address>. This reflects most usage we see (when we see it).

👀 This is one situation where <br>, the line break element, comes in handy and is Approved For Presentational Use Instead of CSS. Use <br> to create separate lines, to preserve appropriate formatting for the postal service. (Read more about the <br> element’s appropriate use.)

<address> demo

🖥 See an example of <address> on CodePen.

Try it Out

You try it: When should <address> be used?

🧪 Take the quiz and find out! There’s only one question, and it should take you less than 2 minutes to complete.

Quiz: Using <address>

🧩 Try today’s CodePen Challenge about the use of the <address> tag. When you’ve completed it, post your answer in our discussion in Substack.

CodePen Challenge: Using <address>

More information and examples

📚 MDN: Address

📚 WHATWG HTML Living Standard: Address

🎥 Jen Kramer at LinkedIn Learning: Add footer with address, time, and date (subscription required)