Docs executáveis de HTML: Tag span

Q: Qual a diferença entre div e span?

Uma é um block: começa numa linha nova e ocupa a largura toda. Um é inline: fica dentro da linha de texto e tem só a largura do conteúdo. Use div para agrupar blocos de conteúdo e span para marcar palavras dentro do texto.

Q: Por que width não funciona no meu span?

Elementos inline ignoram width, height e margens verticais. Dê ao span display: inline-block para mantê-lo na linha aceitando um tamanho, ou display: block para que ele se comporte como uma div.

Tag span no HTML: estilizar parte do texto, div vs span

A tag <span> é um contêiner inline genérico: ela envolve algumas palavras dentro de uma linha para você estilizá-las ou manipulá-las com script sem quebrar a linha. Veja como usar, como ela difere da div e quando uma tag mais específica serve melhor.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

O que a tag span faz

<span> envolve um trecho de texto dentro de uma linha para você estilizá-lo ou encontrá-lo com JavaScript. É o gêmeo inline da <div>: não tem significado nem aparência padrão, e não começa uma linha nova.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

A frase continua numa linha só. Só as palavras envolvidas mudam.

div vs span

As duas têm o mesmo propósito (um contêiner sem significado) e diferem na forma como ficam na página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

A div quebra a frase em três linhas e se estende pela página; o span fica dentro da frase e abraça o seu texto.

	`<div>`	`<span>`
Exibição	Block	Inline
Começa uma linha nova	Sim	Não
Largura	Toda a largura disponível	A largura do conteúdo
`width`, `height`, margem vertical	Aplicados	Ignorados
Pode conter	Qualquer coisa, inclusive blocks	Só texto e elementos inline
Uso típico	Seções, cards, wrappers de layout	Uma palavra ou expressão dentro do texto

Mais uma diferença: uma <div> não é permitida dentro de um <p>, e o navegador fecha o parágrafo antes da hora se você tentar, enquanto um span pode ir em qualquer lugar onde vai texto. Mais sobre isso na página da div.

Estilizando um span: o que funciona e o que não funciona

Cor, fonte, fundo e padding horizontal funcionam num span. Tamanho não: um elemento inline ignora width, height e as margens de cima e de baixo. Mude para inline-block para definir o tamanho e mantê-lo na linha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

O primeiro span tem só a largura das palavras. O segundo tem exatamente 120 por 40 pixels e continua dentro da frase.

Spans com JavaScript

Um span é o marcador de posição comum para um valor que um script preenche, como um contador ou um nome de usuário:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Só o número muda; o resto da frase fica intacto.

Quando uma tag específica é melhor que span

Um span não tem significado, então o leitor de tela o lê como texto simples. Quando as palavras têm um papel, use a tag desse papel e estilize como quiser:

Significado	Use no lugar de um span
Texto importante	`<strong>`
Ênfase	`<em>`
Texto destacado ou marcado	`<mark>`
Código, nome de arquivo	`<code>`
Uma tecla do teclado	`<kbd>`
Uma data ou hora	`<time datetime="2026-09-24">`
Texto em outro idioma	`<span lang="fr">` (span mais o atributo `lang`)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

A página de negrito explica a diferença entre <strong>, <b>, <em> e <i>.

Erros comuns

Definir width num span simples. É ignorado. Use display: inline-block.
Colocar uma div ou um parágrafo dentro de um span. HTML inválido que quebra a linha. Troque o span externo por uma div.
Spans clicáveis. Como a div, um span com onclick não é alcançável pelo teclado. Use um <button> ou um link.
Um span para cada estilo. Se parágrafos ou seções inteiras precisam de um estilo, coloque a classe no próprio <p> ou contêiner, em vez de envolver o texto num span.

Perguntas frequentes

O que é um span no HTML?

<span> é um contêiner inline genérico. Ele envolve parte de uma linha de texto, como uma palavra, para que CSS ou JavaScript possam mirá-la, e não tem aparência nem significado próprios.

Qual a diferença entre div e span?

Uma <div> é um block: começa numa linha nova e ocupa a largura toda. Um <span> é inline: fica dentro da linha de texto e tem só a largura do conteúdo. Use div para agrupar blocos de conteúdo e span para marcar palavras dentro do texto.

Por que width não funciona no meu span?

Elementos inline ignoram width, height e margens verticais. Dê ao span display: inline-block para mantê-lo na linha aceitando um tamanho, ou display: block para que ele se comporte como uma div.

Como mudar a cor de uma palavra no HTML?

Envolva a palavra num span com uma classe e dê a cor no CSS: <span class="accent">word</span> com .accent { color: #2563eb; }. Para um caso isolado, <span style="color: #2563eb">word</span> também funciona.

Um span pode conter uma div?

Não. Um span só pode conter conteúdo inline, como texto, links, imagens e outros spans. Os navegadores até exibem uma div dentro de um span, mas é HTML inválido e quebra a linha, então troque o elemento externo por uma div.

Conceitos relacionados