Te explicamos cómo usar correctamente la Etiqueta link HTML para conectar recursos externos a tu página.
Con la etiqueta link HTML se conectan recursos externos a un documento HTML. Lo más común son las hojas de estilo (CSS), íconos, fuentes y otros archivos que ayudan a que la página se vea mejor.
En este artículo, hablaremos sobre la estructura de la etiqueta link HTML, sus atributos y cómo usarla correctamente en diferentes tareas.
Todo sobre la Etiqueta Link HTML
¿Qué es la etiqueta link HTML y para qué sirve?
La etiqueta <link> se coloca siempre dentro del <head> del documento. Su función es indicar al navegador qué recursos externos debe cargar antes de mostrar la página.
Si la pones fuera de <head>, los estilos o fuentes pueden cargarse tarde y provocar el parpadeo del contenido sin formato.
Con la etiqueta link HTML puedes:
- Conectar hojas de estilo CSS.
- Agregar un favicon.
- Importar fuentes externas (ej. Google Fonts).
- Precargar recursos (fuentes, imágenes, scripts).
- Definir relaciones SEO y metadatos como
canonical,alternate,prevonext.
Atributos de la etiqueta link HTML
La etiqueta <link> es una etiqueta simple, no necesita una etiqueta de cierre. Toda la información se le pasa al navegador mediante atributos.
Los atributos principales que veremos son rel y href, type, media, crossorigin y sizes. En realidad, hay muchos más, pero hemos seleccionado los más comunes.
| Atributo | Descripción | Ejemplo |
|---|---|---|
href | Ruta del recurso externo. | <link href="css/style.css"> |
rel | Relación con el recurso. | <link rel="stylesheet" href="style.css"> |
type | Tipo de archivo (opcional). | <link rel="icon" type="image/x-icon"> |
media | Condición de uso (pantalla, impresión, etc.). | <link rel="stylesheet" media="print"> |
sizes | Tamaños de íconos. | <link rel="icon" sizes="32x32"> |
crossorigin | Control de datos enviados en recursos externos. | <link rel="icon" crossorigin="anonymous"> |
Atributo href: dónde buscar el archivo
Con este atributo todo es sencillo: indica la ruta al archivo que se está conectando. Por ejemplo, si tu archivo CSS está en la carpeta css, la ruta sería:
<link href="css/style.css">Este mismo atributo se usa para conectar fuentes externas. Normalmente, eliges la fuente que necesitas en una biblioteca y esta te proporciona la URL para conectarla. Esta URL suele tener este aspecto:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Aquí también se utiliza el atributo rel, del que hablaremos en la siguiente sección.
Atributo rel: qué estamos conectando
El siguiente atributo es rel. Le explica al navegador qué tipo de relación hay entre el documento HTML y el archivo indicado en href. Sin esto, el navegador no entenderá que estás conectando estilos y podría ignorar <link>.
Para conectar CSS, usa:
<link rel="stylesheet" href="css/style.css">Valores clave de rel
Visuales y recursos
stylesheet: hojas de estilo CSS.icon: favicon del sitio.alternate stylesheet: estilos alternativos (ej. temas).
Rendimiento
preload: carga prioritaria de fuentes, imágenes o scripts.prefetch: carga anticipada en segundo plano.preconnect: conexión previa a otro servidor.dns-prefetch: resolución anticipada de dominios.prerender: renderizado completo de la siguiente página.
SEO y metadatos
canonical: evita contenido duplicado, indicando la URL principal.alternate: versiones alternativas (ej. idiomas conhreflang).prevynext: navegación entre páginas en serie.author,help,search: vínculos adicionales que aportan semántica.
Atributo type: especificamos el tipo de archivo
En este atributo le explicamos al navegador qué tipo de archivo vamos a conectar.
Para una hoja de estilo, usa:
<link rel="stylesheet" href="css/style.css" type="text/css">Y para un favicon:
<link rel="icon" href="favicon.ico" type="image/x-icon">En general, en la mayoría de los casos no es necesario escribir el atributo type: los navegadores modernos determinan el tipo de archivo por la extensión. Por ejemplo, si conectas un archivo CSS y escribes:
<link rel="stylesheet" href="style.css">El navegador entenderá que es una hoja de estilo, incluso si no has especificado type="text/css". Lo mismo ocurre con un favicon con la extensión .ico.
Pero hay situaciones en las que es mejor especificar type:
- Te preocupas por la compatibilidad con navegadores antiguos. Algunos de ellos no determinan el tipo de archivo por la extensión. Especialmente las versiones antiguas de Internet Explorer.
- El archivo tiene una extensión no estándar o no tiene ninguna. En este caso, el navegador puede no adivinar lo que quieres.
- El código se integrará en otros sistemas o plataformas. En algunos CMS o constructores de sitios web es necesario especificar explícitamente los tipos.
En otros casos, puedes omitir
typesin problemas. El código seguirá funcionando.
Atributo sizes: tamaño del ícono
El atributo sizes adapta el favicon a diferentes dispositivos. Se usa junto con <link rel="icon">. Le indica al navegador para qué tamaños de pantalla es adecuada una ícono en particular.
El valor se indica en formato ancho x alto, por ejemplo:
16×16: ícono pequeña para navegadores antiguos;32×32: tamaño universal para la mayoría de los dispositivos;48×48: para pantallas de alta resolución;any: se usa con íconos SVG vectoriales, que se pueden escalar a cualquier tamaño.
En el código se ve así:
<link rel="icon" href="images/favicon-small.png" sizes="16x16" type="image/png">
<link rel="icon" href="images/favicon-medium.png" sizes="32x32" type="image/png">
<link rel="icon" href="images/favicon-large.png" sizes="48x48" type="image/png">
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">Atributo media: conectamos estilos según la situación
A veces es necesario que el sitio se vea diferente en diferentes situaciones. Por ejemplo, unos estilos para la pantalla de un ordenador, otros para un teléfono y otros para imprimir. Para hacer esto, escribimos los estilos en diferentes archivos, los conectamos y añadimos el atributo media a la etiqueta link HTML. Esto le indica al navegador cuándo usar un archivo CSS concreto.
El atributo tiene varios valores:
all: los estilos funcionan siempre (este es el valor predeterminado).screen: los estilos funcionan cuando el usuario utiliza un dispositivo con pantalla, es decir, teléfono, tableta, ordenador de sobremesa, etc.print: se activa cuando el usuario imprime la página.speech: para lectores de pantalla (dispositivos que leen el texto en voz alta para personas con problemas de visión).screen and (max-width: 768px): se aplica solo a pantallas con una anchura inferior a la especificada.
La sintaxis es la siguiente:
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/print.css" media="print" type="text/css">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 768px)" type="text/css">
<link rel="stylesheet" href="css/desktop.css" media="screenAtributo crossorigin: decidimos si transmitir datos a dominios externos
A veces conectamos recursos no desde nuestro sitio, sino desde otro dominio. Esto se conoce como solicitudes entre dominios. El atributo crossorigin le indica al navegador si es necesario transmitir datos de cuenta: cookies, encabezados de autorización, etc., en dicha solicitud.
Los valores del atributo son:
anonymous: la solicitud se realiza sin datos de cuenta. El navegador no enviará cookies, certificados ni encabezados de autenticación HTTP básica. Este es el valor predeterminado.use-credentials: la solicitud se realiza enviando datos de cuenta.
Ejemplo de conexión de un ícono desde otro dominio:
<link rel="icon" href="https://example.com/favicon.png" type="image/png" crossorigin="anonymous">En la mayoría de los casos, basta con usar anonymous o no especificar el atributo: los navegadores funcionan con él de forma predeterminada.
Precarga de archivos
Normalmente, el navegador carga todos los recursos en el orden en que están escritos en el código. Pero podemos indicar previamente qué recursos queremos cargar primero. Esto se llama precarga (preload). La precarga forma parte de la optimización del sitio, gracias a ella la página se carga más rápido.
Para activar la precarga, usamos el atributo rel="preload", que le indica al navegador que cargue el recurso previamente, y el atributo as, que indica qué estamos cargando: una imagen, una fuente, un script, etc.
<link rel="preload" href="fonts/main.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="image.jpg" as="image">En el primer ejemplo, le decimos al navegador que cargue primero la fuente, y en el segundo, la imagen.
Esto mejora el Core Web Vitals, clave tanto para SEO como para experiencia de usuario.
Otros valores útiles del atributo rel
El atributo rel puede afectar al orden de carga de otras maneras:
prefetch: carga el archivo en segundo plano después de la carga principal de la página. Esto se hace si esperamos alguna acción del usuario (por ejemplo, un cambio a la siguiente página): el archivo estará en la caché y el visitante podrá utilizarlo inmediatamente.prerender: carga completamente la siguiente página en segundo plano para que se abra instantáneamente al cambiar.preconnect: si es necesario establecer una conexión con otro servidor, el navegador lo hará previamente. Esto se debe a que los servidores necesitan intercambiar información al conectarse. Normalmente, esto lleva fracciones de segundo, pero si el canal está sobrecargado, esto puede ralentizar notablemente la carga.dns-prefetch: acelera la determinación de la dirección IP de un dominio externo. Cuando el navegador necesita cargar un recurso desde otro sitio web, primero debe conocer la dirección IP de ese dominio. Para ello, realiza una solicitud DNS. Este proceso se llama resolución de nombres de dominio y puede tardar varias decenas de milisegundos. Si hay muchos de estos recursos, el retraso se hace notable.dns-prefetchpermite hacer todo esto previamente.
Errores comunes al conectar estilos o íconos
- Valor
preloadsin el atributoas
Si especificas rel="preload", pero no añades as, el navegador no entenderá qué tipo de recurso quieres precargar y simplemente no lo hará. Además, es importante especificar con precisión el tipo: as="font" para las fuentes, as="image" para las imágenes, etc.
- Precarga de archivos inútiles
Si conectas un archivo mediante preload, pero luego no lo usas en ningún sitio, el navegador perderá tiempo y tráfico innecesariamente. Esto incluso puede ralentizar la carga de la página. Carga solo lo que realmente necesites.
- Demasiados archivos para precargar
Si añades demasiados recursos a preload (por ejemplo, todas las fuentes del sitio), empezarán a cargarse simultáneamente y se interferirán entre sí. Usa preload solo para los elementos realmente importantes.
Para seguir aprendiendo sobre la etiqueta link HTML y sus atributos, te recomiendo consultar la documentación de Mozilla.
Quiero comentar algo