Skip to main content
Validación HTML

Valor incorrecto “” para el atributo “id” en el elemento “select”: Un ID no debe ser una cadena vacía.

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 id vací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 id para asociar elementos <label> con controles de formulario. Un id vací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. Un id vací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 id vacío lleva a un comportamiento indefinido. Diferentes navegadores pueden manejarlo de manera inconsistente.

Cómo solucionarlo

  1. Asigna un valor significativo: Dale al id un valor descriptivo y único que identifique el propósito del elemento (por ejemplo, id="country-select").
  2. Elimina el atributo: Si no necesitas el id, simplemente elimínalo del elemento por completo.
  3. 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 id vá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.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.