Assessment wanted for Marking up a letter and some questions

MDN
#1

I am learning html and I just finished the assessment on marking up a letter. Please can someone assess my html and answer the questions I encountered while doing the assessment?

Thank you very much.

Questions

When I gave the first time element “sender-column” class, it did cause it to shift to the right as specified in the CSS file. Whereas when I change the time element to a paragraph element, or if I nested the time element within a paragraph, it works. It also works for the first address element. Why doesn’t the CSS work when for the time element? I see that the CSS given is

     .sender-column {
  text-align: right;
}

Is it because the time element is not considered as text, so text-align doesn’t have an effect on it?

A few questions on the semantics of p. Are the semantics of my markup correct in terms of

  • Wrapping the time element within the paragraph element. Should the time be considered as a single paragraph?
  • Closing the previous paragraph before starting a list object. Should the paragraph be ended before a new block element starts (such as a blockquote or lists), or is it okay to nest a block element within the pargraph.
  • Giving “Dear Eileen,” , “Yours sincerely”, and the “Dr. Eleanor Gaye” signature at the bottom an individual paragraph. I felt weird when I wrapped them with <p>. Should they be counted as a paragraph or would it be more semantically correct to just use <br/> to separate it from other texts?

What should I put in content property in <meta name="author" content="">? Is it the author of the mail (Eleanor Gaye), or the person who created the web document (me)?

Question on a example given in HTML Advanced text formating
#2

Hi @saralin10co, and thanks for sending in your work! Congratulations, this is really good — I couldn’t find anything to really comment on.

Now on to your questions:

  1. This is because <p> is a block level element by default, whereas <time> is an inline element by default. This has effects on how the element behaves on the page, and is laid out. Block level elements will take up 100% of the width of their parent element, so in this case the paragraph is as wide as the entire letter. So setting text-align: right on it makes the text content sit on the right hand side of the element’s space. Inline elements are only as wide as their content, so text-align: right will have no effect.

See here for more info: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes

  • Wrapping the time element within the paragraph element. Should the time be considered as a single paragraph?

This is fine - a paragraph element is a separator for a chunk of text of any length - it doesn’t necessarily have to be a grammatically correct paragraph.

  • Closing the previous paragraph before starting a list object. Should the paragraph be ended before a new block element starts (such as a blockquote or lists), or is it okay to nest a block element within the pargraph.

Yes, you should close it before opening another block level element that is part of the same text flow. If you want to nest a couple of blocks inside a single block for styling or layout purposes, a container like <section> or <article> would be more appropriate.

  • Giving “Dear Eileen,” , “Yours sincerely”, and the “Dr. Eleanor Gaye” signature at the bottom an individual paragraph. I felt weird when I wrapped them with <p> . Should they be counted as a paragraph or would it be more semantically correct to just use <br/> to separate it from other texts?

I think is a minor thing, and more down to personal preference. I prefer separate paragraphs, but if you feel that it is really part of the same paragraph and you are just adding in line breaks to get the text sit right, <br>s are probably ok. Just don’t fall into the bad habits that people used to, like creating “paragraphs” like this:

First paragraph
<br><br>
Second paragraph
<br><br>
Third paragraph
<br><br>
  1. This should be the author of the web document, which I think is probably Eleanor in this scenario, but actually you are creating it in the exercise, so you could put your name instead. Either would be fine in this case, I think.
#3

Thanks for assessing my work and answering my questions! I’m quite clear with the 1st question after reading your reply. As for the semantics of <p>, combining what I read from your reply and the MDN web docs on the paragraph element, these are my understanding:

  • <p> is similar to the traditional paragraph in the sense that it is used to group related contents. We should not use <br> to create the visual effect of a paragraph because <br> does not have the semantics that tells search engines, screen readers, etc. that these content are bundled and related.
  • <p> is different from the traditional paragraph in the following ways:
    1. Besides text, It can also be used to group images and from fields.
    2. Even if it is used to group texts, it does not have to be a traditional paragraph, but can be texts of any length that we want to separate.
    3. It has to end before other block-level elements, such as <blockquote> ,<ol>, etc., begin. The browser automatically parses the end tag even if it wasn’t included in the original html. For example, a traditional paragraph can contain a blockquote halfway, and continue to be the same paragraph (the text after the blockquote can continue without indention), but the <p> will be closed before <blockquote>.

I hope my understanding is correct. Please can you point out any mistakes you see?

#4

And for the 3rd question, just to be clear, so in a scenario where Jack writes diaries on MS Word, and Joe takes them to create a blog like website, the author in the metadata should not be the person who wrote the main contents, but the person who wrote the html, which is Joe. Is that right?

#5

I hope my understanding is correct. Please can you point out any mistakes you see?

Sure thing. I’ll quote any bits below that I think need correcting slightly.

semantics that tells search engines, screen readers, etc. that these content are bundled and related.

Yeah, this is about right. Appropriate semantics have better SEO value, and better accessibility. Another big factor is being able to target the paragraph for scripting and styling purposes - you can’t do that if you don’t have a clear containing element to target.

Besides text, It can also be used to group images and from fields.

It can, but it would be preferrable to use something more appropriate, like perhaps a <figure>element for a group of images, or list items for from fields. Even if you just want a container for styling with no attached semantics, a <div> is probably better than a <p>.

Learning to use correct semantics is a slow process, and the browser doesn’t really penalize you very much for not doing so. But as you get deeper into web dev, you’ll find that having a solid semantic structure is really useful.

It has to end before other block-level elements, such as <blockquote> , <ol> , etc., begin

This is referred to as “correct nesting”, or “well-formed HTML”. If you don’t nest things correctly, the browser will fix it for you, but you might not end up with what you were hoping for, so better to do it correctly yourself. If you do want to include a quote inside a paragraph, use an inline quote instead (<q>).

#6

Yes, this is my understanding. It is the author of the web document, not the author of the text that goes on the document (unless these are the same person, which often they will be).

#7

Got it! Thanks a lot!