Acerca de este problema HTML
Los elementos HTML siguen reglas estrictas de anidamiento definidas por el WHATWG HTML Living Standard. Cada elemento tiene un modelo de contenido — una descripción de qué contenido (texto, elementos, o ambos) puede contener. Cuando colocas un elemento donde no está permitido, el navegador debe adivinar tu intención y puede reestructurar el DOM de maneras inesperadas. Esto puede llevar a renderizado inconsistente entre navegadores, diseños rotos y problemas de accesibilidad para lectores de pantalla y otras tecnologías de asistencia.
La parte “(Suprimiendo errores adicionales de este subárbol.)” del mensaje significa que el validador ha dejado de verificar cualquier cosa anidada dentro del elemento problemático. Esto es importante — significa que podría haber errores adicionales ocultos debajo de este. Solucionar este problema de anidamiento puede revelar más problemas que necesitan atención.
Aquí tienes algunos de los casos más comunes que provocan este error:
-
Elementos de bloque dentro de elementos en línea: Colocar un
<div>dentro de un<span>o un<a>que no permite contenido de flujo en ese contexto. -
Hijos de lista inválidos: Poner
<div>,<p>, u otros elementos directamente dentro de<ul>o<ol>, que solo permiten<li>(y<script>/<template>) como hijos directos. -
Estructura de tabla inválida: Colocar
<td>directamente dentro de<table>sin envolverlo en<tr>, o poner elementos que no son de tabla donde solo se esperan<thead>,<tbody>,<tfoot>, o<tr>. -
Encabezados o párrafos dentro de
<p>: El elemento<p>solo acepta contenido de fraseo, por lo que anidar un<h2>u otro<p>dentro es inválido. -
Elementos interactivos dentro de elementos interactivos: Anidar un
<button>dentro de un<a>, o un<a>dentro de un<button>.
Para solucionar el problema, consulta la documentación de MDN para el elemento padre y revisa su sección Permitted content. Luego mueve el elemento hijo a una ubicación válida, envuélvelo en un elemento intermediario apropiado, o reemplaza el padre o el hijo con un elemento más adecuado.
Ejemplos
Hijos de lista inválidos
Un <ul> solo permite elementos <li> como hijos directos.
❌ Incorrecto:
<ul>
<div>
<li>Item one</li>
<li>Item two</li>
</div>
</ul>✅ Correcto:
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>Elemento de bloque dentro de un párrafo
El elemento <p> solo acepta contenido de fraseo. Un <div> es contenido de flujo y no puede anidarse dentro.
❌ Incorrecto:
<p>
Here is some text.
<div class="highlight">This is highlighted.</div>
</p>✅ Correcto:
<p>Here is some text.</p>
<div class="highlight">This is highlighted.</div>
O usa un <span> si quieres estilo en línea dentro del párrafo:
<p>
Here is some text.
<span class="highlight">This is highlighted.</span>
</p>Estructura de tabla inválida
Las celdas de tabla (<td>) deben estar dentro de un <tr>, que a su vez debe estar dentro de <thead>, <tbody>, <tfoot>, o directamente dentro de <table>.
❌ Incorrecto:
<table>
<td>Name</td>
<td>Age</td>
</table>✅ Correcto:
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
</table>Elementos interactivos anidados dentro de elementos interactivos
Un <button> no puede colocarse dentro de un elemento <a>, y viceversa, porque el contenido interactivo no puede anidarse dentro de otro contenido interactivo.
❌ Incorrecto:
<a href="/dashboard">
<button>Go to Dashboard</button>
</a>✅ Correcto (elige uno u otro):
<a href="/dashboard">Go to Dashboard</a>O estiliza un enlace para que parezca un botón usando CSS:
<a href="/dashboard" class="button">Go to Dashboard</a>
Elementos envolventes dentro de <select>
El elemento <select> solo permite elementos <option>, <optgroup>, y elementos de scripting como hijos.
❌ Incorrecto:
<select>
<div>
<option>Apple</option>
<option>Banana</option>
</div>
</select>✅ Correcto:
<select>
<optgroup label="Fruits">
<option>Apple</option>
<option>Banana</option>
</optgroup>
</select>Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.