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).
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).
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
This whole topic will become much clearer once you get to the CSS lessons where these thing are explained in deep.
Hello Michael, and thank you for your warm welcoming.
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.