Assessment wanted: Marking up a letter (odpinerosh)

I want an assessment. Thank you in advance…

Marking up a letter

Actual assessment page

Hi there @odpinerosh! Welcome to the community, and thanks for sending in your code!

This is not too bad at all — a good attempt. I did have a few points to call out, so let’s go through this.

First of all, the name of the sender in the address is on the same line as the first line of the address — <strong> is an inline element, so doesn’t cause content after it to break onto a new line. Really, everything form the sender name down to the email address is part of the contact details, so could be wrapped in the <address> element. I’d go for something like this instead:

<address class="sender-column">
  <strong>Dr. Eleanor Gaye</strong><br>
  Awesome Science faculty<br>
  University of Awesome<br>
  Bobtown, CA 99999<br>
  USA<br>
  Tel: 123-456-7890<br>
  Email: no_reply@example.com
</address>

And then I’d put the date inside a paragraph with the sender-column class applied separately, as it needs to be over on the right hand column, but it isn’t really part of the address:

<p class="sender-column"><time datetime="2016-01-20">20 January 2016</time></p>

Same for the recipient names and address — this should all go inside the 2nd <address> element.

Next, I see H2O is missing a <sub> element. Not a massive thing, but still needs fixing up.

Also, HTML and CSS need <abbr> elements with title attributes to provide an expansion of the acronyms. BC could also do with one.

<i>did</i> — you should really use the <em> element for emphasised italic text. as that’s semantically correct for most of these kind of purposes.

The “University of Awesome motto” line needs a <q> element to mark up the actual quote part, and a <cite> element to mark up the source of the quote.

1 Like

Thank you. It was most helpful.

I am sure it is much better now.