Etiqueta HTML <link>
The <link> tag contains a link pointing to the external file with the CSS styles or scripts. Tag description, attributes and using examples.
Etiqueta HTML <link>
La etiqueta `<link>` establece la relación entre el documento actual y un recurso externo. Por lo general, se utiliza para vincular una hoja de estilos CSS externa.
La etiqueta `<link>` puede utilizarse para vincular diferentes versiones de una página. Esto es útil si existen varias traducciones del contenido.
Un documento HTML puede tener varios elementos `<link>` para cargar diferentes tipos de recursos, como hojas de estilo, iconos o contenido precargado. Todos estos elementos `<link>` deben colocarse en la sección <head> del documento (comúnmente antes de la etiqueta de cierre `</head>`). Se pueden utilizar varios elementos `<link>` en un solo documento.
Sintaxis
La etiqueta `<link>` es vacía, lo que significa que no se requiere la etiqueta de cierre. Solo contiene atributos. Sin embargo, en XHTML, la etiqueta `<link>` debe cerrarse (<link/>).
Ejemplo de la etiqueta HTML `<link>`:
Etiqueta HTML <link>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
<p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
</body>
</html>Resultado
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| as | content_type | Especifica el tipo de contenido que se está cargando. Obligatorio cuando rel="preload". |
| charset | char_encoding | Define la codificación del documento vinculado. Obsoleto en HTML5. |
| crossorigin | anonymous use-credentials | Configura la configuración CORS para el recurso vinculado. |
| href | URL | Define la URL del archivo externo. |
| hreflang | language_code | Define el idioma del texto del documento vinculado. |
| integrity | hash_value | Habilita la integridad de subrecursos para verificar los recursos obtenidos. |
| media | media_query | Define el dispositivo para el cual se aplicarán los estilos. |
| rel | alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload | Define la relación entre el documento actual y el archivo vinculado. Valores comunes: stylesheet (vincula un archivo CSS), icon (vincula un favicon), preload (precarga un recurso), alternate (vincula una versión alternativa del documento). |
| rev | reversed relationship | Define la relación entre los documentos actuales y los vinculados. Obsoleto en HTML5. |
| sizes | Width x Height | Establece el tamaño de los iconos asociados. Se utiliza solo con rel="icon". |
| type | media_type | Define el tipo MIME (especificación para la transferencia en red de varios tipos de archivos) del documento vinculado. Nota: Al vincular una hoja de estilo, type="text/css" es opcional y su valor predeterminado es CSS. |
La etiqueta `<link>` también admite Atributos Globales y Atributos de Eventos.
Práctica
¿Cuáles son los atributos de la etiqueta HTML <a>?