fbpx

HTML Link

Descripción

La etiqueta HTML <link> cuenta con un mecanismo de añadir al documento actual información externa, es decir, el elemento <link> permite a los autores de páginas web vincular su documento a otros recursos.

Este elemento <link> se usa con mayor frecuencia para enlazar hojas de estilos externo y esta información se añade en la cabecera del documento, dentro del elemento HEAD.

Ejemplos de uso

Un ejemplo básico de la etiqueta <link> sería el siguiente:

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="https://oregoom.com/styles.css">
  </head>
  <body>
  </body>
</html>

El destino de los enlaces viene dado por el atributo href, que debe estar presente y debe contener una URL válida y no vacía. Si el atributo href está ausente, el elemento <link> no define un vínculo.

El atributo rel debe tener un valor que especifique la relación entre el documento actual y el documento vinculado. Si el atributo rel está ausente, no tiene palabra clave, o si ninguna de las palabras claves utilizadas está permitida de acuerdo con las definiciones de esta especificación, el elemento no crea ningún vínculo.

Atributos

Href

Como hemos comentado anteriormente, este atributo especifica la URL del recurso enlazado. Y la URL del documento vinculado debe ser absoluta o relativa.

Rel

El atributo rel es necesario, porque especifica la relación entre el documento actual y el documento vinculado.

Este atributo puede contener, las siguientes palabras claves permitidas:

  • alternate: Da representaciones alternativas del documento actual.
  • author: Da un enlace al autor del documento o artículo actual.
  • help: Proporciona un enlace a la ayuda contextual.
  • icon: Importa un icono para representar el documento actual.
  • license: Indica que el contenido principal del documento actual está cubierto por la licencia de copyright descrita por el documento de referencia.
  • next: Indica que el documento actual es parte de una serie y que el siguiente documento de la serie es el documento de referencia.
  • prefetch: Especifica que el recurso de destino debe almacenarse en caché de forma preventiva.
  • prev: Indica que el documento actual es parte de una serie y que el documento anterior de la serie es el documento de referencia.
  • search: Proporciona un enlace a un recurso que se puede utilizar para buscar en el documento actual y sus páginas relacionadas.
  • stylesheet: Importa una hoja de estilo para el documento actual.
  • preconnect: Informa al navegador que su página tiene la intención de establecer una conexión con otro origen y que desea que el proceso comience lo antes posible.
  • preload.- Informa al navegador que necesita un recurso como parte de la navegación actual, y que debería comenzar a buscar lo antes posible.

Crossorigin

Representa un valor enumerado que indica, sin la petición realizada a un servidor externo, si debe presenciar credenciales CORS o no.

Media

Marca una lista de media queries indicando los tipos de medio para los que el recurso fue diseñado. Este tipo de media queries, generalmente, están optimizados para impresión, un dispositivo móvil, entre otros.

Integrity

Es una representación criptográfica del recurso enlazado que permite que el navegador compruebe que el recurso recuperado no haya sido manipulado.

Hreflag

Representa el lenguaje que supone que utiliza el recurso enlazado.

Type

Marca el tipo de contenido que contiene el recurso enlazado.

Color

Es el color para ser usado como sugerencia, para que los navegadores puedan emplearse personalizar la vista del icono cuando el usuario agenda el sitio web.



Share This