Error Etiquetas HTML sin cerrar o mal emparejadas
Por qué las etiquetas sin cerrar y cerradas fuera de orden rompen el análisis de HTML, y cómo el algoritmo de recuperación de errores de HTML5 las disimula.
Esto cubre dos problemas relacionados que reporta el validador: una etiqueta de cierre sin apertura correspondiente (orphan-closing-tag), y una etiqueta que se abre pero nunca se cierra explícitamente, o que se cierra en el orden equivocado (unclosed-tag).
Por qué ocurre
Los elementos HTML deben anidarse de forma estricta — lo último que se abre tiene que ser lo primero que se cierra. Un </div> suelto sin su <div> correspondiente, o un <div><span>texto</div></span> donde las etiquetas de cierre están invertidas, rompen ese anidamiento.
Ejemplo
<!-- Incorrecto: etiquetas de cierre en el orden equivocado -->
<div><span>Hola</div></span>
<!-- Correcto -->
<div><span>Hola</span></div>Los elementos vacíos (void) como <img>, <br> e <input> nunca necesitan una etiqueta de cierre — el validador no los marca. Un puñado de elementos (<li>, <p>, <td> y similares) tienen etiquetas de cierre opcionales según las reglas de omisión de etiquetas de la especificación HTML, así que el validador tampoco los marca.
Por qué importa
Los navegadores no rechazan de plano un anidamiento mal formado — la especificación de parseo de HTML5 define un algoritmo de recuperación de errores preciso que decide cómo "arreglar" un markup roto. El resultado es determinista por navegador, pero rara vez es lo que se pretendía, y los consumidores de HTML más antiguos o que no son navegadores (lectores de feeds, scrapers, algunas herramientas de plantillas) no implementan las mismas reglas de recuperación y pueden producir un resultado completamente distinto.
Frequently asked questions
¿Un anidamiento de etiquetas inválido rompe mi página visualmente?
Generalmente no de inmediato — los navegadores aplican el algoritmo de recuperación de errores de HTML5 y renderizan algo. Pero la estructura del DOM resultante puede diferir de lo que se escribió, lo cual aparece después como CSS que apunta al elemento equivocado o JavaScript que consulta el nodo equivocado.
¿Es necesario cerrar todas las etiquetas?
No. Los elementos vacíos (img, br, hr, input, meta, link y algunos otros) nunca se cierran. Un puñado de elementos como li, p y td tienen etiquetas de cierre opcionales según la especificación HTML — el parser infiere dónde terminan.