Validación HTML: Valor incorrecto X para el atributo "href" en el elemento "a": Carácter ilegal en el fragmento: no se permiten espacios.

Acerca de este problema HTML

La porción de fragmento de una URL (todo después del símbolo #) sigue las mismas reglas de codificación que el resto de la URL — no se permiten caracteres de espacio literales. Cuando un navegador encuentra un espacio en un fragmento de URL, puede tratar de corregirlo automáticamente, pero este comportamiento no está garantizado en todos los navegadores y contextos. Depender de la corrección automática del navegador lleva a enlaces frágiles que pueden romperse de forma impredecible.

Este problema importa por varias razones. Primero, produce HTML inválido que falla la validación W3C. Segundo, la navegación por fragmentos (saltar a una sección específica de una página) puede no funcionar correctamente si el navegador no corrige automáticamente el espacio. Tercero, las tecnologías de asistencia como los lectores de pantalla dependen de URLs bien formadas para anunciar los destinos de los enlaces con precisión. Finalmente, las herramientas que analizan o procesan HTML programáticamente — como crawlers, verificadores de enlaces y sistemas de gestión de contenido — pueden malinterpretar o rechazar URLs malformadas.

El escenario más común para este error es enlazar a un atributo id en la misma página u otra página donde el id contiene espacios. Sin embargo, vale la pena señalar que los valores id en sí mismos no pueden contener espacios en HTML válido (un espacio en un id lo convertiría en múltiples tokens inválidos). Así que si estás escribiendo tanto el enlace como el destino, la mejor solución a menudo es corregir el id en sí usando guiones o guiones bajos en lugar de espacios.

Cómo solucionarlo

Hay dos enfoques principales:

Codificar los espacios por porcentaje — Reemplazar cada espacio con %20 en el valor href.
Usar identificadores sin espacios — Cambiar el id de destino para usar guiones o camelCase, luego actualizar el fragmento para que coincida.

El segundo enfoque es muy recomendado porque soluciona el problema raíz y produce marcado más limpio y legible.

Ejemplos

❌ Inválido: Espacio en el fragmento

<a href="https://example.com/page#some term">Ir a la sección</a>

<a href="#my section">Saltar a Mi Sección</a>

✅ Solucionado: Codificar el espacio por porcentaje

Si no puedes controlar el id de destino (por ejemplo, enlazando a una página externa), codifica el espacio por porcentaje:

<a href="https://example.com/page#some%20term">Ir a la sección</a>

✅ Mejor solución: Usar un `id` con guiones y fragmento coincidente

Cuando controlas tanto el enlace como el destino, usa un id sin espacios:

<h2 id="my-section">Mi Sección</h2>
<p>Algo de contenido aquí.</p>

<a href="#my-section">Saltar a Mi Sección</a>

❌ Inválido: Espacio en fragmento enlazando a otra página

<a href="/docs/getting-started#quick start guide">Guía de Inicio Rápido</a>

✅ Solucionado: `id` con guiones coincidente

<!-- En la página de destino (/docs/getting-started): -->

<h2 id="quick-start-guide">Guía de Inicio Rápido</h2>

<!-- En la página que enlaza: -->

<a href="/docs/getting-started#quick-start-guide">Guía de Inicio Rápido</a>

Una nota sobre las convenciones de nomenclatura de `id`

Dado que los identificadores de fragmento referencian atributos id, adoptar una convención de nomenclatura de id consistente evita este problema completamente. Los patrones comunes incluyen:

<!-- Guiones (más común, usado por muchos generadores de sitios estáticos) -->

<section id="getting-started">

<!-- camelCase -->

<section id="gettingStarted">

<!-- Guiones bajos -->

<section id="getting_started">

Los tres son válidos y nunca activarán un error de validación relacionado con espacios en tus enlaces de fragmento.