Tag Span HTML | Tutoriais de Desenvolvimento Web

Introdução

A tag HTML  é usada para agrupar elementos com fins de estilização. Pode ser considerada como um contêiner genérico para o conteúdo de fraseamento (phrasing content). A tag  é muito semelhante à tag <div>, mas é um elemento inline, ao contrário de <div>, que é um elemento de nível de bloco (block-level element). A tag  não representa inerentemente nada. Neste laboratório, você aprenderá como usar a tag  para agrupar elementos com fins de estilização.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicionando o Código HTML

No arquivo index.html, adicione o seguinte código dentro da tag <body>:

<p>This is a <span>simple</span> example of using the span tag.</p>

Aqui, criamos um parágrafo com a palavra "simple" envolvida na tag . Isso nos ajudará a entender o uso desta tag na prática.

Estilizando o Elemento Span

Agora, vamos ver como estilizar o conteúdo que está envolvido na tag . Por exemplo, se quisermos adicionar cor à palavra "simple", podemos usar a propriedade color em CSS.

Adicione o seguinte código CSS dentro da tag <head>:

<style>
  span {
    color: red;
  }
</style>

Este código CSS altera a cor de todo o conteúdo envolvido na tag  para vermelho. Como envolvemos a palavra "simple" na tag , ela será impressa na cor vermelha.

Usando Span com Outras Tags HTML

A tag  pode ser usada com outros elementos HTML também. Vamos ver como você pode usá-la com a tag <a>.

Adicione o seguinte código HTML dentro da tag <body>:

<p>
  This is a <span><a href="#">link</a></span> example.
</p>

Isso cria um parágrafo com a palavra "link" envolvida na tag  e vinculada à URL #.

Estilizando o Texto do Link

Agora, vamos ver como podemos estilizar o texto vinculado. Adicione o seguinte código CSS dentro da tag <head>:

<style>
  span a {
    color: green;
    text-decoration: none;
  }
</style>

Este código CSS define a cor do texto dentro da tag <a> para verde, sem nenhum sublinhado.

Adicionando Atributos de Evento

A tag  suporta tanto atributos globais quanto de evento. Vamos ver como podemos usar o atributo global class para aplicar estilos.

Adicione o atributo class à tag  que envolve a palavra "simple", como mostrado abaixo:

<p>
  This is a <span class="example"><a href="#">link</a></span> example.
</p>

Adicione o seguinte código CSS dentro da tag <head>:

<style>
  .example {
    font-size: 20px;
  }
</style>

Este código CSS aumenta o tamanho da fonte do conteúdo dentro da tag  que possui a classe example.

Usando Tags Span para Semântica

Embora a tag  não tenha nenhum significado inerente, ela pode ser usada para transmitir a semântica do texto que envolve. Por exemplo, você pode usá-la para envolver uma data ou uma porcentagem para indicar que o texto dentro tem um significado especial.

Por exemplo, adicione o seguinte código ao arquivo index.html:

<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>

Neste exemplo, 90 está envolvido dentro da tag  e recebeu o nome de classe score. Ao fazer isso, transmitimos que o texto dentro da tag  tem um significado especial. Além disso, adicionamos o atributo aria-label para fornecer informações de acessibilidade a um leitor de tela.

Resumo

Neste laboratório, você aprendeu como usar a tag HTML  para agrupar elementos para fins de estilização. Você também aprendeu como estilizar o conteúdo envolvido dentro da tag , como usá-la com outras tags HTML, como usar atributos globais e de evento e como usar a tag  para transmitir semântica.

Estilizando Elementos com Span HTML