Validación HTML: Valor incorrecto "X" para el atributo href en el elemento a: Carácter ilegal en el fragmento: "#" no está permitido.

Acerca de este problema HTML

Una URL puede tener solo un identificador de fragmento: la porción que viene después del símbolo # único. Cuando el navegador encuentra un # en una URL, trata todo lo que viene después como el fragmento. Si aparece un segundo #, se convierte en un carácter ilegal dentro de ese fragmento porque la porción de fragmento de una URL no permite caracteres # sin codificar. Esto viola la especificación de URL (WHATWG) y los requisitos del estándar HTML para URLs válidas en el atributo href.

Esto importa por varias razones:

Cumplimiento de estándares: Los navegadores pueden manejar URLs mal formadas de manera inconsistente, llevando a un comportamiento de navegación impredecible en diferentes entornos.
Accesibilidad: Los lectores de pantalla y las tecnologías de asistencia dependen de URLs bien formadas para anunciar correctamente los destinos de los enlaces y permitir a los usuarios navegar.
SEO e indexación: Los rastreadores de motores de búsqueda pueden fallar al seguir o indexar páginas con URLs inválidas.

El carácter # es perfectamente válido cuando se usa exactamente una vez para introducir un fragmento. Por ejemplo, #pricing o /faqs#pricing están bien. El problema surge cuando aparece un segundo #, como /faqs#guarantee#pricing, o cuando # se usa en una parte de la URL donde no se espera.

Si realmente necesitas un carácter # literal como parte de una ruta o cadena de consulta (no como un delimitador de fragmento), debes codificarlo como %23.

Ejemplos

❌ Inválido: Múltiples caracteres `#` en la URL

Esto desencadena el error del validador porque el fragmento (guarantee#pricing) contiene un # ilegal:

<a href="/faqs#guarantee#pricing">Guarantee and Pricing</a>

✅ Solucionado: Usa un identificador de fragmento único

Enlaza a una sección a la vez con un # único:

<a href="/faqs#guarantee">Guarantee</a>
<a href="/faqs#pricing">Pricing</a>

✅ Solucionado: Codifica el `#` si está destinado como carácter literal

Si el # es parte de la ruta o datos reales (no un delimitador de fragmento), codifícalo como %23:

<a href="/faqs%23guarantee#pricing">Pricing</a>

En este caso, /faqs%23guarantee es la ruta (que contiene un # literal), y pricing es el fragmento.

Usando fragmentos correctamente en una tabla de contenidos

Los fragmentos funcionan bien para la navegación dentro de la página. Cada elemento objetivo necesita un id coincidente:

<nav>
  <ul>
    <li><a href="#pricing">Pricing</a></li>
    <li><a href="#terms">Terms</a></li>
    <li><a href="#guarantee">Guarantee</a></li>
  </ul>
</nav>

<h2 id="pricing">Pricing</h2>
<p>All about pricing...</p>

<h2 id="terms">Terms</h2>
<p>You can find our terms at...</p>

<h2 id="guarantee">Guarantee</h2>
<p>We offer a guarantee...</p>

❌ Inválido: `#` en una cadena de consulta o ruta sin codificar

A veces este error aparece cuando una URL incluye accidentalmente un # sin codificar en el lugar incorrecto:

<a href="/search?color=#ff0000">Red items</a>

✅ Solucionado: Codifica el `#` en el valor de la consulta

<a href="/search?color=%23ff0000">Red items</a>

Aquí, %23ff0000 representa correctamente la cadena literal #ff0000 como un valor de parámetro de consulta, en lugar de ser malinterpretado como el inicio de un fragmento.

Causas comunes

Copiar y pegar URLs de otras fuentes que contienen múltiples caracteres #.
Enlaces generados dinámicamente donde los valores de fragmento no están debidamente saneados.
Códigos de color en URLs como #ff0000 que necesitan ser codificados como %23ff0000.
Errores de concatenación en plantillas donde se añade un # tanto en la URL base como en el fragmento adjuntado.

La solución es siempre la misma: asegúrate de que tu href contenga como máximo un # usado como delimitador de fragmento, y codifica (%23) cualquier # que esté destinado como carácter literal.