Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
link
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
* Some parts of this feature may have varying levels of support.
Elelemento HTML<link> especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos.
Nota:El atributorel puede ser establecido con muchos valores diferentes. Estos se encuentranlistados en una página separada.
| Categorías de contenido | Contenido en metadatos. Siitemprop está presente:contenido dinámico ycontenido textual o estático |
|---|---|
| Contenido permitido | Ninguno, es unelemento vacío. |
| Omisión de etiqueta | Siendo un elemento vacío, la etiqueta de inicio debe estar presente y la etiqueta de cierre no debe estarlo |
| Elementos padre permitidos | Cualquier elemento que acepte elementos de metadatos. Si está presente el atributoitemprop: cualquier elemento que aceptecontenido textual o estático. |
| Interfaz DOM | HTMLLinkElement |
In this article
Atributos
Este elemento incluye losatributos globales.
charsetObsoletoEste atributo define la codificación de caracteres del recurso enlazado. El valor es un espacio y/o una lista de grupos de caracteres según se define enRFC 2045, separados por coma. El valor predeterminado es
iso-8859-1.Nota:Este atributo es obsoleto yno debe ser usado por autores. Para conseguir su mismo efecto, se recomienda usar el encabezado HTTP Content-Type en el recurso enlazado.
crossoriginEste atributo enumerado indica si se debe usar CORS cuando se solicite una imagen relacionada. Lasimágenes con CORS habilitado pueden ser reutilizadas en el elemento
<canvas>sin que esténcorruptas.Los valores permitidos son:_"anonymous"_ : Una solicitud a un origen cruzado (esto es, con el encabezado HTTPOrigin:) es realizada, pero no se envían credenciales (es decir, no se envían cookies, ni certificado X.509, ni datos de autenticación básica HTTP). Si el servidor no otorga credenciales al sitio de origen (por no enviar el encabezado HTTPAccess-Control-Allow-Origin:) la imagen estarácorrupta, y su uso estará restringido."use-credentials"Una solicitud a un origen cruzado (esto es, con el encabezado HTTP
Origin:) es realizada, enviando credenciales (es decir, se envían cookies, certificado y autenticación básica HTTP). Si el servidor no otorga credenciales al sitio de origen (a través del encabezado HTTPAccess-Control-Allow-Credentials:), la imagen estarácorrupta, y su uso estará restringido.Si no está presente, el recurso es obtenido sin una solicitud CORS (sin enviar el encabezado HTTPOrigin:), previniendo así su uso no corrupto en elementos<canvas>. Si se introduce un valor no permitido, se maneja como si usara el valoranonymous. Véaseatributos de configuración CORS para más información.
disabledNo estándarEste atributo es usado para deshabilitar una relación de enlace. Agregando programación, este atributo puede ser usado para habilitar o deshabilitar la relación con distintas hojas de estilos.
Nota:Aunque no hay atributo
disableden el estándar de HTML,sí hay un atributodisableden el objeto DOMHTMLLinkElement.El uso dedisabledcomo atributo HTML no es estándar, y solo puede ser usado en algunos navegadores (W3 #27677).No debe usarse. Para lograr un efecto similar, se puede usar una de las siguientes técnicas:- Si el atributo
disabledfue añadido directamente al elemento en la página, no incluya el elemento<link>en vez de eso; - Establezca lapropiedad
disableddel objeto DOMStyleSheetvía programación.
- Si el atributo
hrefEste atributo especifica laURL del recurso enlazado. La URL debe ser absoluta o relativa.
hreflangEste atributo indica el idioma del recurso enlazado. Es meramente informativo. Los valores permitidos son determinados por laBCP47. Se recomienda usar este atributo solamente si el atributo
hrefestá presente.integrityExperimentalContiene metadatos en línea, el valor criptográfico codificado a base 64 de un recurso (archivo) que se le está indicando al navegador que obtenga, el cual puede ser utilizado por el agente usuario para verificar si el recurso obtenido ha sido entregado libre de manipulaciones inesperadas. VéaseIntegridad de subrecursos.
mediaEste atributo especifica el tipo de medio al que aplica el recurso enlazado. Su valor debe ser unmedia query. Este atributo es usado principalmente cuando se enlaza a una hoja de esetilos externa en la que se le permita al agenete usuario seleccionar la que mejor se adapte al dispositivo sobre el que se ejecuta.
Nota:
- En HTML 4, esto puede ser solamente una lista simple de literales de medios separadas por espacio, es decir,tipos de medios y grupos, donde se definían valores para este atributo, tales como
print,screen,aural,braille. HTML5 extiende esto a cualquier clase demedia queries, los cuales son un superconjunto de los valores permitidos de HTML 4. - Los navegadores que no soporten losMedia Queries de CSS3 no necesariamente reconocerán el enlace adecuado; no olvide establecer enlaces defallback, usando los conjuntos de media queriese definidos en HTML 4.
- En HTML 4, esto puede ser solamente una lista simple de literales de medios separadas por espacio, es decir,tipos de medios y grupos, donde se definían valores para este atributo, tales como
methodsNo estándarEl valor de este atributo provee información acerca de las funciones que podrían ser ejecutadas en un objeto. Los valores son generalmente indicados por el protocolo HTTP cuando se usa, pero podrían (por razones similares a las del atributotitle) ser usados para incluir información de ayuda por adelantado en el enlace. Por ejemplo, el navegador podría elegir una representación diferente de un enlace como una función de los métodos especificados; algo que es buscable podría tener un ícono diferente, o un enlace externo podría dibujar una indicación de que se dejará el sitio actual. Este atributo no está bien comprendido, ni soportado, aun por el navegador en el que se definió, Internet Explorer 4. VéasePropiedades de métodos (MSDN).
referrerpolicyExperimentalUna cadena de texto que indica el referente a usar cuando se obtenga el recurso:*
'no-referrer'significa que el encabezadoRefererno será enviado.'no-referrer-when-downgrade'significa que no se enviará el encabezadoReferercuando se navegue a un origen sin TLS (HTTPS). Este es el comportamiento predeterminado del agente usuario, si no se especifica una política distinta.'origin'significa que el referente será el origen de la página, qué es básicamente el esquema, host y puerto.'origin-when-cross-origin'significa que la navegación a otros orígenes estará limitada por el esquema, el host y el puerto, mientras que navegar dentro del mismo origen incluirá la ruta del referente'unsafe-url'significa que el referente incluirá el origen y ruta (sin el fragmento, contraseña o nombre de usuario). Este caso es inseguro porque permite filtrar orígenes y rutas desde recursos protegidos por TLS a orígenes inseguros.
relEste atributo indica la relación del documento enlazado con el actual. El atributo debe ser una lista detipos de enlaces separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributorel se establece con valor
stylesheet, y el atributohref se establece con la URL de la hoja de estilos externa para dar formato a la página. WebTV también soporta el uso del valornextenrel para precargar la siguiente página en una serie de documentos.revObsoletoEl valor de este atributo muestra la relación del documento actual al documento enlazado, como se define en el atributo
href. En consecuencia, este atributo define la relación inversa, en comparación al valor del atributorel. Lostipos de enlace para este atributo son similares a los disponibles pararel.Nota:Este atributo es obsoleto en HTML5.No debe usarse. Para lograr este efecto, use el atributo
relcon eltipo de enlace contrario, por ejemplo, made debe reemplazar a author. Además, este atributo no significarevision y no debe ser usado con un número de versión, que es desafortunadamente el caso de muchos sitios.sizesEste atributo define los tamaños de los íconos para medios visuales contenidos en el recurso. Debe estar presente solo si el atributo
relcontiene eltipo de enlace icon. Puede tener los siguientes valores:any, significa que el ícono puede ser escalado a cualquier tamaño, ya que está en un formato vectorial, comoimage/svg+xml.- una lista de tamaños separados por espacios en blanco, cada uno en formato
<anchura en píxeles>x<altura en píxeles>or<anchura en píxeles>X<altura en píxeles>. Cada uno de estos tamaños debe estar contenido en el recurso.Nota:
- La mayoría de los formatos de ícono solo permiten almacenar un ícono; por lo que la mayoría de las ocasiones, el atributo
sizescontiene solamente una entrada. El formato ICO de Microsoft lo hace, así como el formato ICN de Apple. Siendo ICO más común, es el que se recomienda usar. - iOS de Apple no soporta este atributo, por lo que iPhone y iPad de Apple usantipos de enlaces especiales, no estándares, para definir los íconos a usar como Web Clip o contenedor de inicio: apple-touch-icon y apple-touch-startup-icon.
- La mayoría de los formatos de ícono solo permiten almacenar un ícono; por lo que la mayoría de las ocasiones, el atributo
targetNo estándarDefine el nombre del frame o ventana que tendrá la relación de enlace o que mostrará la representación de algun recurso enlazado.
titleEl atributo
titletiene semántica particular para el elemento<link>. Cuando se usa en una etiqueta<link rel="stylesheet">, define unahoja de estilos preferida o alternativa. El uso incorrecto de este atributo podríaprovocar que la hoja de estilos sea ignorada.typeEste atributo es usado para definir el tipo de contenido al que se enlaza. El valor del atributo debe ser un tipo MIME, comotext/html,text/css. El uso común de este atributo es para definir el tipo de hoja de estilos enlazada, y el valor más común estext/css, el cual indica un formato de Hoja de Estilos en Cascada.
Ejemplos
>Incluyendo una hoja de estilos
Para incluir una hoja de estilos en una página, use la siguiente sintaxis:
<link href="style.css" rel="stylesheet" />Proporcionando hojas de estilos alternativas
También se pueden especificarhojas de estilos alternativas.
El usuario puede elegir cuál hoja de estilos usar, seleccionándola desde el menú Ver > Estilo de Página. Esto proporciona una manera en que los usuarios pueden ver múltiples versiones de una misma 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="alternate stylesheet" title="Basic" />Eventos de carga de hojas de estilos
Se puede determinar cuando una hoja de estilos fue cargada estableciendo la ejecución de un eventoload en el elemento; de forma similar, se puede detectar si ocurrió un error al procesar una hoja de estilos, observando el eventoerror:
<script> function sheetLoaded() { // Hacer algo interesante; la hoja de estilos ha sido cargada } function sheetError() { alert("¡Ocurrió un error al cargar la hoja de estilos!"); }</script><link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()" />Nota:El eventoload se dispara una vez que la hoja de estilos y todo su contenido importado ha sido cargado y procesado, e inmediatamente antes de que los estilos sean aplicados al contenido.
Notas
- Una etiqueta
<link>puede ocurrir solo en el elemento head; sin embargo, pueden haber múltiples ocurrencias de<link>. - HTML 3.2 define solamente los atributoshref,rel,rev, ytitle para el elemento link.
- HTML 2 define los atributoshref,methods,rel,rev,title, yurn para el elemento
<link>. Los atributosmethods yurn fueron eliminados más adelante de las especificaciones. - Las especificaciones HTML y XHTML definen controladores de evento para el elemento
<link>, pero no está claro cómo serían usados. - En XHTML 1.0, elementos vacíos como
<link>requieren una diagonal de cierre:<link />.
Especificaciones
| Specification |
|---|
| HTML> # the-link-element> |