Acerca de este problema HTML
El atributo id identifica de forma única un elemento dentro de un documento. Según el estándar HTML vivo de WHATWG, si se especifica el atributo id, su valor debe ser no vacío y no debe contener ningún carácter de espacio en blanco ASCII. El atributo en sí es opcional — no necesitas incluirlo — pero cuando lo haces, debe tener un valor válido. Establecer id="" viola esta regla porque la cadena vacía no es un identificador válido.
Este problema ocurre comúnmente cuando el código se genera dinámicamente (por ejemplo, por un motor de plantillas o framework de JavaScript) y la variable destinada a llenar el valor id se resuelve como una cadena vacía. También puede suceder cuando los desarrolladores añaden el atributo como marcador de posición y olvidan rellenarlo.
Por qué esto importa
-
Cumplimiento de estándares: Un
idvacío viola la especificación HTML, haciendo que tu documento sea inválido. -
Accesibilidad: Las tecnologías de asistencia como los lectores de pantalla dependen de los atributos
idpara asociar elementos<label>con controles de formulario. Unidvacío rompe esta asociación, haciendo que los formularios sean más difíciles de usar para las personas que dependen de estas herramientas. -
JavaScript y CSS: Métodos como
document.getElementById("")y selectores como#(sin identificador) no funcionarán como se espera. Unidvacío puede causar problemas sutiles y difíciles de depurar en tus scripts y estilos. -
Comportamiento del navegador: Aunque los navegadores son generalmente tolerantes, un
idvacío lleva a un comportamiento indefinido. Diferentes navegadores pueden manejarlo de manera inconsistente.
Cómo solucionarlo
-
Asigna un valor significativo: Dale al
idun valor descriptivo y único que identifique el propósito del elemento (por ejemplo,id="country-select"). -
Elimina el atributo: Si no necesitas el
id, simplemente elimínalo del elemento por completo. -
Corrige la generación dinámica: Si un motor de plantillas o framework está produciendo el valor vacío, añade una verificación condicional para generar un
idválido u omitir el atributo por completo.
Ejemplos
❌ Incorrecto: atributo id vacío
<label for="country">Country</label>
<select id="" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
Esto desencadena el error de validación porque id="" es una cadena vacía.
✅ Correcto: valor id significativo
<label for="country">Country</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
El id ahora tiene un valor válido y no vacío, y el atributo for del elemento <label> lo referencia correctamente.
✅ Correcto: atributo id eliminado por completo
<label>
Country
<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
</label>
Si no necesitas el id, elimínalo. Aquí, el <label> envuelve directamente el <select>, así que la asociación for/id no es necesaria — la etiqueta implícita funciona igual de bien.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.