Validación HTML: Valor incorrecto para el atributo "href" en el elemento "a": carácter ilegal en el fragmento: no se permite espacio.

Acerca de este problema HTML

Un identificador de fragmento de URL es la parte de una URL que sigue al carácter #. Típicamente apunta a un elemento en la página que tiene un atributo id coincidente. Según la especificación de URL, ciertos caracteres —incluyendo espacios— no están permitidos para aparecer literalmente en una URL. Cuando el validador HTML de W3C encuentra un espacio sin procesar en un fragmento, lo reporta como un carácter ilegal.

Este problema importa por varias razones. Los navegadores pueden manejar espacios sin escapar en fragmentos de manera inconsistente, llevando a navegación dentro de la página rota. Los lectores de pantalla y otras tecnologías de asistencia dependen de URLs bien formadas para navegar a los usuarios a la sección correcta de una página. Además, los espacios en atributos id son en sí mismos inválidos en HTML —el atributo id no debe contener ningún carácter de espacio en blanco ASCII. Así que la causa raíz a menudo involucra dos violaciones separadas: un id inválido y una URL de fragmento inválida.

El mejor enfoque es usar guiones (-) o guiones bajos (_) en lugar de espacios en tus valores id, luego hacer coincidir el fragmento en consecuencia. Esto produce URLs limpias, legibles y compartibles (por ejemplo, page.html#contact-info en lugar de page.html#contact%20info). Si estás trabajando con un CMS o herramienta de construcción que auto-genera valores id con espacios, configúrala para producir identificadores separados por guiones en minúsculas en su lugar.

Si absolutamente no puedes cambiar los valores id (por ejemplo, son generados por un sistema de terceros), puedes codificar los espacios en porcentaje como %20 en el href. Esto satisface las reglas de sintaxis de URL, pero nota que un id que contiene espacios sigue siendo HTML inválido por sí solo. Arreglar el id es siempre la solución preferida.

Ejemplos

Inválido: espacio en fragmento e `id`

Esto activa el error del validador porque href="#My Section" contiene un espacio sin escapar. El id="My Section" también es HTML inválido ya que los valores id no pueden contener espacios.

<a href="#My Section">Go to section</a>

<h2 id="My Section">My Section</h2>

Corregido: fragmento e `id` separados por guiones

Reemplaza espacios con guiones tanto en el id como en el fragmento. Este es el enfoque más limpio y más ampliamente recomendado.

<a href="#my-section">Go to section</a>

<h2 id="my-section">My Section</h2>

Corregido: fragmento e `id` separados por guiones bajos

Los guiones bajos funcionan igual de bien si prefieres esa convención.

<a href="#my_section">Go to section</a>

<h2 id="my_section">My Section</h2>

Alternativa: codificación en porcentaje del espacio

Codificar el espacio como %20 resuelve el error de URL de fragmento, pero el id con un espacio sigue siendo HTML inválido. Usa esto solo como último recurso cuando no puedas controlar los valores id.

<a href="#My%20Section">Go to section</a>

<!-- Nota: este id sigue siendo HTML inválido debido al espacio -->

<h2 id="My Section">My Section</h2>

Documento válido completo

Un ejemplo completo que demuestra múltiples enlaces dentro de la página con fragmentos e identificadores id formateados correctamente:

<!doctype html>
<html lang="en">
  <head>
    <title>Page sections</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#getting-started">Getting Started</a></li>
        <li><a href="#advanced-usage">Advanced Usage</a></li>
        <li><a href="#frequently-asked-questions">FAQ</a></li>
      </ul>
    </nav>

    <h2 id="getting-started">Getting Started</h2>
    <p>Introduction content here.</p>

    <h2 id="advanced-usage">Advanced Usage</h2>
    <p>Advanced content here.</p>

    <h2 id="frequently-asked-questions">Frequently Asked Questions</h2>
    <p>FAQ content here.</p>
  </body>
</html>