La Etiqueta LINK

Se utiliza para establecer relaciones con recursos externos de un documento HTML.

La etiqueta <link> se utiliza en el <head> de un documento HTML para establecer relaciones con recursos externos. Es fundamental para cargar:

  • Hojas de estilo CSS.

  • Íconos (favicons).

  • Fuentes web (como Google Fonts).

  • Recursos pre-cargados (optimización de rendimiento).

  • Metadata (ej: feeds RSS).

Características clave:

  • Es una etiqueta autocerrada (no tiene contenido interno).

  • Requiere el atributo rel para definir la relación con el recurso.

  • Se usa exclusivamente en el <head> del documento.

Sintaxis básica

<head>
  <link rel="tipo-de-relacion" href="ruta-del-recurso">
</head>

Atributos principales

Atributo Descripción
rel Obligatorio. Define la relación del recurso (ej: stylesheet, icon).
href Obligatorio. Ruta al archivo externo (URL absoluta o relativa).
type Tipo MIME del recurso (ej: text/css para CSS). Opcional pero recomendado.
media Especifica para qué dispositivo/media se aplica el recurso (ej: print).
sizes Tamaño del ícono (ej: 32x32). Usado con rel="icon".
crossorigin Habilita solicitudes CORS (útil para fuentes externas).

Casos de uso comunes

Vincular una hoja de estilo CSS

La forma más común de usar <link>:

<head>
  <link rel="stylesheet" href="estilos.css" type="text/css">
</head>

Agregar un favicon (ícono de página)

<head>
  <!-- Ícono estándar -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  
  <!-- Ícono para dispositivos Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  
  <!-- Ícono en formato SVG moderno -->
  <link rel="icon" type="image/svg+xml" href="icon.svg">
</head>

Pre-cargar recursos críticos (mejora de rendimiento)

<head>
  <!-- Pre-carga una fuente -->
  <link rel="preload" href="fuente.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- Pre-carga una imagen importante -->
  <link rel="preload" href="hero-image.jpg" as="image">
</head>

Cargar fuentes externas (Google Fonts)

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
</head>

Vincular un feed RSS

<head>
  <link rel="alternate" type="application/rss+xml" href="feed.xml" title="Feed RSS de mi blog">
</head>

Ejemplo práctico completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  
  <!-- Hojas de estilo -->
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 600px)">
  
  <!-- Fuentes -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
  
  <!-- Favicon -->
  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
  <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
  
  <!-- Pre-carga -->
  <link rel="preload" href="img/hero-banner.webp" as="image">
</head>
<body>
  <!-- Contenido de la página -->
</body>
</html>

Errores comunes

Colocar <link> en el <body>:

Siempre debe estar en el <head>.

Olvidar el atributo rel:

<!-- Incorrecto -->
<link href="estilos.css">

Rutas incorrectas en href:

Verifica que la ruta al recurso sea correcta.

Mejores prácticas

Orden de carga:

Coloca los recursos críticos primero (ej: CSS antes de fuentes).

Usa preconnect para recursos externos:

Mejora el rendimiento al pre-conectar con servidores de terceros:

<link rel="preconnect" href="https://cdn.example.com">

Optimiza tipos de archivo:

Usa formatos modernos como .webp para imágenes o .woff2 para fuentes.

Mantén consistencia:

Usa rutas relativas para recursos locales y absolutas para externos.

Atributos avanzados

integrity:

Verifica la integridad del recurso (usado con CDNs):

<link rel="stylesheet" href="https://cdn.example.com/style.css" integrity="sha384-...">

disabled:

<link rel="stylesheet" href="temas/oscuro.css" disabled>

Desactiva una hoja de estilo hasta que sea necesaria:

Usos menos conocidos

Manifiestos de aplicaciones web:

<link rel="manifest" href="site.webmanifest">

Vincular una hoja de estilo para impresión:

<link rel="stylesheet" href="print.css" media="print">

Señalizar la página canónica (SEO):

<link rel="canonical" href="https://tusitio.com/url-original">

Con este tutorial, podrás aprovechar al máximo la etiqueta <link> para optimizar el rendimiento, diseño y funcionalidad de tus proyectos web. ¡Experimenta con sus diferentes aplicaciones!