Verificação HTML: Elemento "span" não fechado.

Sobre este problema HTML

O elemento  é um contentor inline usado para marcar uma porção de texto ou um grupo de elementos inline, tipicamente para fins de estilização ou scripting. Como a maioria dos elementos HTML, requer tanto uma tag de abertura  como uma tag de fecho . Quando a tag de fecho está em falta, o parser HTML do navegador deve determinar onde o elemento termina por si próprio. Diferentes navegadores podem lidar com isto de forma diferente, potencialmente envolvendo mais conteúdo dentro do  do que o pretendido.

Isto é problemático por várias razões:

Estilização inesperada: Se o  tem CSS aplicado a si (via uma class, id, ou style inline), os estilos podem estender-se para elementos irmãos ou subsequentes que nunca foram destinados a ser afetados.
Estrutura de documento quebrada: Um  não fechado dentro de um elemento  pode fazer com que o parser feche e reabra implicitamente elementos de formas inesperadas, distorcendo a árvore DOM.
Preocupações de acessibilidade: Leitores de ecrã e tecnologias assistivas dependem de um DOM bem formado. Um elemento não fechado pode fazer com que o conteúdo seja agrupado ou anunciado incorretamente.
Dificuldade de manutenção: Elementos não fechados tornam o markup mais difícil de ler, depurar e manter ao longo do tempo.

Um cenário comum é esquecer-se da tag de fecho quando o  envolve apenas parte do texto de um parágrafo. Outra causa frequente é aninhamento mal correspondido ou desordenado, onde as tags de fecho aparecem na sequência errada.

Exemplos

`` não fechado dentro de um parágrafo

O  de fecho está completamente em falta, então o navegador tem que adivinhar onde o span termina:

<!-- ❌ Mau: <span> não fechado -->

<p><span class="highlight">Estou-me a esquecer de algo</p>
<p>A vida continua</p>

Adicione o  em falta antes do conteúdo que não deve ser envolvido:

<!-- ✅ Bom: <span> está adequadamente fechado -->

<p><span class="highlight">Estou-me a esquecer de algo</span></p>
<p>A vida continua</p>

Tags de fecho incorretamente aninhadas

Por vezes as tags de fecho estão presentes mas na ordem errada. As tags devem ser fechadas na ordem inversa em que foram abertas:

<!-- ❌ Mau: tags de fecho estão desordenadas -->

<p><em><span class="note">Texto importante</em></span></p>

<!-- ✅ Bom: tags fechadas na ordem correta (inversa) -->

<p><em><span class="note">Texto importante</span></em></p>

Múltiplos elementos `` com um fecho em falta

Ao usar vários elementos  em sequência, é fácil perder o rasto:

<!-- ❌ Mau: segundo <span> nunca é fechado -->

<p>
  <span class="first-name">Maria</span>
  <span class="last-name">Silva
</p>

<!-- ✅ Bom: todos os elementos <span> são fechados -->

<p>
  <span class="first-name">Maria</span>
  <span class="last-name">Silva</span>
</p>

Dicas para evitar elementos não fechados

Indente consistentemente. A indentação adequada torna muito mais fácil identificar uma tag de fecho em falta.
Escreva ambas as tags de uma vez. Quando você digita , digite imediatamente  e depois preencha o conteúdo entre elas.
Use um editor com fecho automático e correspondência de parênteses. A maioria dos editores de código modernos irá destacar tags não correspondidas.
Valide regularmente. Execute o seu markup através do W3C HTML Validator frequentemente, especialmente após edições maiores.