HTML span: agrupe e delimite textos e apresente elementos visuais com a tag span

Nesta documentação você aprenderá sobre o elemento HTML Span, como aplicar a tag span em código HTML e como podemos utilizá-la para agrupar e delimitar textos e também como apresentar um elementos visuais.

<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:

Vantagens de usar a tag span

A tag <span> é uma ferramenta versátil e poderosa, principalmente para estilização e estruturação de conteúdo. Vejas as principais vantagens:

1. Estilização específica;
2. Flexibilidade;
3. Interatividade;
4. Marcação semântica personalizada;

1. Estilização específica

Uma das principais utilizações da tag <span> é a aplicação de estilos num determinado trecho do conteúdo, por exemplo, pode se destacar uma palavra em um parágrafo com uma cor diferente. No exemplo abaixo, a palavra “mundo” será exibida em negrito e com a cor verde.

<p>Olá <span>mundo</span>!</p>

span{
  color: green;
  font-weight: bold;
}

2. Flexibilidade

A tag <span> não tem um estilo nativo ou função específica, como outras tags da linguagem HTML, sendo considerado um container genérico do tipo inline. O que permite definir seu comportamento com CSS ou JavaScript.

3. Interatividade

Além da estilização por meio da linguagem CSS é amplamente usada a linguagem JavaScript para adicionar funcionalidades e interatividade ao elemento. No exemplo abaixo ao passar o mouse sobre o texto entre as tag span, será alterado o estilo do texto e do ponteiro:

<p>Olá <span id="troca">mundo</span>!</p>

const troca = document.getElementById("troca");
troca.addEventListener('mouseover', () => {
  troca.style.color = "red";
  troca.style.cursor = 'pointer';
});

4. Marcação semântica personalizada

Por não possuir um valor semântico, ao combinar com os atributos class e ID permitirão uma identificação de partes específicas na organização do projeto. No exemplo abaixo o valor do atributo class chamado “moeda” servirá como indicação do que trata-se do texto envolvido pela tag span.

<p>O valor da compra foi <span class="moeda">R$</span>750,00</p>

.moeda {
  font-style: italic;
  color: green;
}

Associação da tag span com a IA

Vimos que a tag span possui diversas implementações válidas em nosso projeto, uma nova forma de utilização é possibilidade de uma associação com uma Inteligência Artificial. Sua utilização pode ser usada como um elemento estratégico para manipulação de dados dinâmicos gerados por IA. Conheça algumas das possibilidades:

1. Exibição de dados Dinâmicos

A IA pode atualizar dinamicamente o conteúdo dentro da tag <span> usando JavaScript e assim termos o conteúdo da tag dinâmico. por exemplo respostas em tempo real de chatbots.

2. Melhorias em Acessibilidade

Uma possibilidade de interação da IA com span é adaptar conteúdos específicos em tempo real. Por exemplo a tradução de determinado texto, o conteúdo do <span> pode ser atualizado automaticamente.

4. Personalização de Experiência do Usuário

Com base nas preferências do usuário a IA poderá utilizar a tag span para estilizá-la conforme a experiência do usuário.

A tag <span> pode ser um recurso útil na integração com tecnologias de IA, proporcionando funcionalidade, dinamismo e personalização em projetos.