HTML5 tags

HI,

I'm trying to get 100% best practices, and knowledge about HTML, CSS and Sass as much as I can. Every line needs to be perfect no exception. Each day I come across new things, and some I understand, some I don't or I'm confused.

So here is another confusing part about HTML5.

If you look at this image here

You see the HTML5 structure right?

It's inside main tag, which if we look at treehouse forum, everything woudl be in main right, and then we see article tag, which we woudl or could put each question, or a blog right,

now, we have header and footer, which we can use inside the article , in header we can put stuff like title, mostly, and footer the author mostly right? and we have section, now, section is the container inside the article good? i know that in parallax wesbite we use section for each you know.. section..

So i should start writing my articles like in the image? because at the moment i was doing it like

div class = excerpt-content, but i could do section = excerpt-content right?

And extra question, what about BEM?

Need to get the basics first for a semantic and BEST practice coding. It Happens to be HTML.

if you post to a link HTML5, i have read it, but if you coudl put some of your words please, for a better understanding, or point maybe to some good articles and stuff.

I'm mainly focusing on HTML/CSS, Sass and BEM. I think I'm doing pretty good, but need more knoweldge to have a clean code.

At the end every line need's to be perfect. No excuses.