Elemento link en HTML

El elemento link define las relaciones entre el documento actual y un recurso externo. Uno de los usos de esta etiqueta incluye definir una relación entre las páginas entre las que navegar, pero el uso más común de este elemento es incluir hojas de estilo.

Utilice la siguiente forma para que el elemento <link> incruste una hoja de estilo en su documento:

< link  href = "style.css"  rel = "hoja de estilo" >

Tarjeta de artículo

Clasificaciones de contenido	Metadatos
Contenido permitido	Ninguno, este artículo está vacío.
Acrónimo	Dado que este elemento está vacío, se debe proporcionar la etiqueta de inicio y se debe omitir la etiqueta de finalización.
Elementos del padre	Cualquier elemento que acepte elementos de metadatos dentro de él.
Interfaz DOMO	HTMLLinkElement

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento link se pueden utilizar propiedades globales.

`as`

Esta propiedad se usa cuando la relación se usa rel="preload"‎solo con el elemento <link>. Especifica el tipo de contenido que se cargará a través del elemento <link>, esto es necesario para priorizar el contenido, enviar un pedido válido y más.

`disabled`

Esta propiedad se usa para deshabilitar una relación entre elementos <link> y se usa con JavaScript para habilitar y deshabilitar determinadas hojas de estilo de forma dinámica. Vale la pena señalar que se recomienda no usar esta función en absoluto, y la mencionamos con fines de conocimiento.

`href`

Esta propiedad especifica la URL del recurso dado y la URL puede ser absoluta (absoluta) o relativa.

`hreflang`

Esta propiedad especifica el idioma del recurso referenciado y hay una lista de valores permitidos en el documento BCP47. Esta función sólo se puede utilizar si una función está href disponible.

Un ejemplo del uso de esta propiedad para especificar el idioma de la página principal, hemos indicado la relación con la página de destino a través de la propiedad rel:

ref = "bigcode-page.html"  rel = "parent"  hreflang = "es" >

`media`

Esta propiedad especifica a qué consulta de medios se aplica el recurso actual, es decir, el valor de esta propiedad debe ser un tipo de consulta de medios. Esta función es útil cuando se conecta más de una hoja de estilo externa, lo que permite que el navegador elija la hoja de estilo que mejor se adapte al dispositivo mediante el navegador.

En los días de HTML 4, se permite el uso de una lista separada por espacios para algunos tipos de consulta de medios como: print, screen, auraly braille. Pero llegó HTML5 y amplió la lista anterior para incluir todos los tipos de consultas de medios.

Ejemplo de cómo proporcionar dos hojas de estilo diferentes, una para pantallas y otra para imprimir:

< link  rel = "stylesheet"  type = "text / css"  href = "theme.css" > 
< link  rel = "stylesheet"  type = "text / css"  href = "print.css"  media = "print" >

`rel`

Esta propiedad define la relación entre el documento al que se hace referencia en el elemento <link> y el documento actual. El valor de esta propiedad debe ser una lista separada por espacios de los tipos de relación permitidos .

El uso más común de esta propiedad es agregar una relación a una hoja de estilo externa, cuando el valor de esta propiedad se establece en stylesheet, y apuntar href a la URL de la hoja de estilo externa que se utilizará para dar formato a la página.

Ejemplo de uso de la relación icon para establecer un icono para un documento:

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

`sizes`

Esta propiedad define los tamaños de los iconos para los medios visuales dentro del recurso referenciado, y esta propiedad se puede usar si la relación ( rel) es icon. Esta propiedad puede tomar los siguientes valores:

any: Esto significa que el icono se puede cambiar de tamaño a cualquier tamaño, es decir, es una imagen vectorial, cómo image/svg+xml.
Una lista de medidas separadas por un solo espacio, en la que cada medida está representada por la fórmula «Ancho en píxeles x Alto en píxeles». Todas las medidas enumeradas deben incluirse en el recurso.

Nota: la mayoría de los formatos de iconos pueden almacenar sólo un icono, lo que significa que la mayoría de las propiedades sizes tendrán una sola escala.

Nota: iOS no admite esta función, porque los dispositivos iPhone y iPad utilizan un valor de propiedad no estándar rel para identificar los iconos ( apple-touch-icon y apple-touch-startup-icon).

`Title`

La propiedad title tiene una forma especial en el elemento <link>, y cuando se usa con una relación, <link rel="stylesheet"‎> definirá estilos alternativos, y su uso incorrecto ignorará la hoja de estilo por completo.

El usuario puede elegir una hoja de estilo específica para aplicar a la página (esto se puede hacer en Firefox a través del menú Ver> Estilo de página). Esto brinda a los usuarios la posibilidad de ver varias versiones formateadas de la página.

< link  href = "default.css"  rel = "stylesheet"  title = "Default Style" > 
< link  href = "fancy.css"  rel = "alternate stylesheet"  title = "Fancy" > 
< link  href = "basic.css " rel = "Alternar la hoja de estilo"  title = "Basic" >

`type`

Esta propiedad se utiliza para definir el tipo de contenido al que hace referencia el elemento <link>, y el valor de esta propiedad debe ser un tipo MIME válido como text/html o text/css etc.

El uso más común de esta propiedad es definir el tipo de hoja de estilo, y el valor más común para esta propiedad es text/css. Hoja de estilo en cascada, que también se usa en las relaciones rel="preload"‎ para que el navegador no descargue ningún archivo que no admita.

< link  rel = "stylesheet"  type = "text / css"  href = "theme.css" >

Notas

El elemento solo puede existir <link> dentro del elemento <head>, pero se puede repetir para cualquier número.
Las especificaciones HTML y XHTML definen controladores de eventos para un elemento link, pero no está claro cómo usarlos.
El estándar XHTML 1.0 requiere que se agregue una barra a elementos vacíos <link> como </link>.

Ejemplos de Uso

Eventos de carga de hojas de estilo:

Puede determinar qué sucede cuando la hoja de estilo completa la carga observando la ocurrencia del evento load, de manera similar puede saber cuándo ocurrió un error durante la interpretación de la hoja de estilo observando la ocurrencia del evento error:

< script > 
function  sheetLoaded() { 
 //hacer algo cuando se carga la hoja de estilo 
}
function  sheetError() { 
  consola . log ( "Ocurrió un error al cargar la hoja de estilo" ); 
} 
</ script >
< link  rel = "stylesheet"  href = "mystylesheet.css"  onload = "sheetLoaded()"  onerror = "sheetError()" >

Tenga en cuenta que el evento loadocurrirá cuando cargue e interprete la hoja de estilo y todo su contenido (incluido el contenido incluido en ella), y justo antes de comenzar a aplicar los estilos a los elementos de la página.

Formato Predeterminado

La mayoría de los navegadores ocultan el elemento <link> estableciendo la propiedad display en none:

link {
  display: none;
}