A tag span: agrupando conteúdo em linha

Na lição anterior, você conheceu a <div> — o armário genérico para agrupar blocos de conteúdo. Agora, imagine que você precisa destacar uma palavra específica ou uma pequena frase dentro de um parágrafo, sem quebrar o fluxo do texto. Para isso, temos a tag <span>.

span é como a <div>, mas para conteúdo inline (em linha). Ela também é um contêiner neutro, sem significado semântico próprio, e sua única função é agrupar pequenos trechos de conteúdo para:

1. Estilização com CSS: Aplicar estilos a um trecho específico de texto.
2. Manipulação com JavaScript: Selecionar e modificar um trecho de texto.

O que é um span?

A <span> é um elemento inline genérico. Isso significa que, por padrão:

• Ela ocupa apenas a largura necessária para seu conteúdo.
• Ela não começa em uma nova linha e não força o próximo elemento a começar em uma nova linha. Ela "flui" junto com o texto.
• Ela pode conter apenas outros elementos inline.

Visualmente, uma <span> sozinha não faz nada. Ela não adiciona espaçamento, bordas ou qualquer estilo por padrão. Ela é um contêiner invisível dentro do texto até que você aplique CSS a ela.

<!-- Exemplo básico de span -->
<p>Este é um texto com uma <span style="color: blue; font-weight: bold;">palavra importante</span> destacada.</p>

<p>Outro trecho com <span style="background-color: yellow;">informação relevante</span>.</p>

span vs. div: a diferença fundamental

A principal diferença entre <span> e <div> é o seu comportamento de exibição padrão:

Quando usar span?

Use <span> sempre que precisar aplicar um estilo ou manipular um pequeno trecho de conteúdo dentro de uma linha, sem alterar o fluxo do documento.

1. Para estilização de texto

<style>
  .destaque {
    color: #e74c3c; /* Vermelho */
    font-weight: bold;
  }
  .sublinhado {
    text-decoration: underline;
  }
  .icone {
    font-family: 'Font Awesome'; /* Exemplo de fonte de ícones */
    margin-right: 5px;
  }
</style>

<p>
  O prazo final para entrega do projeto é
  <span class="destaque">amanhã</span>.
</p>

<p>
  Clique <span class="sublinhado">aqui</span> para mais informações.
</p>

<p>
  <span class="icone">&#xf005;</span> Avaliação 5 estrelas!
</p>

2. Para manipulação com JavaScript

<p>
  O preço original era <span id="preco-antigo" style="text-decoration: line-through;">R$ 199,90</span>.
  Agora, por apenas <span id="preco-novo" style="color: green; font-weight: bold;">R$ 99,90</span>!
</p>

<script>
  const precoAntigo = document.getElementById('preco-antigo');
  const precoNovo = document.getElementById('preco-novo');

  // Exemplo: mudar o texto do preço novo após 5 segundos
  setTimeout(() => {
    precoNovo.textContent = 'R$ 89,90 (Promoção relâmpago!)';
  }, 5000);
</script>

span vs. elementos semânticos inline

Assim como a <div>, a <span> é um elemento não semântico. Isso significa que ela não descreve o tipo de conteúdo que contém. Sempre que houver um elemento inline semântico mais apropriado, prefira-o à <span>.

Quando usar span e quando usar elementos semânticos inline?

• Use elementos semânticos inline quando o trecho de texto tem um significado claro e específico (é uma ênfase, uma data, um código, etc.). Isso melhora a acessibilidade e o SEO.
• Use <span> quando o agrupamento é puramente para fins de estilização ou manipulação com JavaScript, e o trecho de texto não se encaixa em nenhum elemento semântico inline mais específico.

<!-- ✅ Bom uso de elementos semânticos inline -->
<p>
  Este é um texto com uma palavra <strong style="color: red;">muito importante</strong>.
  A reunião será às <time datetime="14:00">14h</time>.
</p>

<!-- ✅ Bom uso de span (para estilização que não tem semântica própria) -->
<p>
  O valor total é de <span class="moeda">R$</span> <span class="valor">1.250,00</span>.
  <!-- 'moeda' e 'valor' não têm tags semânticas específicas -->
</p>

<!-- ❌ Mau uso de span (poderia ser semântico) -->
<p>
  Este é um texto com uma <span style="font-weight: bold;">palavra importante</span>.
  <!-- Deveria ser <strong> -->
</p>

<p>
  A reunião será às <span class="horario">14h</span>.
  <!-- Deveria ser <time> -->
</p>

Resumindo

• <span> é um elemento inline genérico e não semântico.
• Sua principal função é agrupar pequenos trechos de conteúdo dentro de uma linha para estilização com CSS ou manipulação com JavaScript.
• Ela não quebra linha e ocupa apenas o espaço necessário para seu conteúdo.
• Sempre que possível, prefira elementos semânticos inline (strong, em, time, code, etc.) em vez de <span> para dar significado ao seu conteúdo.
• Use <span> quando o agrupamento é puramente visual ou funcional, e não há um elemento semântico inline mais apropriado.