Grouping Tags em HTML5

Introdução ao Grouping Tags

Em HTML5, Grouping Tags são usadas para agrupar conteúdos relacionados em blocos lógicos. Elas ajudam na organização da estrutura do documento, melhorando a semântica, acessibilidade e layout.

As principais tags de agrupamento são:

<div> → caixa genérica de bloco (block-level) sem significado semântico.
<section> → define uma seção temática do documento.
<article> → representa conteúdo independente, como notícias ou postagens.
<aside> → conteúdo lateral ou complementar (ex: notas, dicas, anúncios).
<header> → cabeçalho de página ou seção.
<footer> → rodapé de página ou seção.
<nav> → menu de navegação.

Exemplo com <div>

A tag <div> é um container genérico usado para agrupar elementos sem transmitir significado semântico. Frequentemente é utilizada junto com classes e IDs para estilização.

Minha Caixa com div

Este conteúdo está dentro de um <div>.

<div class="exemplo">
    <h3>Minha Caixa com div</h3>
    <p>Conteúdo dentro do div.</p>
</div>

Exemplo com <section>

A tag <section> define uma seção temática, ideal para agrupar conteúdos relacionados.

Seção de Notícias

Cada seção deve conter um título e seu conteúdo relacionado.

<section>
    <h3>Seção de Notícias</h3>
    <p>Conteúdo da seção...</p>
</section>

Exemplo com <article> e <aside>

<article> é usado para conteúdos independentes (notícias, posts, artigos). <aside> é conteúdo complementar ou lateral.

Artigo Principal

Este é o conteúdo do artigo, independente do resto da página.

<article>
    <h3>Artigo Principal</h3>
    <p>Conteúdo do artigo.</p>
    <aside><p>Conteúdo complementar.</p></aside>
</article>

Exemplo com <header>, <footer> e <nav>

Essas tags dão significado semântico ao documento e melhoram acessibilidade.

Cabeçalho do Site

<header>
    <h3>Cabeçalho</h3>
    <nav><a href="#">Início</a> | ... </nav>
</header>

<footer>
    <p>Rodapé do site</p>
</footer>

Dicas Importantes

Use <div> para agrupamento genérico, mas prefira tags semânticas quando possível.
Cada <section> ou <article> deve conter um título.
O uso correto melhora a acessibilidade e SEO do site.
Combine <aside> para informações complementares.

Laboratório Prático

Crie uma página HTML com um <header> contendo título e menu de navegação.
Crie 2 <section> com conteúdos diferentes, cada uma com título e parágrafo.
Adicione 1 <article> dentro de uma seção e insira um <aside>.
Finalize a página com um <footer>.
Use <div> para agrupar conteúdos adicionais ou estilização quando necessário.