0Pricing
HTML Academy · Aula

Os elementos span e div

Utilizar contentores genéricos em linha e em bloco como pontos de ligação para estilos.

Os elementos span e div é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 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.

Contêineres genéricos

O HTML tem dois elementos contêineres genéricos e semanticamente neutros:

  • <div> — um contêiner de bloco
  • <span> — um contêiner em linha

Eles não têm significado por si mesmos — existem exclusivamente como pontos de conexão para estilização e scripts.

O elemento div

<div> é um contêiner de bloco — cria uma nova linha antes e depois:

<div class="card">
  <h2>Card Title</h2>
  <p>Card content here.</p>
</div>

<div class="sidebar">
  <p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->

O elemento span

<span> é um contêiner em linha — flui dentro do texto:

<p>The price is <span class="price">$29.99</span> per month.</p>

<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>

<!-- span targets a part of text for styling or scripting
     without adding block-level line breaks -->

Quando usar div em vez de elementos semânticos

Antes de recorrer a <div>, verifique se um elemento semântico é adequado:

  • Cabeçalho da página → <header>
  • Navegação → <nav>
  • Conteúdo principal → <main>
  • Publicação de blog → <article>
  • Barra lateral → <aside>
  • Rodapé da página → <footer>

Use <div> somente quando nenhum elemento semântico for aplicável.

Divite

Divite — uso excessivo de <div> para tudo:

<!-- Divitis: meaningless nesting -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Better: semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Pontos de conexão do CSS com class e id

<div> e <span> são usados com os atributos class ou id para direcionamento pelo CSS:

<div class="hero-section">
  <h1>Welcome</h1>
  <p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>

<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->

Direcionamento com JavaScript

<div> e <span> também são alvos do JavaScript:

<span id="counter">0</span>

<script>
  const counter = document.getElementById('counter');
  let count = 0;
  setInterval(() => {
    count++;
    counter.textContent = count;
  }, 1000);
</script>

Regras de aninhamento

Regras de aninhamento para contêineres genéricos:

  • <div> pode conter <div> e <span>
  • <span> só pode conter <span> e conteúdo em linha
  • Não coloque <div> dentro de <span>
<span>
  Inline text
  <span>Nested span OK</span>
  <!-- <div> inside span: INVALID -->
</span>

div para layout

Padrão comum de layout usando divs:

<div class="layout">
  <div class="sidebar"><!-- sidebar --></div>
  <div class="content"><!-- main content --></div>
</div>

<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->

span para estilização em linha

Padrões comuns de estilização em linha:

<p>Status: <span class="badge badge-success">Active</span></p>

<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
        <span style="color: green; font-weight: bold;">$30</span></p>

div e span são invisíveis

Por padrão, <div> e <span> são contêineres invisíveis:

  • <div> não adiciona estilização visual além da exibição como bloco
  • <span> não adiciona absolutamente nenhuma estilização
  • Toda a aparência vem do CSS que você aplica
  • Isso faz deles contêineres neutros perfeitos

Verificação rápida

Qual elemento você deve usar para estilizar uma única palavra dentro de um parágrafo?

Recapitulação: span e div

Essenciais dos contêineres genéricos:

  • <div> — de bloco, agrupa elementos para o layout
  • <span> — em linha, direciona partes do texto para estilização
  • Ambos são semanticamente neutros — não adicionam significado
  • Prefira elementos semânticos do HTML5 quando forem aplicáveis
  • Use class e id para conectá-los ao CSS e ao JavaScript

Perguntas Frequentes

A aula “Os elementos span e div” é grátis?

Sim — o texto completo de “Os elementos span e 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 “Os elementos span e div”?

Utilizar contentores genéricos em linha e em bloco como pontos de ligação para estilos. 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 4 de 4.

Quanto tempo leva a aula “Os elementos span e 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. Títulos h1-h6 e a sua hierarquia
  2. Parágrafos, em, strong e b, i
  3. br, hr, blockquote e pre
  4. Os elementos span e div
← Voltar para HTML Academy