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:
<main>
<!-- Conteúdo principal da página -->
</main>
Exemplo de uso:
<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>© 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:
<aside>
<!-- Conteúdo adicional -->
</aside>
Exemplo de uso:
<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:
- 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. - Localização: pode ser posicionada dentro ou fora da tag
<main>, dependendo do contexto. - 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
GO TO FULL VERSION