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

Acerca de este problema HTML

La especificación HTML define <label> como un elemento cuyo modelo de contenido permite contenido de fraseo pero excluye explícitamente otros elementos <label>. Cuando anidas un <label> dentro de otro, los navegadores no pueden determinar qué control de formulario está destinado a describir cada etiqueta. Esto rompe el propósito fundamental del elemento <label>—proporcionar una asociación clara, uno a uno entre una descripción de texto y su control de formulario correspondiente.

Este problema importa por varias razones:

Accesibilidad: Los lectores de pantalla dependen del elemento <label> para anunciar el propósito de los controles de formulario. Las etiquetas anidadas crean confusión sobre qué texto de etiqueta pertenece a qué entrada, haciendo que los formularios sean difíciles o imposibles de navegar para usuarios de tecnología asistiva.
Usabilidad: Hacer clic en un <label> debería enfocar o activar su control asociado. Las etiquetas anidadas crean áreas de clic superpuestas con comportamiento impredecible.
Cumplimiento de estándares: El estándar HTML vivo del WHATWG establece explícitamente que los elementos <label> no deben anidarse, y los validadores marcarán esto como un error.

Este error ocurre comúnmente en unas pocas situaciones: duplicar accidentalmente etiquetas de cierre, envolver un grupo de formulario complejo en un <label> cuando un <fieldset> sería más apropiado, o usar un sistema de plantillas que inadvertidamente produce etiquetas anidadas.

Ejemplos

❌ Etiquetas anidadas (inválido)

<label>
  Full Name
  <label>
    First Name
    <input type="text" name="first-name">
  </label>
</label>

❌ Etiqueta de cierre extra causando un problema del analizador

Una etiqueta </label> de cierre perdida puede a veces causar que la recuperación de errores del navegador produzca anidamiento inesperado:

<label>Name</label></label>
<label for="email">Email</label>

Aunque el </label> extra es el problema raíz aquí, algunos analizadores y validadores pueden interpretar esto como un problema de anidamiento. Siempre asegúrate de que tus etiquetas de apertura y cierre estén correctamente emparejadas.

✅ Etiquetas separadas para entradas separadas

<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name">

<label for="last-name">Last Name</label>
<input type="text" id="last-name" name="last-name">

✅ Usando asociación de etiqueta implícita (una etiqueta por entrada)

<label>
  First Name
  <input type="text" name="first-name">
</label>

<label>
  Last Name
  <input type="text" name="last-name">
</label>

✅ Agrupando controles relacionados con `<fieldset>` en lugar de anidar etiquetas

Si necesitas agrupar múltiples entradas etiquetadas bajo un encabezado compartido, usa un <fieldset> con una <legend> en lugar de envolver etiquetas dentro de una etiqueta:

<fieldset>
  <legend>Full Name</legend>
  <label for="first-name">First Name</label>
  <input type="text" id="first-name" name="first-name">
  <label for="last-name">Last Name</label>
  <input type="text" id="last-name" name="last-name">
</fieldset>

Este enfoque proporciona la semántica de agrupación que necesitas mientras mantiene cada <label> correctamente asociado con un solo control de formulario. La <legend> sirve como la descripción a nivel de grupo, y cada <label> describe su entrada individual—dando tanto a usuarios videntes como a usuarios de tecnología asistiva una comprensión clara de la estructura del formulario.