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 no ordenada de tipos de vínculos únicos, 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.
  • modulepreload: el navegador debe recuperar el módulo de programa y almacenarlo en el mapa de módulos del documento para una posterior evaluación. Opcionalmente, las dependencias del módulo pueden ser recuperadas también.
  • 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">

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, preload ó modulepreload. 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">

imagesrcset

Una lista de cadenas de imágenes cadidatas separadas una de otra por comas (","). Cada uno de los elementos en esta lista representa una alternativa a la imagen original (especificada en el atributo href), diseñada específicamente para medios con un tamaño de pantalla o una densidad de píxeles en particular (por ejemplo, dispositivos con pantallas reducidas, como los celulares). Una cadena de imagen candidata se debe componer por:

  1. Cero o más caracteres de espacio (" ").
  2. El URI del recurso de imagen.
  3. Cero o más caracteres de espacio (" ").
  4. Opcionalmente, uno de los siguientes:
    • Un descriptor de ancho con la siguiente estructura:
      1. Un carácter de espacio (" ").
      2. Un entero no negativo representando el ancho del recurso.
      3. Una letra minúscula W ("w").
    • Un descriptor de densidad de píxeles con la siguiente estructura:
      1. Un carácter de espacio (" ").
      2. Un real no negativo representando la densidad de píxeles del recurso.
      3. Una letra minúscula X ("x").

Si una cadena de imagen candidata tiene un descriptor de ancho, entonces todas las cadenas de imágenes candidatas deben tener el descriptor de ancho especificado. Asimismo, la presencia de una cadena de imágen candidata con un descriptor de ancho implica que la presencia del atributo sizes es obligatoria.

No deben haber dos cadenas de imágenes candidatas con los mismos descriptores en el elemento. Una cadena de imagen candidata sin descriptores es equivalente a una cadena de imagen candidata con un descriptor de densidad de píxeles de "1x".

Este atributo ha sido introducido recientemente en HTML5. Se aconseja a los autores esperar un soporte reducido por parte de los navegadores para sus características.

Este atributo está pensado para vínculos que apuntan a imágenes (más específicamente a íconos) que precisan adaptarse a la pantalla de los dispositivos.

Ejemplo

<link rel="icon" href="icono.png" srcset="icono-grande.png 640w, icono.png 300w, icono-pequeno.png 100w" sizes="(min-width: 75em) 25vw, (max-width: 20em) 80vw, 50vw">

imagesizes

Una lista de tamaños de fuentes válidos, separados por comas. Cada tamaño de fuente (con la excepción del último) debe estar compuesto por:

  1. Opcionalmente:
    1. Una condición de media query que indique en qué casos se deberá aplicar este tamaño.
    2. Un caráter de espacio (" ").
  2. El ancho que tomará la imagen en unidades CSS.

El último tamaño de fuente debe estar compuesto únicamente por el ancho de la imagen en unidades CSS, y será usado por el navegador como predeterminado.

Los navegadores que soporten este mecanismo elegirán de entre las imágenes provistas en el atributo srcset, la que encaje mejor en la configuración del dispositivo en el que deberá ser mostrada, tomando en cuenta la información de este atributo. Este método ha sido diseñado para simplificar la tarea de proveer imágenes en páginas que se adaptan al área de visualización y confía al navegador la elección de la imagen más apropiada para ser mostrada dadas las condiciones que se presentan.

Este atributo solo puede ser declarado si el atributo srcset está presente y tiene al menos un recurso de imagen con un descriptor de ancho.

Este atributo está pensado para vínculos que apuntan a imágenes (más específicamente a íconos) que precisan adaptarse a la pantalla de los dispositivos.

Ejemplo

<link rel="icon" href="icono.png" srcset="icono-grande.png 640w, icono.png 300w, icono-pequeno.png 100w" sizes="(min-width: 75em) 25vw, (max-width: 20em) 80vw, 50vw">

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">

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">

disabled

Un valor booleano que indica si la hoja de estilo referenciada por este elemento debe ser aplicada o no.

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

Si este atributo es programáticamente agregado/removido una vez que la página se ha cargado, los estilos en la hoja de estilos referenciada serán aplicados/removidos de la página.

Ejemplo

<link rel="stylesheet" href="estilos-alternativos.css" disabled>

scope

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

Este atributo ha sido temporalmente removido del estándar y es probable que sea reincorporado pronto.

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 ha sido temporalmente removido del estándar y es probable que sea reincorporado pronto.

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 ha sido temporalmente removido del estándar y es probable que sea reincorporado pronto.

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">

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.