Jen Kramer: HTML, CSS, No-Code, Teaching Tips

Share this post

#30DaysofHTML Day 1: <address>

jen4web.substack.com

#30DaysofHTML Day 1: <address>

It's not just for postal addresses

Jen Kramer
Apr 1, 2021
10
5
Share this post

#30DaysofHTML Day 1: <address>

jen4web.substack.com
Current category: Who said what from where

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)

5
Share this post

#30DaysofHTML Day 1: <address>

jen4web.substack.com
Previous
Next
5 Comments
Peter Müller
Apr 19, 2021Liked by Jen Kramer

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 😉

Expand full comment
Reply
1 reply by Jen Kramer
Peter Müller
Apr 19, 2021Liked by Jen Kramer

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/)

Expand full comment
Reply
2 replies by Jen Kramer and others
3 more comments…
TopNewCommunity

No posts

Ready for more?

© 2023 Jen Kramer
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing