A tag span é igual a tag div, ambas servem para delimitar e agrupar outros elementos em HTML. O que as diferencia é que a tag div faz o agrupamento de elementos a nível de bloco e a tag span é a nível de linha. Ou seja, se você tem algum conteúdo em texto que precise ser agrupado e/ou destacado, a tag span é imprescindível para isso. 

Quando escrevemos algum conteúdo em texto muitas vezes, seja para destacar, delimitar e demarcar, precisamos agrupá-lo de alguma forma. Isso faz com que nosso conteúdo fique mais rico e fácil de ser compreendido por quem o lê.

Entretanto, muitas pessoas no início da carreira de desenvolvimento não entendem o porquê da tag span existir e da sua importância para os navegadores. Se temos opções de tags mais semânticas e com mais significado como section, article e main, por que então usar a tag span e o que significa span? São essas perguntas que responderemos logo a seguir!

Preparamos este conteúdo para você entender quando usá-la e quando não usá-la com os seguintes tópicos:

• O que é a tag span e para que serve?
• Quais as diferenças entre as tags span e div?
• Quais são os atributos da tag HTML span?
• Onde não usar a tag HTML span? Boas práticas em HTML!
• Como usar a tag span em HTML e CSS? Exemplos da prática!
• Com quais navegadores a tag span é compatível?

Boa leitura!

O que é a tag span e para que serve?

A tag span é uma tag HTML que foi introduzida a partir da versão 4 da linguagem de marcação, ou seja, a maior parte dos navegadores suportam essa tag. Sendo uma tag sem semântica definida, é possível aplicarmos diferentes possibilidades por meio dela, podendo agrupar conteúdos textos e também representar elementos visuais. A palavra “span” seria o mesmo que “período” ou “sentença”.

Quais as diferenças entre as tags span e div?

Como dito anteriormente, a tag span é quase igual a tag div. Ambas são responsáveis por agrupar múltiplos elementos, porém, o que as diferencia é que a tag div está a nível de blocos, enquanto a tag span está a nível inline (ou a nível textual).

Por exemplo, se tivermos múltiplas seções em uma página HTML, podemos usar a tag div para agrupá-las.

Veja o código HTML a seguir:

<header id="cabecalho"></header>
<article id="conteudo"></article>
<section id="links_relacionados"></section>

Se quisermos identificar nossa página, podemos agrupar estes elementos (blocos) com a tag div. Confira como ficou o mesmo código HTML:

<div id="pagina">
  <header id="cabecalho"></header>
  <article id="conteudo"></article>
  <section id="links_relacionados"></section>
</div>

Agora veja o seguinte exemplo de HTML:

<p>
  Batman é um herói da DC que se veste de morcego e Spider-Man é um herói da Marvel que se veste de aranha.
</p>

Se quisermos destacar todas as vezes que um herói foi citado nesse parágrafo, podemos utilizar a tag span para esse propósito, ficando da seguinte forma:

<p>
  <span class="hero">Batman</span> é um herói da DC que se veste de morcego e <span class="hero">Spider-Man</span> é um herói da Marvel que se veste de aranha.
</p>

Quais são os atributos da tag HTML span? 

A span tem diversos atributos que podem ser úteis para o desenvolvimento, trazendo definição ao nosso conteúdo, além de adicionar mais legibilidade ao nosso código fonte. Os atributos carregados por essa tag são divididos em dois: Atributos globais e Atributos de eventos.

Atributos globais

Os atributos globais são os que todas as tags compartilham entre si e a tag span também os carrega. Cada atributo possui uma função, algumas delas são:

• lang: ajuda a definir a linguagem de um elemento;
• tabindex: um número que indica se o elemento pode receber o foco, se ele deve ser navegável através do teclado e em que posição; 
• title: um conteúdo que apresenta informações relacionadas ao elemento. Esse conteúdo pode ser apresentado à pessoa usuária como uma dica de ferramenta. 

Além dessas, ainda existem muitas outras funções globais que os atributos possuem.

Atributos de eventos

Por meio de eventos, podemos utilizar o JavaScript para interagir com nosso conteúdo, deixando nossa página mais interativa e interessante para as pessoas usuárias. Alguns dos atributos que servem como eventos são:

• onload: script que é carregado depois de a página ser carregada;
• onerror: script que é carregado ao acontecer um erro;
• onresize: script que é carregado quando a página é redimensionada.

Ainda existem outros atributos para eventos além dos apresentados acima.

Onde não usar a tag HTML span? Boas práticas em HTML!

É muito importante saber que, por não possuir semântica, a tag span pode causar problemas se utilizada da forma errada. A semântica de uma tag serve para diferentes propósitos, o principal é o de categorizar seu conteúdo para os navegadores e ferramentas de busca.

Portanto, sempre que for utilizar a tag, faça a pergunta para si mesmo: “Existe alguma tag HTML que substitui o span?”. Se a resposta for sim, utilize a outra tag. Veja o exemplo a seguir de um conteúdo que lista os ingredientes de uma receita de bolo:

HTML

<div class="recipe">
  <span class="recipe__item">1 xícara de chá de leite</span>
  <span class="recipe__item">1 xícara de chá de óleo de soja</span>
  <span class="recipe__item">2 unidades de ovo</span>
  <span class="recipe__item">2 xícaras de chá de farinha de trigo</span>
</div>

Podemos ver que são listados diferentes itens para uma receita, porém, não estamos deixando explícito que isso é uma lista e se tem uma ordem ou não. Fazendo a pergunta: “Existe alguma tag HTML que substitui o span?” temos uma resposta: as tags ul e li em conjunto. Veja o código de exemplo a seguir:

HTML

<ul class="recipe">
  <li class="recipe__item">1 xícara de chá de leite</li>
  <li class="recipe__item">1 xícara de chá de óleo de soja</li>
  <li class="recipe__item">2 unidades de ovo</li>
  <li class="recipe__item">2 xícaras de chá de farinha de trigo</li>
</ul>

Além disso, a tag span não deve substituir as tags strong e em, que deixam o texto em negrito e itálico respectivamente. Pois, além delas alterarem o estilo do seu texto, elas definem se determinado conteúdo é mais importante do que outro e se deve ser enfatizado ou não. Portanto, tome cuidado com o mau uso da tag.

Como usar a tag span em HTML e CSS? Exemplos da prática!

Como dito anteriormente na seção explicando a sua utilização, essa tag serve para agrupar elementos e representar elementos visuais que não tenham uma semântica objetiva. Um exemplo de representação de elementos visuais é criarmos um botão utilizando CSS com menu hambúrguer, muito comum em sites responsivos:

HTML

<button class="menu-hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>

CSS

.menu-hamburger {
  border-radius: 10px;
  background: transparent;
  border: 1px solid #66ffa6;
  height: 50px;
  width: 50px;
  padding: 10px;
}

.menu-hamburger span {
  display: block;
  position: relative;
  border-radius: 5px;
  background-color: #66ffa6;
  height: 4px;
  width: 100%;
  margin-bottom: 7px;
}

.menu-hamburger span:last-child {
  margin-bottom: 0px;
}

O resultado de nosso exemplo será um botão com três linhas representando um menu como mostra a seguinte imagem:

Com quais navegadores a tag span é compatível?

A vantagem da tag span é que sua compatibilidade é muito elevada, sendo suportada pela maioria dos browsers. É suportada por todas as versões dos seguintes navegadores: 

• Chrome;
• Internet Explorer;
• Opera;
• Safari;
• WebView Android;
• Chrome Android;
• Opera Android;
• Safari on iOS;
• Samsung Internet.

E a partir das seguintes versões de navegadores:

• Edge 12+;
• Firefox 1+;
• Firefox for Android 4+.

Muitas vezes, precisamos criar elementos visuais que não interfiram no SEO de nosso site. Para que isso seja possível, precisamos deixar um pouco de lado a semântica trazida pelo HTML5 e uma ótima opção para isso é a tag span. Ao utilizá-la, podemos representar itens que não possuem um significado.

É importante deixar explícito que não existem “balas de prata”, ou seja, deve-se usar com responsabilidade tal tag, visto que seu uso excessivo pode causar problemas para seu conteúdo, impossibilitando que as ferramentas de busca o categorizem, deixando de apresentar seu site para as pessoas.

Gostou do nosso conteúdo sobre como utilizar a tag span? Então, confira nosso post com 5 dicas essenciais para você aprender CSS!