Validación HTML: Valor incorrecto "X" para el atributo "rel" en el elemento "Y": La cadena "X" no es una URL absoluta.

Acerca de este problema HTML

El atributo rel define la relación entre el documento actual y un recurso enlazado. La especificación HTML mantiene un conjunto de valores de palabras clave reconocidas para este atributo, y las palabras clave permitidas varían dependiendo del elemento en el que aparece el atributo. Por ejemplo, stylesheet es válido en <link> pero no en <a>, mientras que nofollow es válido en <a> y <form> pero no en <link>.

Cuando el validador encuentra un valor rel que no es una palabra clave reconocida, verifica si el valor es una URL absoluta válida. Esto es porque la especificación HTML permite que se definan tipos de enlace personalizados usando URLs absolutas como identificadores (similar a como funcionan los espacios de nombres XML). Si el valor no es ni una palabra clave reconocida ni una URL absoluta válida, el validador genera este error.

Las causas comunes de este error incluyen:

Errores tipográficos en palabras clave estándar — por ejemplo, rel="styelsheet" o rel="no-follow" en lugar del correcto rel="stylesheet" o rel="nofollow".
Usar valores no estándar o inventados — como rel="custom" o rel="external", que no forman parte del conjunto reconocido de la especificación HTML.
Usar URLs relativas como tipos de enlace personalizados — por ejemplo, rel="my-custom-type" en lugar de una URL completa como rel="https://example.com/my-custom-type".

Esto es importante porque los navegadores y otros agentes de usuario dependen de los valores rel reconocidos para determinar cómo manejar los recursos enlazados. Un valor no reconocido simplemente será ignorado, lo que podría significar que tu hoja de estilos no se cargue, que tu pista de precarga no funcione, o que los motores de búsqueda no respeten la relación de enlace que pretendías. Usar valores correctos asegura un comportamiento predecible en todos los navegadores y herramientas.

Ejemplos

Incorrecto: Palabra clave mal escrita

<link rel="styleshet" href="main.css">

El validador reporta que styleshet no es una palabra clave reconocida y no es una URL absoluta.

Correcto: Ortografía corregida

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

Incorrecto: Palabra clave no estándar en un anchor

<a href="https://example.com" rel="external">Visitar Ejemplo</a>

El valor external no es una palabra clave rel estándar en la especificación HTML, por lo que el validador la marca.

Correcto: Usar una palabra clave reconocida

<a href="https://example.com" rel="noopener">Visitar Ejemplo</a>

Incorrecto: URL relativa como tipo de enlace personalizado

<link rel="my-custom-rel" href="data.json">

Correcto: URL absoluta como tipo de enlace personalizado

Si realmente necesitas un tipo de relación personalizado, proporciona una URL absoluta completa:

<link rel="https://example.com/rels/my-custom-rel" href="data.json">

Correcto: Valores `rel` válidos comunes

Aquí tienes algunas palabras clave rel estándar de uso frecuente con sus elementos apropiados:

<!-- Enlazar una hoja de estilos -->

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

<!-- Enlazar un favicon -->

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

<!-- Precargar un recurso -->

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Decir a los motores de búsqueda que no sigan un enlace -->

<a href="https://example.com" rel="nofollow">Enlace patrocinado</a>

<!-- Abrir un enlace de forma segura en una nueva pestaña -->

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Sitio externo</a>

Múltiples valores `rel`

Puedes especificar múltiples valores rel separados por espacios. Cada uno debe ser individualmente una palabra clave reconocida o una URL absoluta válida:

<!-- Correcto: ambos valores son palabras clave reconocidas -->

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Externo</a>

<!-- Incorrecto: "popup" no es una palabra clave reconocida o URL absoluta -->

<a href="https://example.com" target="_blank" rel="noopener popup">Externo</a>

Para resolver este error, consulta la referencia del atributo rel de MDN para ver la lista completa de palabras clave reconocidas y qué elementos las soportan. Si tu valor no está en la lista, reemplázalo con la palabra clave estándar correcta o usa una URL absoluta completa para definir tu tipo de enlace personalizado.