Etiqueta link en HTML
Introducción
La etiqueta <link> de HTML5 es un elemento clave en el desarrollo y diseño web, ya que permite establecer relaciones y conexiones entre el documento HTML y recursos externos, como hojas de estilo CSS, íconos de favoritos, fuentes web, entre otros.
Al dominar el uso de esta etiqueta, los desarrolladores pueden optimizar y mejorar la apariencia, funcionalidad y rendimiento de sus sitios web.
El objetivo de este artículo es proporcionar una visión completa y detallada sobre la etiqueta <link> de HTML5. A lo largo del artículo, se explorarán sus atributos, funciones y buenas prácticas, incluyendo ejemplos de código que faciliten la comprensión y aplicación de los conceptos tratados.
Al finalizar la lectura, tendrás un conocimiento sólido sobre cómo utilizar la etiqueta <link> para potenciar tus proyectos web.
¿Qué es la etiqueta <link> en HTML?
La etiqueta <link> es un elemento de HTML5 que permite establecer relaciones entre el documento HTML actual y otros recursos externos.
Es una etiqueta vacía, lo que significa que no tiene contenido ni etiqueta de cierre. Su función principal es vincular archivos externos, como hojas de estilo CSS, íconos de favoritos y aplicaciones, fuentes web, entre otros, al documento HTML.
Cómo y dónde se ubica en el código HTML
La etiqueta <link> se encuentra dentro del elemento <head> del documento HTML. Dado que el propósito principal de la etiqueta <link> es establecer relaciones con recursos externos, no se utiliza para mostrar contenido directamente en la página web.
En cambio, afecta indirectamente la presentación, comportamiento o funcionalidad de la página al vincular recursos relevantes.
A continuación, se muestra un ejemplo básico de cómo y dónde se ubica la etiqueta <link> en un documento HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de etiqueta link</title>
<!-- Aquí se coloca la etiqueta link para vincular una hoja de estilo CSS -->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>¡Hola mundo!</h1>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En el ejemplo anterior, la etiqueta <link> se utiliza para vincular una hoja de estilo CSS externa llamada “estilos.css” al documento HTML.
Atributos de la etiqueta <link> de HTML
La etiqueta <link> cuenta con varios atributos que permiten especificar la relación entre el documento HTML y el recurso externo.
Los atributos más comunes son: “href”, “rel”, “type” y “media”. A continuación, se describen estos atributos y se proporcionan ejemplos de su uso:
Atributo “href”
El atributo “href” se utiliza para indicar la URL del recurso externo que se desea vincular al documento HTML. Puede ser una ruta absoluta o relativa.
Ejemplo:
<link rel="stylesheet" href="https://example.com/css/estilos.css">
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza una ruta absoluta para vincular una hoja de estilo CSS desde un dominio diferente.
Atributo “rel”
El atributo “rel” (relationship) define la relación entre el documento HTML y el recurso externo vinculado. A continuación, se presentan ejemplos de valores comunes para este atributo:
- stylesheet: Indica que el recurso externo es una hoja de estilo CSS.
Ejemplo:
<link rel="stylesheet" href="estilos.css">
Lenguaje del código: HTML, XML (xml)- icon: Especifica un ícono que se utilizará como favicon del sitio web o como ícono de la aplicación en dispositivos móviles.
Ejemplo:
<link rel="icon" href="favicon.ico" type="image/x-icon">
Lenguaje del código: HTML, XML (xml)- preconnect: Informa al navegador que se espera establecer una conexión con el origen del recurso especificado, lo que puede mejorar el rendimiento al anticipar la conexión.
Ejemplo:
<link rel="preconnect" href="https://cdn.example.com">
Lenguaje del código: HTML, XML (xml)- dns-prefetch: Se utiliza para que el navegador realice una resolución anticipada del DNS del recurso especificado, lo que puede mejorar la velocidad de carga de los recursos.
Ejemplo:
<link rel="dns-prefetch" href="https://cdn.example.com">
Lenguaje del código: HTML, XML (xml)- preload: Permite cargar un recurso específico en segundo plano, antes de que sea necesario, mejorando así el rendimiento al reducir el tiempo de carga.
Ejemplo:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Lenguaje del código: HTML, XML (xml)- prefetch: Similar a “preload”, pero con una menor prioridad, se utiliza para cargar en segundo plano los recursos que se utilizarán en la siguiente navegación o en páginas futuras.
Ejemplo:
<link rel="prefetch" href="imagen-futura.jpg">
Lenguaje del código: HTML, XML (xml)Estos son algunos ejemplos de valores que se pueden utilizar con el atributo “rel”. Cada valor tiene un propósito específico y puede ser utilizado para optimizar el rendimiento, la apariencia y la funcionalidad del sitio web.
Atributo “type”
El atributo “type” especifica el tipo MIME del recurso externo. Aunque en muchos casos los navegadores pueden detectar automáticamente el tipo de recurso, es una buena práctica incluirlo para mejorar la compatibilidad y el rendimiento.
Ejemplo:
<link rel="stylesheet" href="estilos.css" type="text/css">
Lenguaje del código: HTML, XML (xml)En este ejemplo, se especifica el tipo MIME como “text/css”, indicando que el recurso externo es una hoja de estilo CSS.
Atributo “media”
El atributo “media” permite aplicar el recurso externo solo a ciertos medios o dispositivos, como pantallas, impresoras o dispositivos con características específicas.
Ejemplo:
<link rel="stylesheet" href="estilos-movil.css" media="(max-width: 768px)">
Lenguaje del código: HTML, XML (xml)En este ejemplo, la hoja de estilo “estilos-movil.css” se aplicará solo cuando el ancho de la pantalla sea igual o inferior a 768 píxeles.
Atributos adicionales (si los hay)
Otros atributos menos comunes que se pueden utilizar con la etiqueta <link> incluyen: “sizes”, “crossorigin”, “integrity”, “referrerpolicy”, entre otros.
Estos atributos pueden ser útiles en casos específicos, pero no se tratarán en detalle en este artículo.
Principales usos de la etiqueta <link>
La etiqueta <link> tiene diversos usos en el desarrollo web. A continuación, se presentan los principales usos junto con ejemplos:
Conectar hojas de estilo CSS
Uno de los usos más comunes de la etiqueta <link> es vincular hojas de estilo CSS externas al documento HTML. Esto permite separar la estructura del contenido (HTML) de su presentación visual (CSS).
Ejemplo:
<link rel="stylesheet" href="estilos.css" type="text/css">
Lenguaje del código: HTML, XML (xml)Establecer íconos de favoritos y aplicaciones
La etiqueta <link> se utiliza para establecer íconos de favoritos (también conocidos como favicon) y de aplicaciones en dispositivos móviles.
Ejemplo:
<!-- Favicon para navegadores modernos -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Ícono para dispositivos Apple -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Lenguaje del código: HTML, XML (xml)Precargar recursos
La etiqueta <link> también se utiliza para precargar recursos específicos, como imágenes, fuentes o archivos multimedia, antes de que sean necesarios. Esto puede mejorar el rendimiento y la experiencia del usuario.
Ejemplo:
<!-- Precargar una imagen -->
<link rel="preload" href="imagen-destacada.jpg" as="image">
<!-- Precargar una fuente -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Lenguaje del código: HTML, XML (xml)Usar fuentes web
La etiqueta <link> permite vincular fuentes web externas, lo que facilita el uso de tipografías personalizadas en el sitio web.
Ejemplo:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" type="text/css">
Lenguaje del código: HTML, XML (xml)Otros usos comunes
La etiqueta <link> también se utiliza para mejorar el rendimiento y la funcionalidad del sitio web al establecer conexiones anticipadas, realizar resoluciones de DNS en segundo plano y cargar recursos futuros, entre otros.
Ejemplos:
<!-- Preconectar a un dominio CDN -->
<link rel="preconnect" href="https://cdn.example.com">
<!-- Realizar la resolución anticipada del DNS -->
<link rel="dns-prefetch" href="https://cdn.example.com">
<!-- Cargar recursos futuros en segundo plano -->
<link rel="prefetch" href="imagen-futura.jpg">
Lenguaje del código: HTML, XML (xml)Estos son algunos de los principales usos de la etiqueta <link> en el desarrollo web. Al utilizar correctamente esta etiqueta y sus atributos, los desarrolladores pueden mejorar la apariencia, funcionalidad y rendimiento de sus sitios web.
Ejemplos de código
A continuación, se presentan ejemplos de código que ilustran el uso de la etiqueta <link> en diferentes contextos:
Ejemplo básico de vinculación de una hoja de estilo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de vinculación de hoja de estilo</title>
<link rel="stylesheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>¡Hola mundo!</h1>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la etiqueta <link> para vincular una hoja de estilo CSS externa llamada “estilos.css” al documento HTML.
Ejemplo de establecimiento de un ícono de favoritos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de ícono de favoritos</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>¡Hola mundo!</h1>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la etiqueta <link> para establecer un ícono de favoritos (favicon) utilizando el archivo “favicon.ico”.
Ejemplo de precarga de recursos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de precarga de recursos</title>
<link rel="preload" href="imagen-destacada.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
<h1>¡Hola mundo!</h1>
<img src="imagen-destacada.jpg" alt="Imagen destacada">
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utilizan dos etiquetas <link> con el atributo ‘rel’ establecido en “preload” para precargar una imagen y una fuente antes de que sean necesarias en la página.
Ejemplo de uso de fuentes web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de fuentes web</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" type="text/css">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>¡Hola mundo!</h1>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la etiqueta <link> para vincular una fuente web externa de Google Fonts llamada “Roboto”. Luego, en la etiqueta <style> se aplica la fuente al contenido del documento HTML.
Buenas prácticas y consejos para el uso de la etiqueta <link>
Al utilizar la etiqueta <link> en el desarrollo web, es importante seguir algunas buenas prácticas y consejos para garantizar un rendimiento y compatibilidad óptimos:
Colocar las etiquetas <link> dentro del elemento <head>
Las etiquetas <link> deben colocarse siempre dentro del elemento <head> del documento HTML. Esto garantiza que los navegadores puedan procesar correctamente los recursos vinculados.
Especificar el atributo ‘type’
Aunque en muchos casos los navegadores pueden detectar automáticamente el tipo de recurso vinculado, es una buena práctica incluir el atributo ‘type‘ para mejorar la compatibilidad y el rendimiento.
Ejemplo:
<link rel="stylesheet" href="estilos.css" type="text/css">
Lenguaje del código: HTML, XML (xml)Utilizar rutas relativas y absolutas correctamente
Al vincular recursos externos, es importante utilizar rutas relativas y absolutas de manera adecuada. Las rutas relativas son más fáciles de mantener, pero las rutas absolutas pueden ser útiles cuando se necesita vincular recursos de otros dominios.
Ejemplo:
<!-- Ruta relativa -->
<link rel="stylesheet" href="estilos.css">
<!-- Ruta absoluta -->
<link rel="stylesheet" href="https://example.com/css/estilos.css">
Lenguaje del código: HTML, XML (xml)Limitar la cantidad de recursos vinculados
Vincular una gran cantidad de recursos externos puede afectar negativamente el rendimiento del sitio web, ya que el navegador debe realizar múltiples solicitudes para cargar los recursos.
Por tanto, es recomendable limitar la cantidad de recursos vinculados y combinarlos cuando sea posible (por ejemplo, uniendo varias hojas de estilo en una sola).
Utilizar técnicas de optimización de rendimiento
La etiqueta <link> ofrece varias funciones que pueden mejorar el rendimiento del sitio web, como ‘preconnect’, ‘dns-prefetch’, ‘preload’ y ‘prefetch’.
Aprovechar estas funciones puede mejorar la velocidad de carga y la experiencia del usuario.
Ejemplo:
<!-- Preconectar a un dominio CDN -->
<link rel="preconnect" href="https://cdn.example.com">
<!-- Precargar una fuente -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Lenguaje del código: HTML, XML (xml)Al seguir estas buenas prácticas y consejos, los desarrolladores pueden asegurarse de que la etiqueta <link> se utilice de manera efectiva para optimizar y mejorar la apariencia, funcionalidad y rendimiento de sus sitios web.
Referencias
A continuación, se presenta una lista de referencias y recursos útiles relacionados con la etiqueta <link> de HTML5:
- Mozilla Developer Network (MDN). HTML – Elemento: link.
- World Wide Web Consortium (W3C). HTML5 – 4.2.5. The link element.
Estas referencias proporcionan información adicional y detallada sobre la etiqueta <link> y sus atributos, así como sobre las buenas prácticas y técnicas de optimización del rendimiento.
Consultar estos recursos puede ayudar a ampliar y mejorar el conocimiento en el desarrollo web y el uso de la etiqueta <link>.