More Semantic Html 5 Code With Bootstrap 3?

I want to make my (wordpress) bootstrap 3 template more html 5-semantic. Now i wonder if i should use the new html 5 tags for layouting like:

Solution 1:

section should not contain the main element semantically. But main element can contain any. So, you may do as followings:

<main>
   <article>
   </article>
   <section>
      <article>you can nest article in section</article>
   </section>
   <section>
   </section>
</main>
<aside>
element asidemain element
</aside>

While using section consider the following points:

• If it makes sense to separately syndicate the content of a section element, use an article element instead.
• Do not use the section element as a generic container; this is what div is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

So, consider the following while using main:

• main must not be a descendent of an article, aside, footer, header, or nav element.

To consider what should I do or what should I not do you may search in google like this:

mdn article html

So, this would result mozilla developer network's article

So, searching is easy like mdn aside html, then you would get article of what you need exactly.