<link>
Metadata del documento
Void element que vincula recursos externos al documento HTML. Sus usos principales son stylesheet (cargar CSS), icon (favicon), canonical (SEO), y preload/preconnect (optimización de rendimiento). Va siempre dentro de <head>.
<link> es un void element (sin etiqueta de cierre) que establece relaciones entre el documento HTML y recursos externos. Es el puente entre el HTML y todos los recursos que el documento necesita pero que no están incrustados en él: hojas de estilo CSS, el ícono de la pestaña (favicon), versiones alternativas del documento en otros idiomas, la URL canónica para SEO, fuentes de Google Fonts, o recursos a precargar para mejorar el rendimiento.
El atributo rel (relationship, relación) es el eje central de <link>: declara cuál es la relación entre el documento actual y el recurso referenciado por href. Sin rel, el navegador no sabe qué hacer con el recurso enlazado. Con él, puede tomar decisiones precisas: bloquear el renderizado hasta que el CSS esté listo, precalentar la conexión a un servidor externo antes de que el usuario lo necesite, o comunicarle a Google cuál es la URL principal de un contenido publicado en múltiples variantes.
<link> no produce contenido visible. Como <meta>, su efecto es de configuración y carga de recursos: el navegador lee los <link> del <head> antes de renderizar el cuerpo, y actúa en consecuencia. El <link rel="stylesheet"> es quizás el más importante porque bloquea el renderizado — el navegador no muestra el cuerpo hasta que el CSS esté descargado y procesado, para evitar el “flash de contenido sin estilo” (FOUC). Esa es la razón por la que los <link> al CSS van siempre en el <head> y no al final del <body>.
Cómo funciona
El navegador procesa los <link> del <head> al parsear el documento. Según el rel, actúa de forma diferente:
stylesheet→ inicia la descarga del CSS y bloquea el renderizado del cuerpo hasta que está disponible.icon→ descarga el favicon con baja prioridad y lo muestra en la pestaña.canonical→ comunica a los buscadores cuál es la URL preferida del contenido.preload/preconnect→ inician operaciones de red anticipadas para reducir la latencia.
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="estilos.css" />
<link rel="icon" href="favicon.ico" />
<link rel="canonical" href="https://cafearoma.com/menu" />
</head>Modelo de contenido
<link> es un void element — no tiene etiqueta de cierre, no puede contener nada. Va exclusivamente dentro de <head> (salvo raras excepciones de rel="stylesheet" dinámico con JavaScript, que es un patrón avanzado).
Atributos y usos por rel
rel="stylesheet" — hoja de estilos CSS
El uso más común de <link>. Vincula una hoja de estilos CSS externa al documento.
<link rel="stylesheet" href="estilos.css" />href acepta rutas relativas o absolutas, igual que el href de un <a>. El navegador inicia la descarga del CSS en cuanto encuentra este <link> y bloquea el renderizado del <body> hasta que el CSS esté disponible. Por eso va en el <head> — para que el CSS esté listo cuando el navegador empiece a pintar el contenido.
type="text/css" es innecesario en HTML5. Es el valor implícito para rel="stylesheet". Escribirlo no causa error pero no aporta nada.
rel="icon" — favicon
Define el ícono de la página: el pequeño gráfico que aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda junto al título.
<link rel="icon" href="favicon.ico" />
<!-- o con formato moderno: -->
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
<link rel="icon" href="favicon.png" type="image/png" sizes="32x32" />El formato .ico es el más compatible (soportado desde IE). Los formatos .svg y .png son más modernos y permiten favicons nítidos en pantallas de alta densidad (Retina).
Sin favicon: el navegador busca automáticamente /favicon.ico en la raíz del dominio. Si no existe, muestra un ícono genérico del navegador — señal visual de que el sitio está “sin terminar”.
rel="preload" — precarga de recursos críticos
Indica al navegador que descargue un recurso con alta prioridad antes de que sea necesario, sin bloquearlo. Útil para fuentes, imágenes críticas o scripts necesarios en el primer render.
<!-- Precargar una fuente para evitar el flash de texto sin estilo (FOUT) -->
<link rel="preload" href="fuente.woff2" as="font" type="font/woff2" crossorigin />
<!-- Precargar una imagen hero crítica -->
<link rel="preload" href="hero.webp" as="image" />El atributo as es obligatorio con preload — declara el tipo de recurso (font, image, script, style, fetch) para que el navegador aplique la prioridad correcta y los headers de seguridad adecuados.
rel="preconnect" — precalentamiento de conexión
Inicia la conexión TCP/TLS a un servidor externo antes de que el recurso sea solicitado. Elimina la latencia de establecimiento de conexión cuando el recurso finalmente se pide.
<!-- Preconectar al servidor de Google Fonts antes de que se cargue la fuente -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />Útil para CDNs, APIs externas, servidores de fuentes o cualquier recurso de un dominio distinto al propio. No descarga el recurso — solo establece la conexión. Se complementa con preload para los recursos más críticos.
rel="canonical" — URL principal para SEO
Indica a los motores de búsqueda cuál es la URL preferida (canónica) de este contenido, cuando el mismo contenido es accesible desde varias URLs distintas.
<!-- En cafearoma.com/menu?ref=instagram, el canonical apunta a la URL limpia -->
<link rel="canonical" href="https://cafearoma.com/menu" />Cuándo usarlo: cuando el mismo contenido aparece en múltiples URLs (con y sin www, con parámetros de campaña ?utm_source=..., con y sin index.html, con filtros de paginación). Sin canonical, Google puede dividir la autoridad SEO entre las variantes en lugar de consolidarla en la URL principal. Espeja la lección metadata-02-head-canonico.md del módulo Metadata.
rel="alternate" — versiones alternativas del documento
Declara versiones alternativas del documento: en otro idioma (hreflang), en otro formato (RSS/Atom), o para otro medio.
<!-- Versión en inglés del mismo contenido -->
<link rel="alternate" href="https://example.com/en/menu" hreflang="en" />
<!-- Feed RSS del blog -->
<link rel="alternate" href="/feed.xml" type="application/rss+xml" title="RSS" />Accesibilidad
<link> no tiene rol en el árbol de accesibilidad — no produce contenido que los lectores de pantalla lean directamente. Su impacto indirecto es grande: el CSS vinculado con rel="stylesheet" puede afectar el foco visible, el contraste, el tamaño de texto — todos factores de accesibilidad visual. El favicon no tiene impacto en accesibilidad.
Notas, gotchas e interacción
rel="stylesheet"bloquea el renderizado. Si el servidor tarda en entregar el CSS, el usuario ve una pantalla en blanco. Optimizá la entrega del CSS con compresión (gzip/brotli) y caché de largo plazo. No es un problema de<link>— es de infraestructura, pero es bueno entender por qué el CSS es bloqueante.preloadrequiereaso se ignora. Sin el atributoas, el navegador no sabe cómo priorizar el recurso y puede no descargarlo anticipadamente.crossorigines necesario para fuentes preconnect/preload. Las fuentes se cargan en modo CORS. Sincrossorigin, el navegador hace la solicitud de preload sin credenciales y luego hace otra con credenciales al cargar la fuente — duplicando la descarga.- El orden de los
<link>importa. El CSS bloquea el render — ponelo primero para que empiece a descargarse cuanto antes. El favicon no es crítico — puede ir después. - Cicatriz de este sitio (A.0.5): los efectos de
<link>no se ven en el sandbox/preview del ejercicio (el favicon no carga,estilos.cssno existe en el sandbox). Los efectos reales se aprecian con el archivo en el navegador.
Vigente / legacy
<link> es completamente vigente. El atributo rev (relación inversa) es legacy desde HTML5. <link> con type="text/css" es redundante pero no legacy — simplemente innecesario. El uso de <style> inline en lugar de <link rel="stylesheet"> para estilos de producción es desaconsejado (dificulta el caché), pero no es legacy técnicamente.
Aprendelo en el recorrido
Esta entrada complementa las lecciones Los elementos del head y El head canónico completo del módulo Metadata, donde <link rel="stylesheet"> y <link rel="icon"> se practican como parte del head canónico, y <link rel="canonical"> se detalla en la segunda lección del módulo.