Validación HTML: Un ID no debe contener espacios en blanco

Acerca de este problema HTML

El atributo id identifica de manera única un elemento dentro de un documento, haciéndolo esencial para enlaces de fragmento, targeting de JavaScript, estilos CSS y asociaciones de etiquetas. Según la especificación HTML, un valor id debe contener al menos un carácter y no debe contener ningún espacio en blanco ASCII. Esto significa que los espacios, tabuladores, saltos de línea, retornos de carro y saltos de página están prohibidos.

Un error común es incluir accidentalmente un espacio en un valor id, lo que efectivamente hace que parezca múltiples valores — similar a como funciona el atributo class. Sin embargo, a diferencia de class, el atributo id no admite valores separados por espacios. Cuando un navegador encuentra un id con un espacio, el comportamiento se vuelve impredecible: algunos navegadores pueden tratar solo la primera palabra como el ID, mientras que los selectores CSS y JavaScript pueden fallar completamente.

Por qué esto importa

Enlaces de fragmento rotos: Un enlace como <a href="#my section"> no hará scroll correctamente a un elemento con id="my section" en todos los navegadores.
Fallos de JavaScript: document.getElementById("my section") puede no devolver el elemento esperado, y document.querySelector("#my section") arrojará un error de sintaxis porque los espacios no son válidos en selectores CSS de ID sin escapar.
Problemas de CSS: Un selector como #my section apunta a un elemento con id="my" que tiene un elemento <section> descendiente — no lo que pretendías.
Accesibilidad: Los lectores de pantalla y tecnologías asistivas dependen de los atributos id para asociaciones de etiquetas (ej., <label for="...">). Un id roto puede romper la accesibilidad del formulario.

Mejores prácticas para valores `id`

Aunque la especificación HTML técnicamente permite cualquier carácter sin espacios en blanco en un id, es mejor práctica limitarse a letras ASCII, dígitos, guiones (-) y guiones bajos (_). Comenzar el valor con una letra también asegura la máxima compatibilidad con selectores CSS sin necesidad de escapar.

Ejemplos

❌ Inválido: `id` contiene un espacio

<div id="main content">
  <p>Welcome to the page.</p>
</div>

El espacio entre main y content hace que este id sea inválido.

✅ Corregido: Reemplaza el espacio con un guión

<div id="main-content">
  <p>Welcome to the page.</p>
</div>

✅ Corregido: Reemplaza el espacio con un guión bajo

<div id="main_content">
  <p>Welcome to the page.</p>
</div>

✅ Corregido: Usa camelCase

<div id="mainContent">
  <p>Welcome to the page.</p>
</div>

❌ Inválido: `id` con espacio rompe la asociación de etiquetas

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

El atributo for no se asociará correctamente con el input, rompiendo la accesibilidad.

✅ Corregido: Elimina los espacios en blanco tanto de `for` como de `id`

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

❌ Inválido: Espacios en blanco al final o al principio

Los espacios en blanco no siempre son obvios. Un espacio al final o un error de copiar-pegar puede introducir espacios en blanco invisibles:

<section id="about ">
  <h2>About Us</h2>
</section>

✅ Corregido: Recorta todos los espacios en blanco

<section id="about">
  <h2>About Us</h2>
</section>

Si estás generando valores id dinámicamente (ej., desde un CMS o base de datos), asegúrate de recortar y sanear los valores eliminando espacios en blanco y reemplazando espacios con guiones o guiones bajos antes de renderizarlos en HTML.