Assessment : Marking up a letter

MDN Learn
#1

Hi,

I am learning web development and looking for an assessment on an assignment - “Marking up a letter” (link - https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter).

I have done the work from my side and want it to be assessed.
I am looking for feedback on semantics as that was the most difficult part, what I felt.
My code is shared at : codepen link and jsfiddle link.

Please assess the work and provide feedback.

#2

Hi @CNatka! Thanks for sending your code in!

This is looking pretty good — well done on some great work.

I had a few small things to bring up, but nothing major.

You’ve got the first address wrapped inside a <div>:

<div class="sender-column">
  ...
</div>

This isn’t terrible, but you could just delete the <div> and put the class="sender-column" directly on the <address> element.

  1. In this bit:
<p>Dear Eileen,<br>

Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your <abbr title="Doctorate of Philosophy">PhD</abbr> next year. I will answer your questions one by one, in the following sections.
</p>

“Dear Eileen,” would probably be better contained in its own separate paragraph, with the rest of it put in another separate paragraph.

Everything else is fine; well done!

#3

thanks @ chrisdavidmills for your feedback.
I faced one more difficulty - deciding between “section” and “article” elements Any article or pointer on that could be helpful.

#4

For this example, I don’t think you really need them at all; in general, this is a topic that a lot of people get confused about.

We have tried to provide a definition here:

In most simple cases where you just want a container element for a simple block of content, it doesn’t really matter.

With something more complex where you’ve got multiple containers, it depends on what content the containers have in them.

  • <article> is more for an item of content where you will have more than one, like blog posts, or news item summaries.
  • <section> is more for different areas of functionality, like a map, or a summary of your latest tweets, or an FAQ, or a section of contact information.

But even then it is open to interpretation.

I wouldn’t worry about it to much.

1 Like