If you think the address element SHOULD be used: Fork the CodePen and share your solution below.
If you think the address element SHOULD NOT be used: Write your justification below as to why it’s not needed.
How to Fork a CodePen
In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
I initially thought that, 'yes, I see an address and I use an address tag', but that seemed too easy. The page says it contains contact information for employees...which is not the same thing as a website organization or author of an article. So, I would not use the address tag here after all. Very tricky!
At first I was leaning towards yes and made the changes in the code pen. After thinking about it further, it doesn't seem really needed for a contact page for employees. This information will not be used to contact the website organization or the article author as stated in the lesson for the use of the <address> tag. If address information was included at the bottom of a webpage as we saw in the NASA fact sheet example, then definitely yes.
I'm of the view that the address element should be used on the page but not everywhere in the page.
According to MDN, address element is used to provide contact information for a person(individual, group or organization) , as seen in the given page it's quite obvious that the employees contact information includes social media link, contact person's name and so forth to which the contact information refers.
Nice! I like a firm opinion. MDN does indeed say, "In the latest spec versions however, its definition has been updated so it can now be used to mark up arbitrary addresses." These would be arbitrary addresses and not associated with an article or the body of the page, which is what the W3C advises. Not the first conflicts we'll encounter with HTML!
My feeling is always that the rules might be set by W3C, but MDN better reflects in-the-wild usage, and often my own feelings about how it should be done. But whichever usage you go with, consistency in your own code has to be the primary goal.
Completely agree with Erika! HTML is about conveying the meaning of your content, not necessarily coding something "correctly" (beyond the usual syntax errors). It's more nuanced, just as language and meaning are nuanced.
I think it's ok to use the <address> in this case. I think it may make the information on the page more clear. I tried it out and it seemed to go alright.
It surely looks like an address! However, consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
At first I was thinking yes, but then after putting it into code pen and thinking about it, I decided it wasn't necessary. As many have already stated in this discussion, I agree that it is not being used to contact the website organization or authors so it is not needed in this case.
Fantastic! Yes, lots of other people have had the same experience, but what's important is that it caused you to think about the element and apply it (or not apply it). That is when learning happens. Great job!
I'm going to say no, the address element should not be used in this case, as the addresses are for employees, not authors of an article, nor the website organization itself.
"<address> can be used in a variety of contexts, such as providing a business's contact information in the page header, or indicating the author of an article by including an <address> element within the <article>."
"It used to be the case that an <address> element was only supposed to be used to represent the contact information of the document's author. In the latest spec versions however, its definition has been updated so it can now be used to mark up arbitrary addresses."
There's a lot of tricky interpretation with HTML. As you'll see in the coming days, there's also a lot of disagreement between W3C, WHATWG, and MDN, three sources you'd think would agree with each other!
Agreed. This sort of ambiguity seems to happen more than it should in HTML. Trying to use a generic term like "address" to only apply to the address of the author of the page/article. Seems obvious that people are going to use for other addresses.
HTML is the mushroom of the web world - it lives in the dark and it grows on... well, you get the point. But perhaps it's a circular problem. No one loves it, so no one pays attention, so no one can understand it, and round we go.
Beautifully done - great styling also! Yes, <address> and several other elements (<cite> and <blockquote>!!!) are very much in conflict between specifications. There seems to be no agreement in these first few days. But your work is excellent, of course!
I am preparing a re-recording of my (German) HTML/CSS courses for LinkedIn Learning, and your #30Days course is a phantastic source of inspiration. It makes me re-think all the assumptions about HTML that grew over the last 20+ years.
That's so nice to hear, thank you! Erika and I are learning so much by re-reading these specifications again. Like you, we've worked in this field for a long time, and HTML usage has changed. We hope that we generate new interest in HTML, and awareness of the many elements and their uses!
I think we should use address element on this page. Although the paragraph element and the break function can make information looks good. However, address tag makes everything better. And it can distinguishes every part of the information more clear. Therefore, I think we should use address element. As for me, I get 8/8 in the quiz.
🎉🎉🎉 WOO WOO! 8/8 is awesome. Great job! For the second part, consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
I admit I looked through here first to get some feel for whether my instincts were right...but I felt using the <address> tag here wasn't a good fit, since it was a contact page for employees versus providing contact information for the website's author / organization. Also I was very excited to get 8 / 8 on my quiz; I'm totally a nerd who loves good grades. ;)
My initial question was do I need two different <address>, one for each employee? After reading other people's comments here, I agree that they should be left in <p> (or in a definition list).
I have always liked a difinition list <dl> for contact info for groups of people. It solidifies the group relationship of all the people and you can use definition titles <dt> for each of their names and trailing <dd> for each person's contact info (providing the dt > dd context).
I would say "YES" and "NO", this question is very tricky. I don't think we need the address element in most cases, but for this particular case we can still address if it is syntax function. like "=address()" if I am not wrong here. Honestly it depends on the argument.
We're just talking about content and markup here, not any programming or styling. That's why I kept the pen super super simple. (I had to put in the sans-serif font. Can't stand Times as a default!)
The problem statement clearly states that "this is a contact page listing contact info. for all of the organisations employees." And according to today's lesson that we have learnt, <address> </address> tag is mostly used to give the contact information of page author, or the organisations address. Hence, I mostly prefer not to add the <address></address> tag for the employees information.
I'm leaning towards leaving it as it is and going with not addresses in this case due it being employee addresses not the site owner as some others have already said :)
Congrats on being first! But consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
Hm... maybe! But at the same time, those are their Twitter handles. Perhaps you want a different use of <address> -- not around ALL of the contact information, but some of it? (Remember you can use CSS to address any formatting issues.)
It seems intuitive to use the address element here but I wasn't sure whether to switch the <p> tag for an <address> or keep it. I switched it then noticed how the addresses had no space between them, put a <br> tag for the space ... then thought, no! (<br> tag between address lines only) and put the <p> tag back inside the <address>. Nicely spaced again. Phew! Thinking about HTML :D
So glad this is on demand so I can work through at tortoise speed and it really sinks in.
Woo woo! So glad you're thinking through all of the issues and problems here. <address> may contain a <p>, or not. If the reason you're using the <p> is for a spacing issue, remember you can always throw in some CSS:
address {
margin-bottom: 1rem;
}
That will be enough to give you spacing between address blocks. The <br> gives you the address formatting required, which is why it's used here. Great job, thanks for sharing your thought process on this!
Hi Simon! Thanks for posting this. <address> has two d's in it, so your markup here did not do anything because you have it as <adress> instead. In any case, you've taken the MDN perspective on this - and that's valid! Thanks for sharing. 🔥🔥🔥🎉🎉🎉
I would not use the address tag here because you don't need to put an address tag with contact information. However, you would need to put it if it was the author of the article.
Awesome! You've gone with the MDN definition of the address element. Consider using two address elements here. Erika and I are great friends, but we each have unique addresses, so two tags would better represent that on this page. Space in between the addresses should come from CSS rather than the <br> element. Thanks so much for sharing!
Yes they are employees, yet isn't address an address afterall ?
Thus isn't that semantically correct ?
AFAIK it is not like we are making their addresses "public" by putting the address tag around 'em, as pretty much without the tag everyone can see them anyway.
So to me it seems it only makes it better semanticaly wise.
It depends on which standard you want to follow. MDN would agree with you, while WHATWG would not. WHATWG says <address> is only for the author of the page or the <article>, while MDN says it can be used for any address anywhere. So! Which do you like? You would be "right" in either case. 😁 So glad to get you thinking about this!
as per WHATWG we have to use <p> tag for postal address. so according to me we have to use <p> tag for the wrapping address, and there address are not related to a company, etc.
Well done! You are taking the MDN interpretation of address. Address is a block tag, so you can nest a paragraph inside. I think in this instance I would not, but this is truly a minor thing. Good stuff!
I was unsure at first if it should be used in this instance but decided on yes! There was a link to Twitter and having the tag made it more clear that it was a link.
Well done! You are taking the MDN interpretation of address. Address is a block tag, so you can nest a paragraph inside. I think in this instance I would not, but this is truly a minor thing. Also, there's one tiny nesting problem at the end of your pen. Otherwise, looks great!
Initially, I thought yes and used the address as part of the code but after sitting with it for a while and understanding that the contents of the address contains belongs to the author of the page or organisation and these names belonged to employees, it didn't make sense to put the address element there.
After reading MDN, the HTML living standard, and doing a bit of research, I decided to add the <address> element. If I went to MDN (Which is my normal go-to reference), I would see that the <address> element "can now be used to mark up arbitrary addresses". I know the living standards seem to be particular the use of <address>, but the section title is conveying there is contact information. This seems like a fair case to use it.
I love the fact that you did not put a <br> between the two addresses <3 Styling is for CSS! However, consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
I initially thought that, 'yes, I see an address and I use an address tag', but that seemed too easy. The page says it contains contact information for employees...which is not the same thing as a website organization or author of an article. So, I would not use the address tag here after all. Very tricky!
Awesome! The point was to make you stop and think, which you did. Great job!
Good job Jade!
At first I was leaning towards yes and made the changes in the code pen. After thinking about it further, it doesn't seem really needed for a contact page for employees. This information will not be used to contact the website organization or the article author as stated in the lesson for the use of the <address> tag. If address information was included at the bottom of a webpage as we saw in the NASA fact sheet example, then definitely yes.
Love the way you think, Haley! I appreciate the detailed explanation.
I'm of the view that the address element should be used on the page but not everywhere in the page.
According to MDN, address element is used to provide contact information for a person(individual, group or organization) , as seen in the given page it's quite obvious that the employees contact information includes social media link, contact person's name and so forth to which the contact information refers.
Below is the saved pen code
https://codepen.io/Solobachi/pen/JjEWOJN
Nice! I like a firm opinion. MDN does indeed say, "In the latest spec versions however, its definition has been updated so it can now be used to mark up arbitrary addresses." These would be arbitrary addresses and not associated with an article or the body of the page, which is what the W3C advises. Not the first conflicts we'll encounter with HTML!
LAST conflicts. First, but not last :-D
This issue of disagreement between MDN and W3C make the address element look somewhat ambiguous.
Which one are we to follow then?
My feeling is always that the rules might be set by W3C, but MDN better reflects in-the-wild usage, and often my own feelings about how it should be done. But whichever usage you go with, consistency in your own code has to be the primary goal.
Completely agree with Erika! HTML is about conveying the meaning of your content, not necessarily coding something "correctly" (beyond the usual syntax errors). It's more nuanced, just as language and meaning are nuanced.
I think it's ok to use the <address> in this case. I think it may make the information on the page more clear. I tried it out and it seemed to go alright.
It surely looks like an address! However, consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
At first I was thinking yes, but then after putting it into code pen and thinking about it, I decided it wasn't necessary. As many have already stated in this discussion, I agree that it is not being used to contact the website organization or authors so it is not needed in this case.
Fantastic! Yes, lots of other people have had the same experience, but what's important is that it caused you to think about the element and apply it (or not apply it). That is when learning happens. Great job!
I'm going to say no, the address element should not be used in this case, as the addresses are for employees, not authors of an article, nor the website organization itself.
Nice! I like people who take a stand.
From MDN:
"<address> can be used in a variety of contexts, such as providing a business's contact information in the page header, or indicating the author of an article by including an <address> element within the <article>."
"It used to be the case that an <address> element was only supposed to be used to represent the contact information of the document's author. In the latest spec versions however, its definition has been updated so it can now be used to mark up arbitrary addresses."
https://www.w3.org/TR/html52/grouping-content.html#the-address-elemen) gives several examples that seem to agree with this.
So I'm not so sure it is this cut and dried.
There's a lot of tricky interpretation with HTML. As you'll see in the coming days, there's also a lot of disagreement between W3C, WHATWG, and MDN, three sources you'd think would agree with each other!
Agreed. This sort of ambiguity seems to happen more than it should in HTML. Trying to use a generic term like "address" to only apply to the address of the author of the page/article. Seems obvious that people are going to use for other addresses.
HTML is the mushroom of the web world - it lives in the dark and it grows on... well, you get the point. But perhaps it's a circular problem. No one loves it, so no one pays attention, so no one can understand it, and round we go.
Sorry, left off the trailing "t" on that URL:
https://www.w3.org/TR/html52/grouping-content.html#the-address-element
https://codepen.io/la6ibrd/pen/MWJpKev
Awesome! However, consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
The three references offer conflicting advice about address:
- MDN says »it can now be used to mark up arbitrary addresses.«
- W3C says »contact information for a person, people or organization«
- WHATWG says »contact information for its nearest article or body element ancestor«
The example shows a page with contact information for team members. So following MDN and W3C we could use address, following WHATWG we should not.
In my CodePen I followed MDN/W3C and used <address> 😉
https://codepen.io/pmmueller/pen/oNBPPeG
Beautifully done - great styling also! Yes, <address> and several other elements (<cite> and <blockquote>!!!) are very much in conflict between specifications. There seems to be no agreement in these first few days. But your work is excellent, of course!
Thanx for the compliment!
I am preparing a re-recording of my (German) HTML/CSS courses for LinkedIn Learning, and your #30Days course is a phantastic source of inspiration. It makes me re-think all the assumptions about HTML that grew over the last 20+ years.
That's so nice to hear, thank you! Erika and I are learning so much by re-reading these specifications again. Like you, we've worked in this field for a long time, and HTML usage has changed. We hope that we generate new interest in HTML, and awareness of the many elements and their uses!
There is need for the use of an <address> element on the page.
https://codepen.io/Solobachi/pen/MWJpEzd
Is or is not? It doesn't look like you added one? (Did you forget to save your pen?)
I think we should use address element on this page. Although the paragraph element and the break function can make information looks good. However, address tag makes everything better. And it can distinguishes every part of the information more clear. Therefore, I think we should use address element. As for me, I get 8/8 in the quiz.
Dang Jinshuo! Sounds like you’re on track to get 5/5 bonus points too ;-)
🎉🎉🎉 WOO WOO! 8/8 is awesome. Great job! For the second part, consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
I admit I looked through here first to get some feel for whether my instincts were right...but I felt using the <address> tag here wasn't a good fit, since it was a contact page for employees versus providing contact information for the website's author / organization. Also I was very excited to get 8 / 8 on my quiz; I'm totally a nerd who loves good grades. ;)
🎉🎉🎉 WOO WOO! 8/8 is awesome. Great job!
My initial question was do I need two different <address>, one for each employee? After reading other people's comments here, I agree that they should be left in <p> (or in a definition list).
Great question! I'm curious, why a definition list? (We cover that on Day 5, by the way -- definition lists are one of my favorites!)
I have always liked a difinition list <dl> for contact info for groups of people. It solidifies the group relationship of all the people and you can use definition titles <dt> for each of their names and trailing <dd> for each person's contact info (providing the dt > dd context).
Interesting! It does indeed connect the names and other information.
I would say "YES" and "NO", this question is very tricky. I don't think we need the address element in most cases, but for this particular case we can still address if it is syntax function. like "=address()" if I am not wrong here. Honestly it depends on the argument.
We're just talking about content and markup here, not any programming or styling. That's why I kept the pen super super simple. (I had to put in the sans-serif font. Can't stand Times as a default!)
The problem statement clearly states that "this is a contact page listing contact info. for all of the organisations employees." And according to today's lesson that we have learnt, <address> </address> tag is mostly used to give the contact information of page author, or the organisations address. Hence, I mostly prefer not to add the <address></address> tag for the employees information.
Nice! I like people who take a stand.
I'm leaning towards leaving it as it is and going with not addresses in this case due it being employee addresses not the site owner as some others have already said :)
Nice! I like people who take a stand.
https://codepen.io/Jacutus0fB0rg/pen/PoWpZZo
Awesome! However, consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
I tend not to use an address element here, because an employee on a list isn’t (necessarily) writing articles on or maintaining/owning the website.
Nice! I like people who take a stand.
https://codepen.io/scloteau/pen/NWdpGeP
Congrats on being first! But consider... who are these addresses for? What is the relationship between these people and the website and/or the article?
After seeing tons of comment, I try going back to the page going through this:
(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.)
Then I realized that there no point using the address tag since the website doesn't belong to the employees.
Hm... maybe! But at the same time, those are their Twitter handles. Perhaps you want a different use of <address> -- not around ALL of the contact information, but some of it? (Remember you can use CSS to address any formatting issues.)
It seems intuitive to use the address element here but I wasn't sure whether to switch the <p> tag for an <address> or keep it. I switched it then noticed how the addresses had no space between them, put a <br> tag for the space ... then thought, no! (<br> tag between address lines only) and put the <p> tag back inside the <address>. Nicely spaced again. Phew! Thinking about HTML :D
So glad this is on demand so I can work through at tortoise speed and it really sinks in.
https://codepen.io/gipsi/pen/ZEeoBRB
Woo woo! So glad you're thinking through all of the issues and problems here. <address> may contain a <p>, or not. If the reason you're using the <p> is for a spacing issue, remember you can always throw in some CSS:
address {
margin-bottom: 1rem;
}
That will be enough to give you spacing between address blocks. The <br> gives you the address formatting required, which is why it's used here. Great job, thanks for sharing your thought process on this!
https://codepen.io/simbroo/pen/yLgMpXX
Hi Simon! Thanks for posting this. <address> has two d's in it, so your markup here did not do anything because you have it as <adress> instead. In any case, you've taken the MDN perspective on this - and that's valid! Thanks for sharing. 🔥🔥🔥🎉🎉🎉
yes! https://codepen.io/kajal-28/pen/WNRLzJp
MDN would agree with your interpretation, while WHATWG would not. Your HTML looks great, though! Nicely done 🔥🎉🔥🎉🔥🎉
Thank you 😊
I would not use the address tag here because you don't need to put an address tag with contact information. However, you would need to put it if it was the author of the article.
Awesome! This reflects the WHATWG definition of the tag.
I added one address tag and added a break in between the two addresses.
https://codepen.io/kadie7/pen/NWdadzy
Awesome! You've gone with the MDN definition of the address element. Consider using two address elements here. Erika and I are great friends, but we each have unique addresses, so two tags would better represent that on this page. Space in between the addresses should come from CSS rather than the <br> element. Thanks so much for sharing!
I have put address tag x2 for both employees.
Yes they are employees, yet isn't address an address afterall ?
Thus isn't that semantically correct ?
AFAIK it is not like we are making their addresses "public" by putting the address tag around 'em, as pretty much without the tag everyone can see them anyway.
So to me it seems it only makes it better semanticaly wise.
It depends on which standard you want to follow. MDN would agree with you, while WHATWG would not. WHATWG says <address> is only for the author of the page or the <article>, while MDN says it can be used for any address anywhere. So! Which do you like? You would be "right" in either case. 😁 So glad to get you thinking about this!
MDN all the way 🤓 thank your for being so active here 🙌
as per WHATWG we have to use <p> tag for postal address. so according to me we have to use <p> tag for the wrapping address, and there address are not related to a company, etc.
Excellent, that is exactly what WHATWG says. Great job!
I believe that the address tag should be used in this instance ! https://codepen.io/steph_pujols/pen/WNRpdzR
Well done! You are taking the MDN interpretation of address. Address is a block tag, so you can nest a paragraph inside. I think in this instance I would not, but this is truly a minor thing. Good stuff!
I was unsure at first if it should be used in this instance but decided on yes! There was a link to Twitter and having the tag made it more clear that it was a link.
here is my codepen:
https://codepen.io/laucrisw/pen/LYxWKej
Well done! You are taking the MDN interpretation of address. Address is a block tag, so you can nest a paragraph inside. I think in this instance I would not, but this is truly a minor thing. Also, there's one tiny nesting problem at the end of your pen. Otherwise, looks great!
Initially, I thought yes and used the address as part of the code but after sitting with it for a while and understanding that the contents of the address contains belongs to the author of the page or organisation and these names belonged to employees, it didn't make sense to put the address element there.
P.s. Thanks for this, it's got me thinking
You're welcome! Yes, there's so much conflicting advice over HTML. Getting you thinking is a big goal of this exercise. I'm glad it was helpful!
After reading MDN, the HTML living standard, and doing a bit of research, I decided to add the <address> element. If I went to MDN (Which is my normal go-to reference), I would see that the <address> element "can now be used to mark up arbitrary addresses". I know the living standards seem to be particular the use of <address>, but the section title is conveying there is contact information. This seems like a fair case to use it.
https://codepen.io/adamabundis/details/dyNvKMP
Hey William! Amy Carney is looking into this question on Twitter: https://twitter.com/click2carney/status/1377669631956017154
https://twitter.com/scottohara/status/1377680355940052997 -- yeh. there's no special a11y api mapping for an <address>.
at one point it was mapped to contentinfo - but that is what <footer> is mapped to now.
I love the fact that you did not put a <br> between the two addresses <3 Styling is for CSS! However, consider... who are these addresses for? What is the relationship between these people and the website and/or the article?