En HTML, la etiqueta link es un elemento de cierre automático, generalmente ubicado en head del documento. Se utiliza para establecer asociaciones con recursos externos, como hojas de estilo, iconos, etc. La etiqueta link tiene múltiples atributos, de los cuales rel y href son los más utilizados.
El atributo rel define la relación entre el documento actual y el recurso vinculado. Los valores de atributos rel comunes son:
stylesheet : Representa un enlace a una hoja de estilo CSS externa. icon : representa un icono vinculado a un sitio web, como un favicon. El atributo href se utiliza para especificar la URL del recurso vinculado.
Un ejemplo típico de etiqueta de link es:
<!DOCTYPE html> <html> <cabeza> <meta juego de caracteres="UTF-8"> <título>Mi sitio web</título> <!-- Enlace a hoja de estilos CSS externa --> <enlace rel="hoja de estilo" href="estilos.css"> <!-- Icono de enlace al sitio web --> <enlace rel="icono" href="favicon.ico"> </cabeza> <cuerpo> <h1>¡Enlace!</h1> <p>Esta es una introducción al enlace. </p> </cuerpo> </html>
En este ejemplo, utilizamos dos etiquetas link . La primera etiqueta link asocia el documento HTML con la hoja de estilo CSS externa styles.css , que se utiliza para definir el estilo de la página. La segunda etiqueta link asocia el documento HTML con el sitio web favicon.ico , que se mostrará cuando el usuario abra el sitio web en un navegador.
Por supuesto, la etiqueta link tiene otros atributos y usos. A continuación se muestran algunos atributos y casos de uso comunes:
type : este atributo se utiliza para especificar el tipo MIME del recurso vinculado. Por ejemplo, al vincular a una hoja de estilos CSS, puede especificar su tipo como text/css . En la mayoría de los casos, los navegadores pueden identificar automáticamente los tipos de recursos, por lo que el atributo type no es necesario. Ejemplo:
<enlace rel="hoja de estilo" href="estilos.css" tipo="texto/css">
media : este atributo le permite especificar a qué tipos de medios se aplica la hoja de estilo. Por ejemplo, puede crear una hoja de estilos específica de impresión que se utiliza cuando los usuarios imprimen una página. Ejemplo:
<enlace rel="hoja de estilo" href="print.css" media="imprimir">
sizes : cuando use la etiqueta link para vincular íconos de múltiples tamaños, puede usar sizes para especificar el tamaño del ícono. Esto es útil para situaciones en las que los iconos se muestran en diferentes tamaños según el dispositivo. Ejemplo:
<enlace rel="icon" href="icon-48x48.png" tamaños="48x48"> <enlace rel="icon" href="icon-96x96.png" tamaños="96x96">
crossorigin : al vincular a un recurso de origen cruzado, puede usar crossorigin para especificar la configuración CORS (compartición de recursos de origen cruzado) para el recurso. Ejemplo:
<enlace rel="hoja de estilo" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : este atributo se utiliza para garantizar la integridad de los recursos externos y se puede utilizar junto con el atributo crossorigin . Al darle al recurso un hash basado en contenido (como SHA-256), puede asegurarse de que el recurso no haya sido manipulado. Ejemplo:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" integridad="sha256-base64-encoded-hash">
preload : rel="preload" se puede utilizar para cargar recursos importantes por adelantado, como fuentes, imágenes o scripts. Esto optimiza el rendimiento de carga de la página. Ejemplo:
<enlace rel="precarga" href="font.woff2" as="font" type="font/woff2" crossorigin>
Estos son algunos atributos y usos comunes de link .
Además de los mencionados anteriormente, rel tiene más valores de atributos:
alternate : utilice rel="alternate" para proporcionar versiones alternativas del documento, como páginas en un idioma diferente o para diferentes dispositivos. Ejemplo:
<enlace rel="alternativo" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="solo pantalla y (ancho máximo: 640px)" href="https://link.com/mobile/a">
dns-prefetch : los nombres de dominio se pueden resolver previamente mediante rel="dns-prefetch" para reducir el tiempo de búsqueda de DNS y acelerar la carga de recursos. Ejemplo:
<enlace rel="dns-prefetch" href="//link.com">
preconnect : similar a dns-prefetch , rel="preconnect" puede preestablecer una conexión TCP a un recurso de terceros, lo que reduce el tiempo necesario para establecer una conexión. Ejemplo:
<enlace rel="preconexión" href="https://link.com">
prefetch : utilice rel="prefetch" para captar previamente y almacenar en caché los recursos para su uso en páginas posteriores. Esto es útil para precargar recursos que pueden usarse en la página. Ejemplo:
<enlace rel="prefetch" href="pre-page.html">
canonical : el uso de rel="canonical" puede proporcionar a los motores de búsqueda la URL canónica de una página, lo que ayuda a evitar problemas de contenido duplicado. Ejemplo:
<enlace rel="canonical" href="https://link.com/a/post">
license : utilice rel="license" para especificar la URL de licencia del documento. Ejemplo:
<enlace rel="licencia" href="https://link.org/licenses/by/4.0/">
manifest : utilice rel="manifest" para vincular el archivo de manifiesto de una aplicación web (normalmente en formato JSON) a un documento HTML. El archivo de manifiesto contiene los metadatos de la aplicación web, como nombre, descripción, icono, etc. Ejemplo:
<enlace rel="manifest" href="manifest.json">
Tenga en cuenta que diferentes navegadores pueden tener distintos grados de compatibilidad con estas propiedades y funcionalidades. Se recomienda consultar la documentación relevante al utilizar nuevas funciones para garantizar la compatibilidad y funcionalidad.
Con esto concluye este artículo sobre el uso específico del atributo de etiqueta de enlace en HTML. Para obtener más información sobre el atributo de etiqueta de enlace HTML, busque artículos anteriores en downcodes.com o continúe explorando los artículos relacionados a continuación. Espero que me apoyen. el futuro.