Validación HTML: El elemento "textarea" no debe aparecer como descendiente del elemento "a".

Acerca de este problema HTML

El elemento <a> se clasifica como contenido interactivo, y la especificación HTML establece explícitamente que el contenido interactivo no debe anidarse dentro de otro contenido interactivo. Un <textarea> es un control de formulario que acepta entrada del usuario: hacer clic, enfocar, escribir y seleccionar texto dentro de él. Cuando está envuelto en un enlace, el navegador se enfrenta a un conflicto: ¿debería un clic enfocar el textarea o seguir el enlace? Diferentes navegadores pueden resolver esto de manera diferente, lo que lleva a un comportamiento inconsistente.

Más allá de la inconsistencia del navegador, este anidamiento crea serios problemas de accesibilidad. Los lectores de pantalla y otras tecnologías de asistencia dependen de una estructura de documento clara y predecible. Cuando un control de formulario está enterrado dentro de un enlace, los roles y modelos de interacción se superponen, haciendo que sea confuso o incluso imposible para los usuarios que dependen de la navegación por teclado o lectores de pantalla interactuar correctamente con cualquiera de los elementos.

La solución depende de lo que estés tratando de lograr. Si el <textarea> y el enlace son lógicamente separados, simplemente muévelos para que sean hermanos en lugar de anidar uno dentro del otro. Si necesitas que aparezcan visualmente agrupados, usa un <div> contenedor u otro elemento contenedor no interactivo en su lugar.

Ejemplos

❌ Inválido: `<textarea>` dentro de un elemento `<a>`

<a href="/comments">
  <textarea name="comment" rows="4" cols="40"></textarea>
</a>

Esto desencadena el error de validación porque el <textarea> es un descendiente del elemento <a>.

✅ Válido: `<textarea>` y `<a>` como hermanos

<div>
  <textarea name="comment" rows="4" cols="40"></textarea>
  <a href="/comments">Ver todos los comentarios</a>
</div>

Aquí, ambos elementos viven uno al lado del otro dentro de un <div> neutral, evitando cualquier conflicto de anidamiento.

✅ Válido: `<textarea>` dentro de un `<form>` con un enlace separado

<form action="/submit-comment" method="post">
  <label for="comment">Tu comentario:</label>
  <textarea id="comment" name="comment" rows="4" cols="40"></textarea>
  <button type="submit">Enviar</button>
</form>
<a href="/comments">Ver todos los comentarios</a>

Este es el enfoque semánticamente más correcto cuando el textarea es parte de un formulario: mantén los controles de formulario en un <form> y coloca cualquier enlace de navegación fuera de él.

Otros elementos interactivos a tener en cuenta

La misma regla se aplica a otro contenido interactivo dentro de elementos <a>. Tampoco puedes anidar <button>, <input>, <select>, <details>, u otro <a> dentro de un enlace. Si el validador reporta un error similar para cualquiera de estos elementos, la solución sigue el mismo principio: mueve el elemento interactivo fuera del ancla.