HI,
I have finished the assessment required to Markup a letter using HTML elements. The exercise required you to markup document structure for given content. I managed to sturcture the content using section, article and main. Not sure if it is done correctly, however, I get the desired output.
Please have a loot at the code and give me some pointers on the document structure using semantic elements.
MDN Link: Markup a Letter
My Code: Codepen
Hi @girish.2500 and welcome to the community 
Great work. Congratulations! 
This may have been a bit too much, because we are only marking up a letter. But I admit that’s something like a special case. 
Regarding these structuring tags I have only a small remark: You used <header> to wrap the heading elements (<h1>, <h2>). This is the wrong usage for <header>. It’s for a higher level of structuring, mostly to mark the top part of a whole website. For example, here on Discourse the <header> is used for the top bar with the Mozilla logo and the various buttons for search, menu and account settings.
Looking at all the other HTML tags, you nearly perfectly used all of them. The only thing is that you could also wrap the quote’s source on the last line in a <cite> element. Everything else is fine. 
I hope that helps.
Have a nice day,
Michael
PS: Your email address is visible in your post. It ended up in the optional “name” field of your profile. I recommend removing it.
Hi @ mikoMK,
Thanks for your valuable feedback. I think you are right.
The <section> and <article> not necessary, except <main> , also, there is no navigation or anything for <header>.
Its bit confusing for me.
When to use HTML semantic tags?
How to decide ?
Thank you,
Girish
When building a website you should always use such tags as <header>, <nav>, <main> etc. These tags give meaning to the various parts of your website. Theoretically, you could just use <div>s for each of this parts, but a <div> doesn’t have any meaning. It’s just a container. The reason why meaningful tags are important is shortly described in this section HTML for structuring content.
The “Marking up a letter” assessments focuses more on the tags used inside an article. The next assessment, “Structuring a page of content”, will focus on the overall structure of a website.
You’ve seen me using the words “meaning” and “meaningful” above. That’s what “semantic” stands for. We talk about semantic HTML (meaningful HTML) when we refer to using the right tag in the right situation. This could be in the structure of the website: Use <nav> for the navigation menu and not <div>. But also inside a single line: Use <q> for an inline quote an not <span>.
I hope that makes it a bit clearer. Feel free to ask more questions. I’m happy to help you more.
Hi Michael,
Thank you. Yes, Indeed it is clear and very helpful.