HTML5 Semantic Structuring, How to Use?

Question

Context

I was making a template prototype for a website, and I came across a question regarding the tag <aside>.

Below is an example to explain the semantic division.

Explaining the tags

Tag Header

The header tag will contain a logo on the left side, in the center a text on <h1> and on the left side 4 symbols representing external sites such as facebook or Linkedin.

---

Tag Nav

Here will be the navigation menu, covering table tag as <li> and <ul> with picture representing each element together with tag.

---

Tag Main

Main content will cover 2 sections with text and image elements, being more specific, the left section will contain only text and the next section will contain the image or some animated element.

---

Tag footer

Will contain only the creation date and copyright.

Doubt 1

When should we use the tag <aside> ?

Doubt 2

This tag applies to the prototype above?

Doubt 3

Could someone inform if the above prototype is semantically correct?

Answer 1

Yes, the structure is correct. <nav> outside the <main>. All well divided, in my opinion there is nothing to touch up.

You can use <aside> to include some prominent text related to the content in question, as well as create a submenu with links related to the same content.

For example, in a <article> about a particular car, you can create <aside> to draw attention to some important information:

<article>
    O carro etc e tal foi fabricado em etc etc no país etc no período de 1970 a 1980 e teve versões etc etc...
    <aside>
        Foram fabricados apenas 100 unidades deste veículo.
    </aside>
    <aside>
        <h3>Versões:</h3>
        <ul>
            <li><a href="#">1970</a></li>
            <li><a href="#">1975</a></li>
            <li><a href="#">1980</a></li>
        </ul>
    </aside>
</article>

The <aside> works basically like those featured boxes commonly seen in books, magazines and newspapers, something like:

But the <aside> may also be inserted into a <section> with the same purpose, a highlighted text with relevant information to the content related in <section>.