Acerca de este problema HTML
El W3C HTML Validator verifica que las URLs proporcionadas en los atributos href cumplan con la especificación de URL. Los corchetes ([ y ]) son caracteres reservados con usos muy específicos y limitados en las URLs — solo están permitidos en la porción del host de una URL para denotar direcciones IPv6 (por ejemplo, http://[::1]/). Cuando aparecen en otro lugar, como en los datos del esquema, la ruta o la cadena de consulta sin estar codificados por porcentajes, la URL se considera malformada.
Esto comúnmente ocurre en algunos escenarios:
-
Enlaces mailto donde alguien envuelve una dirección de correo electrónico entre corchetes, como
mailto:[user@example.com]. -
Variables de plantilla que no han sido procesadas, dejando sintaxis literal de corchetes (por ejemplo,
{{,[,]) en el HTML renderizado. -
URLs construidas manualmente donde los corchetes se usan por error como parte de la ruta o cadena de consulta en lugar de ser codificados por porcentajes como
%5By%5D.
Usar URLs inválidas puede hacer que los navegadores malinterpreten el destino del enlace, rompan la navegación o causen comportamientos inesperados. Las tecnologías de asistencia como los lectores de pantalla también dependen de URLs bien formadas para comunicar correctamente los destinos de los enlaces a los usuarios. Mantener tus URLs compatibles con los estándares asegura un comportamiento consistente y predecible en todos los navegadores y dispositivos.
Cómo solucionarlo
- Elimina los corchetes innecesarios. Si los corchetes no son parte de los datos reales (por ejemplo, corchetes decorativos alrededor de una dirección de correo electrónico), simplemente elimínalos.
-
Codifica por porcentajes los corchetes cuando son parte de los datos. Si realmente necesitas corchetes en la ruta o cadena de consulta de una URL, codifica
[como%5By]como%5D. - Verifica la salida de tu motor de plantillas. Si usas un sistema de plantillas, inspecciona el HTML final renderizado en un navegador para asegurarte de que la sintaxis de la plantilla haya sido completamente reemplazada con valores válidos.
Ejemplos
Inválido: corchetes en una URL mailto
Los corchetes alrededor de la dirección de correo electrónico no son caracteres válidos de URL en este contexto.
<a href="mailto:[user@example.com]">Escríbenos</a>
Corregido: elimina los corchetes
<a href="mailto:user@example.com">Escríbenos</a>
Inválido: corchetes en una cadena de consulta
<a href="https://example.com/search?filter[status]=active">Buscar</a>
Corregido: codifica por porcentajes los corchetes
<a href="https://example.com/search?filter%5Bstatus%5D=active">Buscar</a>
Inválido: sintaxis de plantilla no procesada en HTML renderizado
Si tu motor de plantillas falla al reemplazar una variable, el HTML final puede contener caracteres de corchete:
<a href="mailto:[% user.email %]">Escríbenos</a>
Corregido: asegúrate de que la plantilla renderice una URL válida
Asegúrate de que la variable de plantilla se resuelva correctamente. La salida renderizada debería verse así:
<a href="mailto:user@example.com">Escríbenos</a>
En el código fuente de tu plantilla, esto podría estar escrito como:
<a href="mailto:{{ user.email }}">Escríbenos</a>
La clave es que el HTML final entregado al navegador debe contener una URL válida y sin corchetes (a menos que los corchetes estén correctamente codificados por porcentajes). Siempre valida tu salida renderizada, no solo el código fuente de tu plantilla, para detectar problemas como este.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.