Validación HTML: Un elemento "link" debe tener un atributo "href" o "imagesrcset", o ambos.

Acerca de este problema HTML

El elemento <link> define una relación entre el documento actual y un recurso externo — más comúnmente hojas de estilo, iconos, recursos precargados, o URLs canónicas. Según la especificación HTML, el elemento debe incluir al menos uno de los atributos href o imagesrcset para que el navegador sepa qué recurso está siendo vinculado. Un elemento <link> sin ninguno de estos atributos es esencialmente una declaración vacía: le dice al navegador sobre un tipo de relación (vía rel) pero no proporciona ningún recurso real que obtener o referenciar.

Este error de validación ocurre comúnmente en algunos escenarios:

Problemas de plantillas o CMS: Una plantilla dinámica genera una etiqueta <link> pero la variable de URL está vacía o indefinida, resultando en un elemento vacío sin href.
Código incompleto: Un desarrollador añade un <link> con un atributo rel con la intención de completar el href más tarde pero se olvida de hacerlo.
Errores de copiar y pegar: Los atributos se eliminan accidentalmente durante la edición o refactorización.

Solucionarlo es importante por varias razones. Los navegadores pueden ignorar el elemento por completo o comportarse de manera impredecible al encontrar un <link> sin URL de recurso. Los elementos innecesarios sin propósito añaden hinchazón al documento y pueden confundir a otros desarrolladores que lean el código. Además, las herramientas que analizan HTML — como rastreadores de motores de búsqueda y tecnologías asistivas — dependen de un marcado bien formado para entender correctamente las relaciones del documento.

Para resolver el problema, añade un atributo href que apunte al recurso objetivo, usa un atributo imagesrcset al proporcionar fuentes de imágenes responsivas, o incluye ambos cuando sea apropiado.

Ejemplos

Inválido: faltan tanto `href` como `imagesrcset`

Este <link> declara una relación de hoja de estilo pero no especifica dónde está ubicada la hoja de estilo:

<link rel="stylesheet">

Este enlace de precarga tiene un atributo as pero ningún recurso que obtener:

<link rel="preload" as="image" type="image/png">

Solucionado: usando `href`

La solución más común es añadir un atributo href con una URL válida:

<link rel="stylesheet" href="styles.css">

<link rel="icon" href="favicon.ico">

<link rel="canonical" href="https://example.com/page">

Solucionado: usando `imagesrcset`

Para la precarga de imágenes responsivas, el atributo imagesrcset especifica múltiples fuentes de imágenes en diferentes resoluciones. Esto es válido sin href:

<link rel="preload" as="image" type="image/png" imagesrcset="icon-1x.png 1x, icon-2x.png 2x">

Solucionado: usando tanto `href` como `imagesrcset`

Puedes combinar ambos atributos. El href sirve como recurso de respaldo mientras que imagesrcset proporciona alternativas responsivas:

<link rel="preload" as="image" href="icon-1x.png" imagesrcset="icon-1x.png 1x, icon-2x.png 2x">

Manejando plantillas dinámicas

Si tus elementos <link> se generan dinámicamente, asegúrate de que el elemento solo se renderice cuando una URL válida esté disponible. Por ejemplo, en una plantilla, envuelve la salida en una verificación condicional en lugar de generar un <link> vacío:

<!-- Malo: genera un enlace incluso cuando la URL está vacía -->

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

<!-- Bueno: solo incluye el elemento cuando hay una URL real -->

<link rel="stylesheet" href="styles.css">

Ten en cuenta que href="" se resuelve a la URL de la página actual y es técnicamente sintaxis válida (no activará este error específico), pero casi con certeza no es lo que pretendes. Siempre asegúrate de que el valor de href apunte al recurso correcto.