#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> 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:
social media links
The contact person's name may also be included in an address element.
⛔️ However, non-contact information is to be avoided.
💯 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.)
🖥 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.
More information and examples
🎥 Jen Kramer at LinkedIn Learning: Add footer with address, time, and date (subscription required)