2

Contexto

Estava fazendo um protótipo de template para um site, e me deparei com uma dúvida em relação a tag <aside>.

Abaixo vai um exemplo para explicar a divisão semântica.

inserir a descrição da imagem aqui

Explicando as tags

Tag Header

A tag header vai conter um logotipo no lado esquerdo, no centro um texto em <h1> e no lado esquerdo 4 símbolos que representam sites externos, como facebook ou linkedin.


Tag Nav

Aqui vai constar o menu de navegação, abrangendo tag de tabela como <li> e <ul> com imagem representando cada elemento junto com tag.


Tag Main

Conteúdo principal abrangerá 2 seções com elementos de texto e imagem, sendo mais específico, a seção da esquerda conterá apenas texto e a seção ao lado conterá a imagem ou algum elemento animado.


Tag footer

Conterá apenas a data de criação e o copyright.

Dúvida 1

Quando devemos usar a tag <aside> ?

Dúvida 2

Essa tag se aplica no protótipo acima?

Dúvida 3

Alguém poderia informar se o protótipo acima está semanticamente correto?

1 Resposta 1

1

Sim, a estrutura está correta. <nav> fora do <main>. Tudo bem divido, na minha opinião não há o que retocar.

Você poderá usar <aside> para incluir algum texto de destaque relacionado ao conteúdo em questão, bem como criar um submenu com links relacionados ao mesmo conteúdo.

Por exemplo, em um <article> sobre um determinado carro, você pode criar <aside> para chamar a atenção sobre alguma informação importante:

<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>

O <aside> funciona basicamente como aquelas caixas de destaque comumente visto em livros, revistas e jornais, algo como:

inserir a descrição da imagem aqui

Mas o <aside> também pode ser inserido numa <section> com o mesmo propósito, um texto em destaque com uma informação relevante ao conteúdo relacionado na <section>.

1
  • Agradeço pela resposta, esclareceu bastante =) Commented 29/12/2017 às 2:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .