Valor incorrecto “” para el atributo “href” en el elemento “link”: Debe ser no vacío.

El elemento <link> se utiliza para definir relaciones entre el documento actual y recursos externos — más comúnmente hojas de estilo, iconos y recursos precargados. El atributo href especifica la URL de ese recurso externo, y es el propósito principal del elemento. Un atributo href vacío hace que el elemento <link> no tenga sentido porque no hay ningún recurso que obtener o referenciar.

Por qué esto es un problema

Cumplimiento de estándares: La especificación HTML requiere que el atributo href en <link> sea una URL válida y no vacía. Una cadena vacía no califica como una URL válida, por lo que el validador la marca como un error.

Comportamiento inesperado del navegador: Cuando un navegador encuentra un href vacío, puede resolverlo de forma relativa a la URL del documento actual. Esto significa que el navegador podría terminar haciendo una petición HTTP innecesaria para la página actual misma, interpretando la respuesta HTML como una hoja de estilo u otro recurso. Esto desperdicia ancho de banda, puede ralentizar la carga de la página y puede provocar problemas de renderizado inesperados.

Accesibilidad y semántica: Un href vacío no proporciona información útil a los navegadores, lectores de pantalla u otros agentes de usuario sobre la relación entre el documento y un recurso externo. Añade ruido al DOM sin contribuir con nada funcional.

Cómo solucionarlo

1. Proporciona una URL válida: Si el elemento <link> está destinado a referenciar un recurso, establece href con la URL correcta de ese recurso.
2. Elimina el elemento: Si no se necesita ningún recurso, elimina el elemento <link> completo en lugar de dejarlo con un href vacío.
3. Verifica el renderizado dinámico: Este problema ocurre a menudo cuando un motor de plantillas o CMS genera un elemento <link> con una variable que se resuelve a una cadena vacía. Añade una verificación condicional para que el elemento solo se renderice cuando una URL válida esté disponible.

Ejemplos

❌ Incorrecto: Atributo href vacío

<link rel="stylesheet" href="">

Esto desencadena el error de validación porque href está vacío.

❌ Incorrecto: href vacío desde una plantilla

<!-- Una variable de plantilla se resolvió a una cadena vacía -->

<link rel="icon" type="image/png" href="">

✅ Correcto: href válido que apunta a un recurso

<link rel="stylesheet" href="/css/main.css">

✅ Correcto: href válido para un favicon

<link rel="icon" type="image/png" href="/images/favicon.png">

✅ Correcto: Elimina el elemento si no se necesita ningún recurso

<!-- Simplemente omite el elemento <link> completamente -->

✅ Correcto: Renderizado condicional en una plantilla

Si estás usando un lenguaje de plantillas, envuelve el <link> en una condición para que solo se renderice cuando una URL esté disponible. Por ejemplo, en una plantilla estilo Jinja2:

{% if stylesheet_url %}
  <link rel="stylesheet" href="{{ stylesheet_url }}">
{% endif %}

Esto asegura que el elemento <link> nunca se genere con un href vacío.

Más información:

MDN Reference

HTML link element

→

WHATWG Spec

Semantics, structure, and APIs of HTML documents

→