¿Para qué se usa la etiqueta <link>?

La etiqueta <link> se utiliza para establecer enlaces entre el documento actual y otros recursos.

Casos principales de uso:

• Conexión de hojas de estilo CSS: La aplicación más común. Permite enlazar archivos CSS externos para estilizar la página.

  <link rel="stylesheet" href="/css/style.css">
  

• Conexión de fuentes: Por ejemplo, Google Fonts.

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

• Conexión de iconos (Favicon): Cambio del icono estándar de la pestaña del navegador.

  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
  

• Indicación de enlace canónico: Ayuda a los motores de búsqueda a determinar la versión principal de la página en caso de contenido duplicado.

  <link rel="canonical" href="https://example.com/page">
  

• Indicación de versiones alternativas del documento: Por ejemplo, para diferentes idiomas.

  <link rel="alternate" hreflang="en" href="https://example.com/en/page">
  

• Pre-carga de recursos (preload, prefetch, preconnect, prerender): Mejora del rendimiento mediante la carga anticipada o establecimiento de conexiones.

  <link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preconnect" href="https://api.example.com">
  <link rel="prefetch" href="/data/next-page.json">
  <link rel="prerender" href="https://example.com/next-page">
  

Los atributos clave incluyen rel (relación con el documento actual), href (URL del recurso), type (tipo MIME) y media (consulta de medios).