Para que serve o elemento/tag span

Neste artigo veremos para que serve o elemento/tag span, suas principais utilizações e sua importância no HTML/CSS

Costumo falar que a tag span é como uma div, só que com display de inline-block, ou seja, na mesma linha dos outros elementos

Logo esta tag não da valor semântico algum para o document/projeto, ela é nula nesta questão

Isso cria uma certa responsabilidade ao utilizar ela, pois não quer dizer nada para os interpretadores de página que rankeiam o seu site com SEO

Então basicamente os usos do span são:

Agrupar dois elementos de forma inline (porém pode ser resolvido com CSS também, com outros elementos);
Estilizar uma porção de outro elemento com CSS;
Manipular o elemento com JavaScript;

O primeiro ponto é facilmente contornado com CSS, então é dispensável para usuários/programadores mais avançados

Já os demais são interessantes, vejamos um exemplo do segundo ponto

Para que serve o elemento/tag span: prática com CSS

Veja a seguinte estrutura de HTML e CSS:

<!-- HTML -->
<p>Este projeto vai ser feito com <span>PHP</span> no back-end e <span>HTML/CSS</span> no front-end.</p>

/* CSS */
p {
    padding: 10px;
    margin: 50px;
    font-family: Arial;
}

span {
    background-color: darkblue;
    color: yellow;
    padding: 5px;
    font-weight: bold;
}

E o resultado é este:

Então perceba que neste exemplo, as linguagens de programação deveriam ficar em evidência

Por um motivo pré-determinado, por exemplo, as linguagens mudam a cada projeto, logo devem estar destacadas de alguma forma

Cabendo assim o uso da tag span neste caso, porém devemos tomar cuidado com alguns pontos que veremos na próxima seção

Onde não usar a tag span

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Claro que nada é proibido no HTML/CSS, mas alguns casos podem ser considerados má prática ou até uma utilização errada, tenha isso em mente

Então onde eu acredito que você não deveria utilizar, é no caso de ênfase ou importância de um texto

Por exemplo: você quer destacar uma palavra ou frase, mas com valor semântico na página

Neste caso específico há alternativas melhores, já que span não da semântica/SEO para a página

Você pode optar pela tag strong, por exemplo, que veio com a versão 5 do HTML

E serve justamente para isso, dar importância a alguma porção de texto na página, de forma inline também, e com isso auxiliar os interpretadores de página a encontrar partes ou palavras-chave no seu texto

Fora este caso, evite também utilizar a tag span só pelo fato dela não quebrar linha no HTML

Aprenda sobre a propriedade display no CSS, pois você pode utilizar a tag certa ao invés de utilizar a tag span para estes casos

Conclusão

Neste artigo vimos as utilizações da tag span, a minha sugestão é que se use para estilizar elementos sem que você queira destacar os mesmos semânticamente

Para o fim semântico devemos optar por tags próprias para isso, como strong

E por hoje é isso, até o próximo post!