Aula 34 - Elemento Section HTML

Introdução

O elemento <section> é uma tag semântica do HTML5 utilizada para criar divisões ou agrupamentos de conteúdos relacionados dentro de uma página.

Ele permite organizar melhor o documento, separando assuntos diferentes em blocos independentes.

📌 Uma section representa uma parte temática do conteúdo de uma página.

O que é o Elemento Section?

A tag <section> representa uma seção genérica de conteúdo que possui um tema específico.



<section>


Conteúdo relacionado


</section>

Por que utilizar Section?

Benefício	Descrição
Organização	Divide conteúdos por assuntos.
Semântica	Dá significado ao código HTML.
Acessibilidade	Facilita navegação por leitores de tela.
Manutenção	Torna o código mais organizado.

Estrutura Básica



<section>



<h2>

Título da Seção

</h2>



<p>

Conteúdo da seção.

</p>



</section>

Section dentro do Main

Normalmente as sections ficam dentro do elemento <main>, organizando o conteúdo principal.



<main>



<section>



<h2>

Sobre a Empresa

</h2>



<p>

Informações institucionais.

</p>



</section>



</main>

Exemplo de Página com Sections



<main>



<section>





<h2>

Produtos

</h2>



<p>

Lista de produtos.

</p>



</section>





<section>



<h2>

Serviços

</h2>



<p>

Serviços oferecidos.

</p>



</section>



</main>

Section x Div

Div	Section
Apenas agrupamento visual.	Possui significado semântico.
Não representa assunto.	Representa um tema específico.
Usada para estilos CSS.	Usada para estrutura do conteúdo.

Quando utilizar Section?

Quando existe um agrupamento por assunto.
Quando o conteúdo possui um título próprio.
Quando uma página possui diferentes áreas.
Quando deseja melhorar a organização HTML.

Exemplo de Site Institucional



<main>



<section>

Sobre nós

</section>



<section>

Nossos serviços

</section>



<section>

Contato

</section>



</main>

Section e SEO

Os mecanismos de busca conseguem interpretar melhor páginas que possuem uma estrutura semântica organizada.

Exemplo:

Uma página com sections bem definidas facilita a compreensão dos assuntos pelo usuário e pelos buscadores.

Cuidados no Uso

Não usar section apenas para criar espaço.
Evitar excesso de sections sem necessidade.
Utilizar títulos dentro das sections.
Manter organização lógica do conteúdo.

⚠️ Para agrupamentos somente visuais, normalmente utilizamos <div>.

Estrutura HTML5 Completa



<body>



<header>

Cabeçalho

</header>



<main>



<section>

Conteúdo 1

</section>



<section>

Conteúdo 2

</section>



</main>



<footer>

Rodapé

</footer>



</body>

Resumo da Aula

<section> organiza conteúdos por temas.
É um elemento semântico do HTML5.
Normalmente possui um título.
Melhora acessibilidade e SEO.
Ajuda na organização do código.

📚 Elemento Section no HTML