Marking up a letter - Learn web development | MDN

MDN Learn
#1

Hello.
Assessment wanted for Marking up a letter. What can be improved? Is the quote marked up correctly, or do I need to change something?
A link to the example:
(https://codepen.io/Petrushya/pen/xxWLGEK)
#2

Hi @petrushya

Nice work on this big exercise. :clap:

There are only some minor things:

  • No need for the <p> inside the <address>es.
  • The links are missing title attributes.
  • The quote is marked up correctly, but for the source it would be more appropriate to use the <cite> element instead of <em>.

Have a nice day,
Michael

PS: Your email address is visible in your post. It ended up in the optional “name” field of your profile. I recommend removing it.

1 Like
#3

Hi @mikoMK

Thanks for the answer and hints.

Without <p> you do less body movements. But, in the guides it is written:

It could also include more complex markup, and other forms of contact information

About <title> in the link I was guided by:

Note: A link title is only revealed on mouse hover, which means that people relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information. If a title’s information is truly important to the usability of the page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.

I also have a question about the “cite” attribute for <q> and <blockquote>. No one sees it either, and also, what if the quote is not from the site, but from a book?

Good luck!
Pyotr

1 Like
#6

Thanks for your feedback.

It’s true that <p> is more versatile than <address>. In this example I think <address> is a pretty fitting tag to use for the information we present and we should always use the most specific tag to give our HTML as much meaning as possible. I don’t see any advantage in nesting both, because this would say: “This is an address but also arbitrary text”.

I agree with your point about title. It’s just that the exercise asks for using title attributes on the link to test if the student has understood the usage of attributes.

The quote is probably from a book and for that using the <cite> element is the correct choice. (That’s what I mentioned in my last response.) When you want to cite a website you would use the cite attribute on the <q> tag.

One of the main goals when writing HTML is to be as specific as possible when choosing elements. This is called semantic HTML (HTML that conveys meaning). There are various reasons for doing this. The most important one in my opinion is accessibility. Not everyone using the web does that in the same way. For example there are blind people who use screen readers to read the content of the pages for them. When we use the correct elements those screen reader are able to understand what we are trying to communicate and can give the best possible information to the blind person.

There’s a good intro to this topic on MDN called HTML: A good basis for accessibility. It’s part of a whole learning module about accessibility:

I hope that answers your questions. :slightly_smiling_face:

Have a nice day,
Michael

#7

Hello.
Thanks for the clarification.
About the “cite” attribute, I meant this:

Citations

The content of the cite attribute sounds useful, but unfortunately browsers, screenreaders, etc. don’t really do much with it. There is no way to get the browser to display the contents of cite , without writing your own solution…

that is, the need to additionally provide tangible information about the source of the citation.

Good luck,
Pyotr

1 Like
#8

Yeah, it’s a pity. I still think we should use the possibilities HTML gives us and hope for newer versions of screenreaders to use it. It may be a slight problem, if we do both (attribute and normal text) and then screenreaders suddenly support it and the source gets announced twice.
Maybe the take-away is to know that this attribute exists, act for the current situation and wait for better support.

1 Like