<span>
A tag <span> é um elemento HTML que possui a finalidade de agrupar um conteúdo textual e até mesmo apresentar um conteúdo visual.
O <span> é bastante parecido com o elemento <div>. A diferença entre essas tags é que <div> faz o agrupamento dos elementos a nível de bloco enquanto o <span> faz o agrupamento a nível de linha.
Como utilizar a tag <span>?
A tag <span> é representado como um contêiner genérico que geralmente faz o agrupamento em linha de conteúdos fraseados.
Com isso, a tag <span> pode ser utilizada para agrupar um texto ou até mesmo representar um elemento visual no código HTML.
Entretanto, só é recomendado o uso da tag <span> quando nenhum outro elemento semântico for apropriado para o contexto do código escrito.
<span>: na prática
// O elemento <span> está sendo usado para colorir uma parte do texto:
<p>Eu tenho olhos <span style="color:blue">azuis</span>.</p>
Sintaxe
<span>conteudo…</span>Exemplo de uso da tag <span>
Exemplo 1
Nos Códigos 1 e 2 demonstraremos um exemplo de como aplicar a tag <span> para agrupar um conteúdo textual.
<p>Este exemplo foi realizado com <span>HTML</span> e <span>CSS</span> para explicar o uso do <span>span</span>.</p>
p {
font-family: Arial;
}
span {
background-color: darkblue;
color: yellow;
padding: 5px;
font-weight: bold;
}
Exemplo 2
Nos Códigos 3 e 4 demonstraremos um exemplo de como aplicar com a tag <span> utilizando classe e id para alterar o estilo desses elementos.
<p>
Uma <span class="corDeFundoVerde">cor de fundo verde</span> implica perfeitamente a beleza da natureza.
</p>
<p>
Um estilo de fonte em <span id="estilo-fonte">itálico</span> pode ser fundamental para enfatizar um texto.
</p>
.corDeFundoVerde {
background-color: #2ecc71;
}
#estiloFonte {
font-style: italic;
}
Note que o primeiro span recebe uma classe e o segundo span recebe um id.
Essa classe e o id serão utilizados no CSS para gerar estilo para ambas as tags span.
Exemplo 3
Nos Códigos 5 e 6 demonstraremos um exemplo utilizando o elemento span para apresentar conteúdos visuais de um botão de menu hambúrguer.
<button class="menu-hamburger">
<span></span>
<span></span>
<span></span>
</button>
.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;
}
Note que as tags span não possuem conteúdos. O conteúdo visual do meu será apresentado através da estilização das tags span.
Compatibilidade com navegadores
A <span> é suportada em todos os navegadores apresentados na tabela abaixo:
| <span> | Chrome | Mozilla Firefox | Edge / IE | Opera | Safari |
| Sim | Sim | Sim | Sim | Sim |
