'html5 semantics within the template. aside and header tags

I'm working on my first template for wordpress and can't figure out the nuances of semantic html markup.

I understand that in this matter everything is decided by the context. Therefore, i will emphasize the context of the task: we optimize this in an automatic way, like a template for CMS.

The first question is about the aside tag. How correct is it to place the all sidebar zone in it? because the sidebar can contain a variety of elements, such as widgets, navigation elements, search filters, ad units, etc. Or is it better to keep the sidebar area in a regular div tag?

The second question is about the header tag. I have two examples, which one is more correct?

<header>logotype \ navigation</header>
<nav>breadcrumbs</nav>
<main>
<article>
<header> <h1>Article title</h1></header>
article content
</article>
</main>

and the second one (maybe it's better to move the h1 from the article or from the artcile and main, like this?):

<header>logotype \ navigation</header>
<nav>breadcrumbs</nav>
<header> <h1>Article title</h1></header>
<main>
<article>
article content
</article>
</main>

which design is more correct or is it better to do it in a completely different way?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source