Validación HTML: Elemento "span" sin cerrar.

Acerca de este problema HTML

El elemento  es un contenedor en línea utilizado para marcar una porción de texto o un grupo de elementos en línea, típicamente para propósitos de estilado o scripting. Como la mayoría de elementos HTML, requiere tanto una etiqueta de apertura  como una etiqueta de cierre . Cuando falta la etiqueta de cierre, el analizador HTML del navegador debe determinar por sí mismo dónde termina el elemento. Diferentes navegadores pueden manejar esto de manera diferente, potencialmente envolviendo más contenido dentro del  del que se pretendía.

Esto es problemático por varias razones:

Estilos inesperados: Si el  tiene CSS aplicado (mediante una class, id, o style en línea), los estilos pueden extenderse a elementos hermanos o posteriores que nunca se pretendió que fueran afectados.
Estructura de documento rota: Un  sin cerrar dentro de un elemento  puede hacer que el analizador cierre y reabra elementos implícitamente de maneras inesperadas, distorsionando el árbol DOM.
Problemas de accesibilidad: Los lectores de pantalla y tecnologías asistivas dependen de un DOM bien formado. Un elemento sin cerrar puede hacer que el contenido se agrupe o se anuncie incorrectamente.
Dificultad de mantenimiento: Los elementos sin cerrar hacen que el marcado sea más difícil de leer, depurar y mantener con el tiempo.

Un escenario común es olvidar la etiqueta de cierre cuando el  envuelve solo parte del texto de un párrafo. Otra causa frecuente es el anidado mal emparejado o desordenado, donde las etiquetas de cierre aparecen en la secuencia incorrecta.

Ejemplos

`` sin cerrar dentro de un párrafo

El  de cierre falta completamente, por lo que el navegador tiene que adivinar dónde termina el span:

<!-- ❌ Malo: <span> sin cerrar -->

<p><span class="highlight">Se me olvida algo</p>
<p>La vida continúa</p>

Agrega el  faltante antes del contenido que no debería estar envuelto:

<!-- ✅ Bueno: <span> está correctamente cerrado -->

<p><span class="highlight">Se me olvida algo</span></p>
<p>La vida continúa</p>

Etiquetas de cierre anidadas incorrectamente

A veces las etiquetas de cierre están presentes pero en el orden incorrecto. Las etiquetas deben cerrarse en el orden inverso al que fueron abiertas:

<!-- ❌ Malo: etiquetas de cierre están desordenadas -->

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

<!-- ✅ Bueno: etiquetas cerradas en orden correcto (inverso) -->

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

Múltiples elementos `` con un cierre faltante

Cuando usas varios elementos  en secuencia, es fácil perder la cuenta:

<!-- ❌ Malo: el segundo <span> nunca se cierra -->

<p>
  <span class="first-name">Jane</span>
  <span class="last-name">Doe
</p>

<!-- ✅ Bueno: todos los elementos <span> están cerrados -->

<p>
  <span class="first-name">Jane</span>
  <span class="last-name">Doe</span>
</p>

Consejos para evitar elementos sin cerrar

Indenta consistentemente. La indentación adecuada hace mucho más fácil detectar una etiqueta de cierre faltante.
Escribe ambas etiquetas a la vez. Cuando escribas , inmediatamente escribe  y luego rellena el contenido entre ellas.
Usa un editor con auto-cierre y coincidencia de corchetes. La mayoría de editores de código modernos resaltarán etiquetas sin emparejar.
Valida regularmente. Ejecuta tu marcado a través del Validador HTML de W3C frecuentemente, especialmente después de ediciones importantes.