Validación HTML: Valor incorrecto "" para el atributo "id" en el elemento X: Un ID no debe ser una cadena vacía.

Acerca de este problema HTML

El validador reporta “Valor incorrecto “” para el atributo id en el elemento X: Un ID no debe ser una cadena vacía” cuando cualquier elemento incluye un atributo id vacío. Según el estándar HTML, id es un atributo global usado como identificador único en todo el documento. Un identificador vacío no es un valor válido y es ignorado por algunas características, causando problemas difíciles de depurar.

Esto importa para la accesibilidad y la interoperabilidad. Las características que dependen de IDs—navegación por fragmentos (#target), <label for>, atributos ARIA como aria-labelledby/aria-controls, y APIs del DOM como document.getElementById()—requieren un valor no vacío y único. Los IDs vacíos rompen estos enlaces, pueden degradar la salida de tecnologías de asistencia y violan la conformidad, lo que puede ocultar errores entre navegadores.

Cómo solucionarlo:

Si el elemento no necesita un identificador, elimina el atributo id completamente.
Si necesita uno, proporciona un valor no vacío y único, ej., id="main-content".
Asegura la unicidad en toda la página; cada id debe aparecer solo una vez.
Usa tokens simples y predecibles: evita espacios, prefiere letras minúsculas, dígitos, guiones y guiones bajos (ej., feature-1). Aunque la especificación permite un amplio rango de caracteres, mantente con caracteres amigables para URLs y selectores para evitar problemas.

Ejemplos

Ejemplo que desencadena el error del validador (id vacío)

<div id=""></div>

Correcto: eliminar un id vacío innecesario

<div></div>

Correcto: proporcionar un id único y significativo

<section id="features"></section>

Asociación problemática de etiqueta con id vacío (inválido)

<label for="">Email</label>
<input type="email" id="">

Asociación correcta entre etiqueta y control

<label for="email">Email</label>
<input type="email" id="email">

Relación ARIA correcta

<h2 id="pricing-heading">Pricing</h2>
<section aria-labelledby="pricing-heading">
  <p>Choose a plan.</p>
</section>

Objetivo correcto de navegación por fragmentos

<nav>
  <a href="#contact">Contact</a>
</nav>
<section id="contact">
  <h2>Contact us</h2>
</section>

Documento completo mínimo (validado) demostrando ids apropiados

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Valid IDs Example</title>
  </head>
  <body>
    <main id="main-content">
      <h1 id="page-title">Welcome</h1>
      <p>Jump to the <a href="#details">details</a>.</p>
      <section id="details">
        <h2>Details</h2>
      </section>
      <form>
        <label for="email">Email</label>
        <input id="email" type="email">
      </form>
    </main>
  </body>
</html>