Assessment: Marking up a letter - Help with aligning content inside <time> with a class

Hello. I just started working on learning web development and I am stuck at the Marking up a letter Chapter.

Together with the raw content we get some indications of what we are supposed to have on the final version of the page. One of those indications is:

“The first address and first date in the letter should have a class attribute value of sender-column. The CSS you’ll add later will cause these to be right aligned, as it should be in the case in a classic letter layout.”

And now it comes my problem: If I go and give just the time tag with the class attribute, that line won’t align to the right.

If I go and put a p tag nested inside the time tag, suddenly it works. But after taking the code through Nu HTML Checker I get the next error:

" Error: Element p not allowed as child of element time in this context"

While I couldn’t find anything on the internet relevant to this topic, I get from the error the fact that I can not nest a p inside time. But if I take that p out, what is inside time with that class won’t align to the right anymore.

I don’t understand where is the problem here and I would like some help (and a source with explanations if it is relevant/possible).

Link to see the whole code in HTML and CSS:
https://codepen.io/Alex1696/pen/LYdvEax

Edit: I forgot to put the link to the task for anyone who would like to know the whole thing.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter

Edit2: Edit to improve readability.

Right. Can’t put the date inside a p element inside a time element. But you can put the date inside a time element inside a p element.

1 Like

I was thinking of doing that. But in this way I feel like “cheating”, because the project says to have the time with a class. So, if I put that class in the Time tag, why won’t align to right after applying the CSS code?

I couldn’t find anything on the internet about this topic so I don’t understand why the class in a time would not work(like in this case).

1 Like

Hi @Alex1696 and @Edward_TX1 and welcome to the community :wave:

Your both are right with the idea of putting <time> inside <p> . I wouldn’t call it “cheating”, because the task doesn’t explicitly say “put the class on the <time> element”. And the task is all about putting elements around existing text.

Much more interesting is why it works this way. For this to understand we need to now three things:

  • <p> is a block element. That means it’s as wide as the whole page by default.
  • <time> on the other hand is an inline element. It is only as wide as the contained text by default.
  • The sender-column class aligns the text (and inline elements) inside it to the right.

When we use the class directly on <time> it doesn’t do anything because the element is just as wide as the text inside. When we put the class on <p> (which is as wide as the page; remember?) all its content is aligned to the right side.

I hope this explanation is more or less understandable :slightly_smiling_face:
This whole topic will become much clearer once you get to the CSS lessons where these thing are explained in deep.

I wish both of you an nice day,
Michael

1 Like

Hello Michael, and thank you for your warm welcoming. :innocent:

That is an awesome explanation and now it makes totally sense. I didn’t know Time tag is an inline element. Even though I read about the tag itself, I may have overlooked this info by mistake haha.

Now I know something new and I will be able to pay more attention to these kind of things. Can’t wait to find more about the "why"s and particularities of each tool.

Thank you very much and have a great day!

1 Like

I’m glad it was helpful :blush:

You can always come back when you have more questions or want us to have a look at your finished exercises.

1 Like

For sure I will do it.

Thank you!

1 Like