Tag HTML <span>
A tag HTML <span> é um contêiner inline genérico sem significado semântico, usado para estilizar ou manipular texto. Exemplos e boas práticas.
A tag HTML <span> é um contêiner inline genérico para um trecho de texto ou conteúdo. Ao contrário da maioria dos elementos HTML, ela não carrega nenhum significado semântico — não informa ao navegador nem às tecnologias assistivas nada sobre o que o conteúdo é. Sua única função é marcar um trecho de conteúdo inline para que você possa direcioná-lo com CSS ou JavaScript.
Como não adiciona nenhum significado, <span> deve ser seu último recurso, não o primeiro. Sempre que um elemento semântico se adequar ao conteúdo, prefira-o:
| Se o texto for… | Use isto, não <span> |
|---|---|
| enfatizado | <em> |
| importante / forte | <strong> |
| destacado / relevante | <mark> |
| uma abreviação | <abbr> |
| código | <code> |
| uma data ou hora | <time> |
Use <span> apenas quando nenhum elemento inline semântico se aplicar e você precisar simplesmente de um gancho para estilização ou scripting — por exemplo, colorir uma única palavra, envolver um caractere para um efeito de capitular ou rotular um ícone decorativo.
Prefira elementos semânticos
Os dois trechos abaixo parecem idênticos no navegador, mas não são iguais. O primeiro usa um <span> com estilo inline; o segundo usa <mark>, que realmente comunica "este texto está destacado por relevância" para leitores de tela e mecanismos de busca.
<!-- Just visual — no meaning conveyed -->
<p>Search results for <span style="background:yellow;">CSS</span> grid.</p>
<!-- Semantic highlight — assistive tech understands it -->
<p>Search results for <mark>CSS</mark> grid.</p>Quando você precisa apenas de um gancho para estilização e não há correspondência semântica, <span> é a ferramenta certa. Quando a estilização reflete um significado, escolha o elemento que carrega esse significado.
<span> vs <div>
<span> e <div> são os dois contêineres genéricos "sem significado" no HTML. A diferença está no tipo de caixa que criam:
<span>é inline — flui dentro de uma linha de texto e ocupa apenas a largura do seu conteúdo. Não pode conter elementos de nível de bloco legalmente.<div>é de nível de bloco — começa em uma nova linha e se estende até a largura total do seu pai. Use-o para agrupar seções maiores.
<p>This sentence has an <span style="color:#8ebf42;">inline span</span> in the middle.</p>
<div style="border:1px solid #8ebf42;">
This div is a block — it sits on its own line and fills the row.
</div>Regra geral: use <span> para uma parte de uma linha e <div> para um bloco de conteúdo.
Sintaxe
A tag <span> vem em pares. O conteúdo é escrito entre as tags de abertura (<span>) e fechamento (</span>).
No exemplo abaixo, aplicamos um estilo diretamente dentro da tag.
Exemplo da tag HTML <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Veja outro exemplo em que adicionamos um atributo class à tag e aplicamos os estilos separadamente em uma folha de estilos. Isso cria uma capitular — uma primeira letra ampliada, um toque tipográfico clássico para o início de um capítulo.
Exemplo da tag HTML <span> com o atributo class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Make the first letter much larger */
position: relative; /* Position it relative to its normal spot */
top: 7px; /* Nudge it down to align with the text */
}
</style>
</head>
<body>
<!-- The first letter "S" is wrapped in a span so we can style it alone -->
<p>
<span class="letter">S</span>he brought in disgusting, disturbing yellow
flowers in her hands. And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Casos de uso de acessibilidade
Dois padrões tornam o <span> genuinamente útil para acessibilidade.
Texto apenas para leitores de tela. Uma classe visually-hidden oculta o texto da tela, mas o mantém disponível para leitores de tela. Esta é a forma padrão de fornecer contexto que usuários com visão obtêm apenas pelo layout.
<a href="/cart">
View cart
<span class="visually-hidden">(3 items)</span>
</a>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>Rotulação de ícones. Fontes de ícones e glifos decorativos não têm texto para um leitor de tela anunciar. Oculte o <span> decorativo com aria-hidden e forneça um nome acessível com aria-label no link ou botão.
<button aria-label="Close dialog">
<span aria-hidden="true">×</span>
</button>Aqui, aria-hidden="true" remove o "×" visual da árvore de acessibilidade, enquanto aria-label informa à tecnologia assistiva que o botão significa "Fechar diálogo".
Atributos
<span> não possui atributos próprios. Na prática, estes atributos globais fazem quase todo o trabalho:
| Atributo | Finalidade |
|---|---|
class | Conecta o elemento a uma ou mais regras CSS. |
id | Fornece um identificador único para direcionamento via CSS ou JavaScript. |
style | Aplica CSS inline diretamente (útil para estilizações pontuais). |
lang | Marca um trecho de texto como um idioma diferente, ex.: <span lang="fr">. |
A tag também suporta os atributos de evento, permitindo reagir a ações do usuário como cliques ou hovers. Um evento ocorre quando o navegador reage a uma ação do usuário — clicar com o mouse, reproduzir um vídeo, enviar um formulário, entre outros.