#30DaysofHTML Day 1: <address>
#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.
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.
🧩 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.
More information and examples
📚 WHATWG HTML Living Standard: Address
🎥 Jen Kramer at LinkedIn Learning: Add footer with address, time, and date (subscription required)
Fun fact: the spelling af <address> with 2x d and 2x s may present an extra challenge for some European users: I am German, where "Adresse" is spelt with 1x d and 2x s, and I live in the Netherlands, where "adres" has one only 1x d and 1x s 😉
Hi Jen,
I'm a bit late to the game, starting with Day One today ;-)
In all the address-examples I only see line breaks with br. As far as I know, paragraphs are quite okay within address, and I miss them a bit.
HTML 5.2 has an example with a p inside of address (https://www.w3.org/TR/html52/grouping-content.html#the-address-element)
The Living Standard allows »Flow content, but with no heading content descendants, no sectioning content descendants, and no header, footer, or address element descendants.«
MDN has it about the same.
So that would allow paragraphs, wouldn't it?
Or am I missing something?
Peter (https://pmueller.de/)