Validación HTML: Valor incorrecto X para el atributo "src" en el elemento "img": Barra invertida ("\") usada como delimitador de segmento de ruta.

Acerca de este problema HTML

Las barras invertidas no son delimitadores válidos en las URLs según el URL Living Standard. Aunque algunos navegadores pueden normalizar silenciosamente las barras invertidas a barras inclinadas, este comportamiento no es estándar y no deberías depender de él. Usar barras invertidas en URLs puede llevar a imágenes rotas, comportamientos inesperados en diferentes navegadores, y fallos en entornos que siguen estrictamente las especificaciones de URL (como servidores HTTP, CDNs, o herramientas de validación).

Este problema surge comúnmente cuando los desarrolladores copian rutas de archivos directamente desde un sistema de archivos de Windows — donde \ es el separador de directorio — y las pegan en atributos src de HTML. También puede ocurrir cuando el código del lado del servidor genera URLs usando funciones de ruta a nivel de SO en lugar de utilidades de construcción de URL.

Más allá del cumplimiento de estándares, esto importa por varias razones prácticas:

Fiabilidad entre navegadores: No todos los navegadores o clientes HTTP normalizan las barras invertidas de la misma manera.
Compatibilidad del servidor: Muchos servidores web interpretan las barras invertidas literalmente, resultando en errores 404.
Portabilidad: El código con rutas de barras invertidas puede funcionar en desarrollo local en Windows pero romperse cuando se despliega en un servidor basado en Linux.

Para arreglar el problema, localiza cada barra invertida en el valor del atributo src y reemplázala con una barra inclinada. Esto se aplica a todos los contextos de URL, no solo a elementos img — aunque el validador lo señala específicamente aquí.

Ejemplos

❌ Incorrecto: barras invertidas en la ruta `src`

<img src="images\photos\landscape.jpg" alt="Mountain landscape">

<img src="https://example.com\img\small\photo.png" alt="Example image">

Ambos usan barras invertidas como delimitadores de ruta, lo cual dispara el error de validación.

✅ Correcto: barras inclinadas en la ruta `src`

<img src="images/photos/landscape.jpg" alt="Mountain landscape">

<img src="https://example.com/img/small/photo.png" alt="Example image">

Simplemente reemplazar \ con / resuelve el problema y produce una URL válida y portable.

❌ Incorrecto: delimitadores mixtos

<img src="assets/images\banner\hero.webp" alt="Hero banner">

Incluso una sola barra invertida en una ruta que de otro modo es válida disparará este error.

✅ Correcto: barras inclinadas consistentes

<img src="assets/images/banner/hero.webp" alt="Hero banner">

Consejos para evitar este problema

No copies y pegues rutas de archivos de Windows directamente en HTML. Siempre convierte las barras invertidas a barras inclinadas.
Usa la función buscar y reemplazar de tu editor para buscar \ dentro de atributos src en todo tu proyecto.
Si generas URLs en código del lado del servidor, usa funciones de construcción de URL en lugar de funciones de ruta del sistema de archivos. Por ejemplo, en Node.js, usa el módulo url o template literals con / en lugar de path.join(), que usa \ en Windows.
Ejecuta el validador de W3C regularmente durante el desarrollo para detectar problemas como este antes del despliegue.