Acerca de este problema HTML
Este error no se trata de que tu sintaxis HTML sea inválida — se trata de una referencia rota. El Validador del W3C sigue las URLs que encuentra en tu marcado (o una URL que envías directamente para validación) y verifica si el servidor puede realmente entregar el recurso. Cuando el servidor remoto devuelve una respuesta HTTP 404 (Not Found), el validador marca el problema porque el recurso referenciado está faltante o es inalcanzable.
Hay varias causas comunes para este error:
- Errores tipográficos en la URL — Un nombre de archivo, ruta o nombre de dominio mal escrito.
- Recursos movidos o eliminados — El archivo existía en algún momento pero ha sido removido o reubicado desde entonces.
-
Sensibilidad a mayúsculas y minúsculas — Muchos servidores web tratan
Image.pngeimage.pngcomo archivos diferentes. Una discrepancia en las mayúsculas y minúsculas puede producir un 404. - Rutas relativas incorrectas — Una URL relativa que se resuelve de manera diferente a la esperada según la ubicación del documento.
- Recursos externos ya no disponibles — CDNs de terceros o archivos alojados que han sido dados de baja.
Esto importa porque las referencias rotas degradan la experiencia del usuario. Las hojas de estilos faltantes pueden dejar una página sin estilo, los scripts faltantes pueden romper la funcionalidad y las imágenes faltantes muestran iconos de imagen rota. Los motores de búsqueda también penalizan las páginas con excesivos enlaces rotos, y los lectores de pantalla pueden anunciar contenido confuso o poco útil cuando los recursos fallan al cargar.
Cómo solucionarlo
- Revisa la URL cuidadosamente. Copia la URL completa de tu HTML, pégala en un navegador y ve si carga. Si devuelve una página 404, la URL está incorrecta.
- Verifica que el archivo existe en el servidor. Si controlas el servidor, confirma que el archivo está en el directorio esperado con el nombre exacto del archivo y la extensión.
- Corrige problemas de sensibilidad a mayúsculas y minúsculas. Asegúrate de que las mayúsculas en tu URL coincidan con el nombre real del archivo en el servidor.
-
Actualiza recursos movidos. Si un archivo fue reubicado, actualiza el atributo
hrefosrcpara que apunte a la nueva ubicación. - Reemplaza recursos externos no disponibles. Si un recurso de terceros ya no está disponible, encuentra una fuente alternativa, aloja una copia tú mismo, o elimina la referencia.
Ejemplos
Referencia de imagen rota (activa el error)
<img src="https://example.com/images/photo.jpeg" alt="A scenic landscape">
Si photo.jpeg no existe en esa ruta (quizás el archivo real se llama photo.jpg), el validador reportará un error 404.
Referencia de imagen corregida
<img src="https://example.com/images/photo.jpg" alt="A scenic landscape">Referencia de hoja de estilos rota (activa el error)
<link rel="stylesheet" href="/css/Styles.css">
Si el archivo en el servidor realmente se llama styles.css (en minúsculas), un servidor sensible a mayúsculas devolverá un 404.
Referencia de hoja de estilos corregida
<link rel="stylesheet" href="/css/styles.css">Referencia de script rota con ruta incorrecta (activa el error)
<script src="/assets/js/old-directory/app.js"></script>Si el script fue movido a un directorio diferente, esta ruta ya no se resuelve.
Referencia de script corregida
<script src="/assets/js/app.js"></script>Usando una ruta relativa incorrectamente (activa el error)
Si tu archivo HTML está en /pages/about.html y referencias una imagen así:
<img src="images/logo.png" alt="Company logo">
El navegador buscará /pages/images/logo.png. Si la imagen realmente está en /images/logo.png, esto fallará.
Corregido con una ruta relativa a la raíz
<img src="/images/logo.png" alt="Company logo">
La / inicial asegura que la ruta se resuelva desde la raíz del sitio, independientemente de dónde esté ubicado el documento HTML.
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: