0Pricing
HTML Academy · Aula

O elemento section versus div

Saiba quando usar section em vez de um div simples.

O elemento section versus div é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O elemento section

O elemento <section> agrupa conteúdo relacionado em uma seção temática:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

section versus div

A pergunta principal é: esse grupo tem um tema ou propósito que poderia receber um nome?

  • <section> — sim; representa um agrupamento temático e deve ter um título
  • <div> — não; é apenas um contêiner para estilização ou scripts

section exige um título

Toda <section> deve ter um título (<h2>-<h6>):

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Quando usar section

Use <section> para:

  • Capítulos de um documento
  • Abas ou etapas de um assistente
  • Partes de um artigo longo (Introdução, Métodos, Resultados)
  • Seções de marketing da página inicial (Recursos, Preços, Depoimentos)

Quando usar div

Use <div> quando precisar apenas de um contêiner para CSS ou JavaScript, sem significado semântico:

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

section em um artigo longo

Use sections para criar capítulos dentro de um article:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Seções da página inicial

Página inicial estruturada com sections:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

section cria contexto para títulos

As sections criam novos contextos de títulos no algoritmo de estrutura de documentos do HTML5:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby para sections

Associe uma section ao seu título para leitores de tela:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Fluxograma de decisão

Qual elemento contêiner deve ser usado?

  • Navegação principal? → <nav>
  • Conteúdo principal da página? → <main>
  • Conteúdo autocontido? → <article>
  • Agrupamento temático com um título? → <section>
  • Barra lateral ou conteúdo relacionado? → <aside>
  • Apenas um contêiner para estilização? → <div>

section sem título: use div

Se não puder dar um título a uma section, use div:

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Verificação rápida

Quando você deve preferir div a section?

Resumo: section versus div

Fundamentos de section versus div:

  • <section> — grupo temático; deve ter um título
  • <div> — contêiner semanticamente neutro para estilização ou scripts
  • section cria uma região nomeada de referência para a navegação por leitores de tela
  • Adicione aria-labelledby para associar a section ao seu título
  • Em caso de dúvida, use div; você sempre poderá aprimorá-lo mais tarde

Perguntas Frequentes

A aula “O elemento section versus div” é grátis?

Sim — o texto completo de “O elemento section versus div” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “O elemento section versus div”?

Saiba quando usar section em vez de um div simples. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “O elemento section versus div”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. header nav main e footer
  2. O elemento article: conteúdo independente
  3. O elemento section versus div
  4. time address e mark
← Voltar para HTML Academy