Aprenda neste tutorial passo a passo o que � a tag span

A tag � um elemento HTML que possui a finalidade de agrupar um conte�do textual e at� mesmo apresentar um conte�do visual.

O � 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 faz o agrupamento a n�vel de linha.

Como utilizar a tag ?

A tag � representado como um cont�iner gen�rico que geralmente faz o agrupamento em linha de conte�dos fraseados.

Com isso, a tag 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 quando nenhum outro elemento sem�ntico for apropriado para o contexto do c�digo escrito.

: na pr�tica


  // O elemento <span> est� sendo usado para colorir uma parte do texto:
  <p>Eu tenho olhos <span >azuis</span>.</p>

Sintaxe

conteudo�

Exemplo de uso da tag

Exemplo 1

Nos C�digos 1 e 2 demonstraremos um exemplo de como aplicar a tag 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>

C�digo 1. C�digo HTML


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

C�digo 2. C�digo CSS

See the Pen HTML Span - Exemplo 1 by Wladimir Batista Castro (@wladimirrj) on CodePen.

Exemplo 2

Nos C�digos 3 e 4 demonstraremos um exemplo de como aplicar com a tag 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>

C�digo 3. C�digo HTML


  .corDeFundoVerde {
    background-color: #2ecc71;
  }
  #estiloFonte {
    font-style: italic;
  }

C�digo 4. C�digo CSS

See the Pen HTML Span - Exemplo 2 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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>

C�digo 5. C�digo HTML


  .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;
  }

C�digo 6. C�digo CSS

See the Pen HTML Span - Exemplo 3 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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 � suportada em todos os navegadores apresentados na tabela abaixo:

<span>	Chrome	Mozilla Firefox	Edge / IE	Opera	Safari
Sim	Sim	Sim	Sim	Sim

Vantagens de usar a tag span

A tag � uma ferramenta vers�til e poderosa, principalmente para estilizaç�o e estruturaç�o de conte�do. Vejas as principais vantagens:

Estilizaç�o espec�fica;
Flexibilidade;
Interatividade;
Marcaç�o sem�ntica personalizada;

1. Estilizaç�o espec�fica

Uma das principais utilizaç�es da tag � 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 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 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 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 pode ser um recurso �til na integraç�o com tecnologias de IA, proporcionando funcionalidade, dinamismo e personalizaç�o em projetos.

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>

Como utilizar a tag <span>?

<span>: na pr�tica