Acerca de este problema HTML
En una URL, el carácter # tiene un papel especial: actúa como el delimitador que separa la URL principal del identificador de fragmento. El fragmento típicamente apunta a una sección o elemento específico dentro del documento de destino, a menudo correspondiendo al atributo id de un elemento. Porque # cumple este propósito reservado, no puede aparecer más de una vez en su forma sin procesar dentro de una URL. Cuando el validador encuentra algo como ##pricing o section#one#two, marca los caracteres # adicionales como ilegales.
Este problema usualmente surge de uno de estos escenarios comunes:
-
Errores tipográficos — escribir accidentalmente
##en lugar de#. -
Errores de concatenación de cadenas — construir URLs programáticamente donde un
#se incluye tanto en la URL base como antepuesto al valor del fragmento. -
Errores de copiar y pegar — duplicar el
#al copiar URLs de las barras de direcciones del navegador u otras fuentes. -
#literal previsto en el fragmento — si genuinamente necesitas un símbolo#dentro del texto del fragmento, debe estar codificado en porcentaje como%23.
Esto importa porque los navegadores pueden manejar URLs mal formadas de manera inconsistente. Algunos navegadores silenciosamente eliminan el # adicional, mientras otros pueden fallar en navegar al fragmento previsto. Las URLs mal formadas también causan problemas para tecnologías asistivas, rastreadores web, y cualquier herramienta que analice enlaces. Mantener tus URLs bien formadas asegura un comportamiento predecible en todos los agentes de usuario y cumple con el Estándar de URL y la especificación HTML.
Ejemplos
Incorrecto: # duplicado en la URL
El ## doble hace que el identificador de fragmento sea inválido:
<a href="https://example.com/faqs##pricing">Pricing</a>
Correcto: delimitador # único
Elimina el # adicional para que pricing sea el fragmento:
<a href="https://example.com/faqs#pricing">Pricing</a>
Incorrecto: # adicional dentro del fragmento
Aquí, la porción del fragmento overview#details contiene un # sin procesar, lo cual no está permitido:
<a href="/docs#overview#details">Details</a>
Correcto: codifica en porcentaje el # literal
Si verdaderamente necesitas un # como parte del texto del fragmento, codifícalo como %23:
<a href="/docs#overview%23details">Details</a>
Sin embargo, en la mayoría de los casos, este patrón sugiere que la estructura de la URL debería repensarse. Un enfoque más limpio es enlazar directamente al fragmento previsto:
<a href="/docs#details">Details</a>
Incorrecto: error de concatenación programática
Un error común en plantillas o JavaScript es anteponer # cuando la variable ya lo incluye:
<!-- Si se define como fragment = "#pricing", esto produce un ## doble -->
<a href="https://example.com/faqs#pricing">Pricing</a>
Correcto: asegúrate de que solo un # esté presente
Asegúrate de que o la URL base o la variable del fragmento incluya el #, pero no ambos:
<a href="https://example.com/faqs#pricing">Pricing</a>
Enlaces solo de fragmento
Los enlaces solo de fragmento (enlaces a secciones dentro de la misma página) siguen la misma regla — solo un #:
<!-- Incorrecto -->
<a href="##contact">Contact Us</a>
<!-- Correcto -->
<a href="#contact">Contact Us</a>
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: