HTML5 Semantic Structuring, How to use it?

Navigation
2

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 middle a text in <h1> and on the left side 4 symbols representing external sites such as facebook or linkedin.

  
  

Tag Nav

     
    

This will include the navigation menu, including table tag as <li> and <ul> with image representing each element together with tag.

  
  

Tag Main

     
    

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

  
  

Tag footer

     
    

It will only contain the creation date and copyright.

  

Doubt 1

When should we use the tag <aside> ?

Doubt 2

Does this tag apply to the above prototype?

Doubt 3

Could someone tell you if the above prototype is semantically correct?

    
asked by anonymous 29.12.2017 / 01:40

1 answer

1

Yes, the structure is correct. <nav> out of <main> . All right divided, in my opinion there is nothing to retouch.

You can use <aside> to include some featured 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> on 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 highlight boxes commonly seen in books, magazines and newspapers, something like:

But <aside> can also be entered into a <section> for the same purpose, a highlighted text with relevant content related content in <section> .

    
29.12.2017 / 02:31
How to ignore certain elements in a list that will undergo a random process? (pending) Header location of php is inserting file instead of redirect