Elemento link

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento link provee información relacional acerca del documento, como versiones alternativas, autores, licencias de copyright, íconos, etc.

Un elemento link debe tener un atributos rel o un atributo itemprop, pero nunca ambos. El atributo href también es obligatorio.

Cuando el atributo itemprop se encuentra ausente, este elemento sólo puede ser declarado en la sección de encabezado (head) del documento. En caso contrario puede ser declarado en cualquier lugar.

al utilizarse en este elemento, el atributo title tiene un significado especial: define el título del vínculo en todos los casos, a excepción del de hojas de estilos, en el cual representa el nombre del conjunto de hojas de estilo a la cual esta pertenece.

Ejemplos

El siguiente ejemplo provee información acerca del documento, mediante el uso del elemento link con diferentes tipos de vínculos.

<!DOCTYPE html>
<html>
  <head>
    <title>Película "La guerra de las galaxias: Una nueva esperanza"</title>
    <link rel="license" href="copyright.html">
    <link rel="next" href="el-imperio-contraataca.html">
    <link rel="search" href="buscar-peliculas.html">
    <link rel="alternate" hreflang="en" href="en/a-new-hope.html">
    <link rel="stylesheet" href="predeterminado.css">
    <link rel="stylesheet alternate" media="print" href="impresion.css">
    <link rel="icon" sizes="16x16" href="una-nueva-esperanza-16.png">
  </head>
  <body>
    <h1>Una nueva esperanza</h1>
    <p>Luego de la caída de la democracia y ascenso del imperio, la esperanza estaba perdida...</p>
  </body>
</html>

Atributos

Atributos específicos

href

La dirección (URI) del recurso enlazado. Este atributo representa el corazón de link, e indica al navegador a dónde ir cuando el vínculo es activado.

La presencia de este atributo es obligatoria. Cuando este atributo está ausente o tiene un valor que no es un URI válido, el elemento no establece un vínculo.

Ejemplo

<link rel="stylesheet" href="../estilos/predeterminado.css">

crossorigin

Un valor enumerado que indica si la petición hecha a un servidor externo debe presentar credenciales CORS o no. Los dos valores posibles son (insensibles a mayúsculas/minúsculas):

  • anonymous: las peticiones CORS para el elemento tendrán la etiqueta "omit credentials" establecida.
  • use-credentials: las peticiones CORS para el elemento no tendrán la etiqueta "omit credentials" establecida.

Ejemplo

<link rel="icon" href="http://www.otroservidor.com/iconos/predeterminado.png" crossorigin="anonymous">

rel

Una lista de tipos de vínculos, separados por espacios, indicando el significado que el recurso enlazado tiene para el documento actual (el que contiene el vínculo). Este atributo puede contener, entre otros, los siguientes valores estándar:

  • alternate: una representación alternativa del documento actual.
  • author: un enlace al autor del documento o artículo actual.
  • dns-prefetch: el navegador debería llevar a cabo preventivamente la resolución de DNS para el recurso enlazado.
  • help: un vínculo a ayuda contextual.
  • icon: un ícono para representar al documento actual.
  • license: una descripción de una licencia de copyright que cubre al contenido principal del documento actual.
  • next: el próximo documento en una serie de documentos.
  • pingback: la dirección del servidor pingback encargado de manejar los pingbacks al documento actual.
  • preconnect: el navegador debe conectarse preventivamente al recurso enlazado.
  • prefetch: el navegador debe recuperar y almacenar preventivamente el recurso enlazado, ya que es probable que sea requerido en la navegación subsiguiente.
  • preload: el navegador debe recuperar y almacenar preventivamente el recurso enlazado para la navegación actual de acuerdo con el destino provisto en el atributo as.
  • prerender: el navegador debe recuperar, almacenar y procesar preventivamente el recurso enlazado, de manera que ayude a propiciar una entrega más rápida en el futuro.
  • prev: el documento previo en una serie de documentos.
  • search: un enlace a un recurso que puede ser utilizado para buscar en el documento actual y sus páginas relacionadas.
  • serviceworker: una registración de un trabajador de servicio (service worker registration).
  • stylesheet: una hoja de estilos que define estilos para el documento actual.

Extensiones para el conjunto predefinido de tipos de vínculos pueden registrarse en la pagina wiki de microformatos de valores rel existentes. Algunos de los tipos de vínculos extendidos son citados en este documento.

Un elemento link debe tener presente al atributo rel o al atributo itemprop, pero nunca ambos.

Ejemplo

<link rel="prev" href="articulo1.html">
<link rel="next" href="articulo3.html">
<link rel="license" href="copyright.html">
<link rel="alternate" href="version-ingles.html" hreflang="en">

media

Una lista de media queries indicando los tipos de medio (y sus características) para los cuales el recurso enlazado ha sido diseñado. Por ejemplo, un documento o recurso podría estar optimizado para impresión (menos colores, imágenes y fondos), un dispositivo móvil o una pantalla normal. El valor por defecto es "all" (todos).

Ejemplo

<link rel="alternate" href="version-impresora.html" media="print">

nonce

Un número criptográfico de utilización única ("nonce") que puede ser utilizado por la Política de seguridad de contenido para determinar si el recurso externo especificado por este vínculo será cargado y aplicado al documento.

Ejemplo

<link rel="search" href="buscar.php" nonce="aHR0cDovL2h0bWxxdWljay5jb20vYnVzYy5waHANCg==">

integrity

Una representación criptográfica del recurso enlazado que permite a los navegadores comprobar que el recurso recuperado no ha sido manipulado.

Este atributo sólo debe ser declarado cuando el atributo rel está presente y tiene el valor stylesheet. En cualquier otra situación su uso es inválido.

Ejemplo

<link rel="stylesheet" href="principal.css" integrity="sha384-aHR0cDovL2h0bWxxdWljay5jb20vYnVzY2FyLnBocA0K">

hreflang

El lenguaje que se supone utiliza el recurso enlazado.

Ejemplo

<link rel="alternate" hreflang="en" href="version-ingles.html">

type

El tipo de contenido (o Tipo de medio de Internet) que se supone tiene el recurso enlazado.

Ejemplo

<link rel="icon" href="icono.png" type="image/png">
<link rel="next" href="articulo2.html" type="text/html">

referrerpolicy

Establece la política de origen utilizada en el procesamiento de los atributos del elemento, lo que involucra qué información es enviada acerca del remitente en una petición de otro recurso. Puede contener cualquiera de los siguientes valores:

  • no-referrer: Ninguna información acerca del remitente es enviada en todas las peticiones.
  • no-referrer-when-downgrade: Una URL completa es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • same-origin: Una URL completa es enviada únicamente en las peticiones hechas en el mismo origen.
  • origin: Una URL compuesta por protocolo, servidor y puerto es enviada en todas las peticiones.
  • strict-origin: Una URL compuesta por protocolo, servidor y puerto es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes.
  • strict-origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes, únicamente en peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • unsafe-url: Una URL completa es enviada en todas las peticiones.

Nota: Cuando la cadena vacía es especificada, se asume el valor no-referrer.

Ejemplo

<link rel="license" src="https://creativecommons.org/publicdomain/zero/1.0/" referrerpolicy="unsafe-url">

sizes

Una lista de tamaños separados por espacios para los cuales el ícono enlazado ha sido diseñado. Cada tamaño puede estar compuesto por una cadena de dos enteros separados por la letra "x", o por la palabra especial "any", la cual representa todos los tamaños posibles (valor ideal para íconos SVG). Cada valor es insensible a mayúsculas/minúsculas.

Este atributo sólo puede ser declarado cuando el atributo rel está presente y tiene el valor "icon" o la extensión registrada "apple-touch-icon". En cualquier otra situación su uso es inválido.

Ejemplo

<link rel="icon" href="icono.ico" sizes="64x64 32x32 16x16">
<link rel="icon" href="icono.svg" sizes="any">

as

Un valor enumerado que indica el propósito que servirá el recurso enlazado una vez recuperado. Este atributo puede contener cualquiera de los siguientes valores insensibles a mayúsculas/minúsculas: "fetch", "audio", "document", "embed", "font", "image", "manifest", "object", "report", "script", "serviceworker", "sharedworker", "style", "track", "video", "worker" y "xslt". No existe un valor por defecto para este atributo.

El atributo as sólo puede ser declarado cuando el atributo rel está presente y contiene el valor preload.

Ejemplo

<link rel="preload" href="musica-fondo.ogg" as="audio">

scope

Una URL que define el área de influencia para una registración de un trabajador de servicio (service worker registration).

Este atributo sólo puede ser declarado cuando el atributo rel está presente y tiene el valor "serviceworker". En cualquier otra situación su uso es inválido.

Ejemplo

<link rel="serviceworker" src="http://www.probando123.zen/trabajador-esforzado.js" scope="http://www.probando123.zen/area-restringida-a-los-trabajadores/">

updateviacache

Un valor enumerado que especifica el modo de utilización de la caché (update via cache mode) para el trabajador de una registración de un trabajador de servicio (service worker registration). El atributo puede tomar los valores "imports", "all" y "none". Si el atributo es omitido, se asume el valor "imports".

Este atributo sólo puede ser declarado cuando el atributo rel está presente y tiene el valor "serviceworker". En cualquier otra situación su uso es inválido.

Ejemplo

<link rel="serviceworker" src="http://www.probando123.zen/trabajador-sin-cache.js" updateviacache="none">

workertype

Un valor enumerado que indica el tipo de trabajador para una registración de un trabajador de servicio (service worker registration). Este atributo puede tomar cualquiera de los dos valores "classic" y "module". Si el atributo no está presente, se asume el valor "classic".

Este atributo sólo puede ser declarado cuando el atributo rel está presente y tiene el valor "serviceworker". En cualquier otra situación su uso es inválido.

Ejemplo

<link rel="serviceworker" src="http://www.probando123.zen/martillo-de-trabajador-esforzado.js" workertype="module">

color

Un color para ser usado a modo de sugerencia, que los navegdores pueden utilizar para personalizar la vista del ícono cuando el usuario agenda un sitio web.

Este atributo sólo puede ser declarado cuando el atributo rel está presente y tiene el valor "mask-icon" (tipo extendido de vínculo). En cualquier otra situación su uso es inválido.

Ejemplo

<link rel="mask-icon" color="#8800FF">

charset

La codificación de caracteres del recurso enlazado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso ya no es válido. Se alienta a los autores a usar los encabezados Content-Type de HTTP para proveer información acerca del conjunto de caracteres en documentos y otros recursos.

Ejemplo

<link rel="next" href="articulo2.html" charset="utf-8">

rev

El significado del documento actual (el que contiene al vínculo) para el recurso enlazado.

Este atributo se ha vuelto obsoleto en HTML5 y su uso ya no es válido. Se alienta a los autores a reemplazarlo con el atributo rel.

Ejemplo

<link rev="index" href="articulo1.html">
<link rev="index" href="articulo2.html">
<link rev="index" href="articulo3.html">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.