El elemento <link> permite proveer información relacionada entre el documento HTML actual y un recurso externo enlazado, como puede ser el caso de las hojas de estilo en cascada (CSS), las fuentes o tipografías, y los iconos de página, también llamados «faviconos» (del inglés: favorites icons).
La etiqueta de este elemento es <link>, y sólo tiene etiqueta de apertura; por tanto no tiene etiqueta de cierre. Se trata de un elemento vacío cuyo contenido se especifica a través de sus variados atributos. Su atributo más importante es rel, ya que con él se indica la relación entre el documento enlazado con el actual.
Es posible introducir tantos elementos <link> como sean necesarios, y es obligatorio que estén anidados dentro de la cabecera: dentro de las etiquetas del elemento <head>. El elemento <link> no crea una caja visible. Lo importante es que se cargue el recurso enlazado y esté bien relacionado.
Ejemplo de código HTML de varios elementos <link>:
<head>
<link rel='stylesheet' href='estilos.css'>
<link rel='icon' type='image/x-icon' href='favicono.ico'>
<link rel='preload' href='fuente.woff2' as='font'>
<link rel='canonical' href='https://recursivos.com/html/link/'>
</head>
Atributos
Los atributos del elemento <link> ofrecen una gran variedad de posibilidades, pues se trata de un elemento con mucho potencial. Por tanto, sus atributos son importantes para definir correctamente la utilidad del elemento.
El atributo ‘href’
El atributo href se utiliza para definir la URL con la ubicación o ruta del recurso enlazado. La URL puede ser absoluta o relativa. Se trata del atributo más importante de este elemento, y por tanto, su uso es obligatorio.
El atributo ‘rel’
El atributo rel es el que permite indicar el tipo de recurso enlazado. Puede contener una lista no ordenada de tipos de vínculos únicos, que estarán separados por un espacio en blanco. Por ejemplo, para añadir un archivo de hojas de estilo en cascada (CSS) debe usarse el valor stylesheet.
Lista de valores más usados del atributo rel para <link>:
| Valor | Descripción |
|---|---|
alternate | Define un tipo de recurso alternativo. |
author | Define el autor de una página. |
bookmark | Indica el enlace permanente de un artículo con múltiples secciones. |
canonical | Especifica el enlace permanente para evitar contenido duplicado. |
dns-prefetch | Especifica que el navegador web debe resolver de forma preventiva las DNS del recurso enlazado. |
help | Indica que el enlace conduce a un recurso que aporta ayuda sobre el sitio web actual. |
icon | Indica que el recurso enlazado es un icono. Es posible añadir varios iconos diferentes usando otros atributos en combinación. Se trata de los siguientes atributos: media, type y sizes. |
license | Indica que el enlace conduce a un recurso que aporta información legal sobre licencia. |
manifest | Indica que el recurso enlazado aporta información sobre el «manifiesto de aplicaciones web» (Web App Manifest). |
modulepreload | Especifica que el navegador web debe almacenar el módulo del recurso enlazado para una posterior evaluación. |
next | Indica que el enlace conduce al recurso siguiente en una secuencia de artículos o páginas. |
pingback | Indica la dirección URL del servidor con el programa encargado de gestionar los pingbacks al documento actual. El pingback es un sistema de comunicación automática entre dos webs cuando una enlaza a la otra; es un aviso de citación. |
preconnect | Especifica que el navegador web debe conectarse de forma preventiva al recurso enlazado. |
prefetch | Especifica que el navegador web debe recuperar y almacenar de forma preventiva el recurso enlazado, pensando en tenerlo disponible en la navegación siguiente. |
preload | Especifica que el navegador web debe recuperar y almacenar de forma preventiva el recurso enlazado, pensando en el contexto de navegación actual. |
prerender | Especifica que el navegador web debe recuperar, almacenar y procesar de forma preventiva el recurso enlazado, así se ayuda a tener una entrega más rápida del recurso. |
prev | Indica que el enlace conduce al recurso anterior en una secuencia de artículos o páginas. |
search | Indica que el enlace conduce a un recurso que puede ser usado para realizar búsquedas en el sitio web. |
serviceworker | Indica el registro de un «trabajador de servicio» (Service Worker) en un documento o mediante un encabezado. |
stylesheet | Indica que el recurso enlazado es una hoja de estilo en cascada (CSS) que define estilos sobre el documento actual. |
El atributo ‘crossorigin’
Con el atributo crossorigin se indica si una petición HTTP debe presentar credenciales de origen cruzado (CORS). De esta manera, con el mecanismo CORS los servidores pueden especificar quién puede acceder al recurso que se encuentra a un dominio diferente al actual. Sus valores posibles son:
Estos son los valores posibles:
| Valor | Descripción |
|---|---|
anonymous | Con este valor no se envían credenciales cuando se hace una solicitud de origen cruzado. |
use-credentials | Con este valor se envían credenciales cuando se realiza una solicitud de origen cruzado. |
El atributo ‘media’
El atributo media permite especificar una lista de tipos de medio (media types) para los cuales el recurso enlazado ha sido diseñado. Por ejemplo, si se trata de una hoja de estilo en cascada (CSS) con diseño pensado para la impresora, su valor será print. El valor por defecto es all (todos).
Lista de valores posibles:
| Valor | Descripción |
|---|---|
print | Diseño para la impresora. |
screen | Diseño para pantallas. |
all | Diseño para todos los tipos de medio. |
El atributo ‘integrity’
Con el atributo integrity se puede verificar la integridad del recurso enlazado y que el navegador web pueda asegurarse de que el recurso no ha sido manipulado. Este atributo sólo debe ser declarado cuando el valor del atributo rel es uno de los siguientes: stylesheet, preload o modulepreload.
El valor del atributo integrity será un hash que debe estar codificado en Base64. La sintaxis de este valor debe ser, en primera instancia, el prefijo del algoritmo utilizado (por ejemplo: sha256, sha384 o sha512). A este prefijo le sigue un guión normal (-) y finalmente se indica el hash.
Ejemplo de uso del atributo integrity:
<link
rel='stylesheet'
href='https://recursivos.com/assets/css/style.css'
integrity='sha256-yLGHRkK85JGUMJsevPaKCQ4gYknL2SIGgERVBSiP/Ks='>
El atributo ‘hreflang’
El atributo hreflang permite especificar el idioma que se utiliza en el recurso enlazado. Se trata de un atributo informativo, y se recomienda usarlo sólo si el atributo href está presente, como es lógico; de nada serviría indicar el idioma de un recurso que no se ha especificado en el mismo elemento.
El atributo ‘type’
El atributo type permite indicar el tipo de medio (Mime Type) que se enlaza. Existen muchos tipos de medio y por tanto es importante revisar la lista completa para tener claro el que sea más conveniente. Por ejemplo, si el recurso es un archivo .css, el tipo de medio será el siguiente: text/css.
El atributo ‘referrerpolicy’
El atributo referrerpolicy se utiliza para indicar la política de referencia que se ha usado en el lado del cliente. La política de referencia se envía al servidor cuando se obtiene el recurso enlazado. Puede tener los valores siguientes:
| Valor | Descripción |
|---|---|
no-referrer | No se envía ningún dato de referente con las solicitudes. |
no-referrer-when-downgrade | Valor predeterminado. Como referente se envía el origen, la ruta y la cadena de consulta cuando el nivel de seguridad es el mismo (de HTTPS a HTTPS), pero no se envía a destinos menos seguros (de HTTPS a HTTP). |
origin | Se envía sólo el origen (esquema, host y puerto) del documento. |
origin-when-cross-origin | Se envía el origen del documento para una solicitud de origen distinto; pero se envía el origen, la ruta y la cadena de consulta para una solicitud con el mismo origen. |
unsafe-url | Se envía la referencia con el origen y la ruta. Este caso no es seguro porque puede filtrar el origen y la ruta de orígenes protegidos por TLS a orígenes que no estén protegidos. |
El atributo ‘sizes’
El atributo sizes permite definir los tamaños de los iconos enlazados. Para que este atributo se tome en cuenta, el valor del atributo rel debe uno de los dos siguientes: icon o la extensión registrada apple-touch-icon.
Si el icono está en formato vectorial —es decir, Mime Type: image/svg+xml—, el valor del atributo rel puede ser any; teniendo el formato vectorial, el icono puede ser escalado a cualquier tamaño.
Ejemplo de un icono en formato vectorial:
<link rel='icon' href='icono.svg' sizes='any'>
En cambio, si el icono es un mapa de bits, el valor del atributo rel será una lista de tamaños separados por espacios en blanco. Cada tamaño se especificará indicando, en valores numéricos enteros, el ancho de la imagen en píxeles, seguido la letra x y el alto de la imagen en píxeles.
Ejemplo de un icono en mapa de bits:
<link rel='icon' href='icono.png' sizes='16x16 32x32 64x64'>
El atributo ‘imagesrcset’
El atributo imagesrcset es idéntico al atributo srcset usado en las imágenes. Se utiliza para proveer varias imágenes pensando en distintos tamaños de dispositivo. Su valor será una lista de imágenes con sus tamaños, separando cada imagen de la siguiente por una coma. Por cada imagen, se indica:
- Una URL válida de imagen (valor mínimo).
- Opcionalmente, uno de los siguientes valores:
- El ancho de imagen en píxeles y la letra
w. - La densidad del píxel con la letra
x.
- El ancho de imagen en píxeles y la letra
Por lo tanto, primero se introduce la URL de la imagen, luego un espacio en blanco y finalmente un descriptor del punto 2; sólo se admite uno. Si no se especifica ningún descriptor de tamaño, se tomará por defecto el valor 1x.
Ejemplo de código HTML del atributo imagescrset:
<link
rel='icon'
href='icono.png'
scrset='icono-400.png 400w,
icono-500.png 500w,
icono-600.png 600w'>
El atributo ‘imagesizes’
El atributo imagesizes funciona de igual manera que el atributo sizes usado en los elementos de imagen. Debe usarse junto con el atributo imagescrset, por lo que es importante que este último esté definido. Con el atributo imagesizes se indica un listado de tamaños válidos separados por coma. Así:
- Una propiedad CSS entre paréntesis; es opcional.
- El ancho de la imagen en unidades de CSS.
Ejemplo de código HTML del atributo imagesizes:
<img
rel='icon'
href='icono.png'
scrset='icono-400.png 400w,
icono-500.png 500w,
icono-600.png 600w'
sizes='(max-width: 400px) 400px,
(max-width: 500px) 500px,
600px'>
El atributo ‘as’
El atributo as indica el tipo de contenido que se enlaza con el elemento <link>, así se indica su propósito a nivel semántico una vez se ha recuperado. Se usa cuando el valor del atributo rel es preload o prefetch.
Este atributo no tiene un valor por defecto, y su valor puede ser una de las siguientes palabras clave: fetch, audio, document, embed, font, image, manifest, object, report, script, serviceworker, sharedworker, style, track, video, worker y xslt.
