CodeGym/Cursos/Frontend SELF PT/Contêineres para conteúdo

Contêineres para conteúdo

Disponível

3.1 Tag <main>

HTML5 trouxe um monte de novos elementos semânticos que ajudam desenvolvedores a criar páginas web mais estruturadas e fáceis de entender. Entre eles, as tags <main> e <aside> têm um papel especial, sendo usadas para criar contêineres para o conteúdo principal e adicional, respectivamente.

A tag <main> representa o conteúdo principal do documento. Ela é usada para colocar o conteúdo único e chave da página em questão. O conteúdo dentro da tag <main> deve ser exclusivo para cada página e não deve conter elementos que se repetem em todas as páginas, como logotipos, barras laterais, links de navegação ou rodapés.

Sintaxe:

HTML
<main>
  <!-- Conteúdo principal da página -->
</main>

Exemplo de uso:

HTML
<body>
  <header>
    <h1>Website Header</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Article Title</h2>
      <p>This is the main content of the article.</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2024 Example Website</p>
  </footer>
</body>

Principais características:

  • Conteúdo: a tag <main> deve conter o conteúdo principal da página, que é único para essa página
  • Localização: deve haver apenas uma tag <main> na página
  • Acessibilidade: a tag <main> melhora a acessibilidade da página, ajudando tecnologias assistivas (como leitores de tela) a encontrar mais rápido o conteúdo principal

Aplicação:

  • Conteúdo principal da página
  • Conteúdo único relacionado à página atual

Vantagens:

  • Marcação semântica: ajuda motores de busca e tecnologias assistivas a entenderem o que é o conteúdo principal da página
  • Melhoria na estrutura da página: separa claramente o conteúdo principal de outras partes da página, como cabeçalhos, barras laterais e rodapés

Particularidades:

  • Deve conter conteúdo único para a página
  • Não deve incluir elementos que se repetem em outras páginas (por exemplo, barras de navegação, barras laterais, rodapés)

3.2 Tag <aside>

A tag <aside> é usada para representar conteúdo adicional que está relacionado ao conteúdo principal, mas não faz parte do fluxo principal do documento. Geralmente, é utilizada para barras laterais que contêm anúncios, links para artigos relacionados, biografias dos autores e outros elementos auxiliares.

Sintaxe:

HTML
<aside>
  <!-- Conteúdo adicional -->
</aside>

Exemplo de uso:

HTML
<main>
  <article>
    <h2>Article Title</h2>
    <p>This is the main content of the article.</p>
  </article>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#related1">Related Article 1</a></li>
      <li><a href="#related2">Related Article 2</a></li>
    </ul>
    <h3>About the Author</h3>
    <p>Short bio of the author.</p>
  </aside>
</main>

Principais características:

  1. Conteúdo: a tag <aside> contém informações adicionais relacionadas ao conteúdo principal, mas não faz parte do fluxo principal do documento.
  2. Localização: pode ser posicionada dentro ou fora da tag <main>, dependendo do contexto.
  3. Aplicação: é usada para barras laterais, blocos de anúncios, links para artigos relacionados e outras informações auxiliares.

Aplicação:

  • Barras laterais com informações adicionais
  • Blocos de anúncios
  • Links para recursos relacionados
  • Materiais adicionais relacionados ao conteúdo principal

Vantagens:

  • Marcação semântica: ajuda motores de busca e tecnologias assistivas a entenderem que é conteúdo auxiliar em relação ao conteúdo principal
  • Melhoria na estrutura da página: separa claramente o conteúdo adicional do principal, tornando a página mais organizada e fácil de entender

Particularidades:

  • Contém conteúdo que está relacionado ao principal, mas não faz parte dele
  • Pode ser utilizada para barras laterais, blocos de anúncios, assinaturas e outros materiais adicionais
1
Tarefa
Frontend SELF PT,  nível 10lição 3
Bloqueado
Contêiner Principal
Contêiner Principal
1
Tarefa
Frontend SELF PT,  nível 10lição 3
Bloqueado
Barra Lateral
Barra Lateral
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário