Referencia de etiquetas

Etiqueta link en HTML: CSS y relaciones entre recursos

La etiqueta <link> expresa una relación entre el documento HTML y otro recurso, como una hoja de estilos o un icono. Úsala para compartir un archivo CSS entre páginas, indicar el icono del sitio o declarar otras relaciones desde la cabecera. Su función depende de rel: no crea por sí sola un enlace visible para navegar. HTML Living Standard: <link>.

Ejemplo mínimo: enlazar CSS externo

Esta línea, dentro de <head>, conecta una hoja de estilos:

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

Para comprobarla, crea una carpeta prueba-minima, guarda este documento como index.html y crea dentro una carpeta css:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Primer CSS externo</title>
    <link rel="stylesheet" href="/css/estilos.css">
  </head>
  <body>
    <p>Este párrafo recibe sus estilos de otro archivo.</p>
  </body>
</html>

En css/estilos.css, escribe:

p { color: #166534; }

Sirve prueba-minima como raíz de un servidor HTTP local. Si tienes Python 3 instalado, ejecuta python -m http.server 8000 --directory prueba-minima desde la carpeta que la contiene y abre http://localhost:8000/. Detén ese servidor con Ctrl+C. Servidor de archivos de Python.

El párrafo se verá verde si el archivo existe, se descarga y sus reglas se aplican. Cambia el color en el CSS y recarga para comprobarlo; si retiras <link>, el texto permanece y pierde ese estilo. La barra inicial de /css/estilos.css parte de la raíz del sitio HTTP: abrir el HTML mediante file: no reproduce esa ruta.

Sintaxis y contexto válido

<link> es un elemento vacío: no contiene texto ni lleva </link>. En los usos de esta guía escribe rel para la relación y href para la dirección. Colócalo normalmente en la cabecera <head>.

Algunas relaciones admiten otros contextos. stylesheet está permitida en el cuerpo donde se admite contenido de frase; si combinas valores de rel, todos deben permitirlo. icon y canonical no tienen esa autorización. Comprueba cada relación antes de moverla a <body>. El uso con microdatos tiene reglas propias y no es necesario para conectar CSS. Contextos de <link> y tipos de relación.

Caso práctico: una página con CSS, icono e impresión

Crea otra carpeta, prueba-link, con estos cuatro archivos:

prueba-link/
  index.html
  icono.png
  css/
    estilos.css
    impresion.css

Para icono.png, dibuja con un editor de imágenes un cuadrado azul de 32 × 32 píxeles con un pequeño cuadrado blanco en el centro y expórtalo como PNG. Será un recurso propio del ejemplo; cambiar la extensión de otro archivo no lo convierte en PNG.

Guarda este documento en index.html:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Taller de lectura</title>
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/impresion.css" media="print">
    <link rel="icon" href="icono.png" type="image/png" sizes="32x32">
  </head>
  <body>
    <main>
      <h1>Taller de lectura</h1>
      <p>Nos reunimos los sábados a las 11:00 en la biblioteca.</p>
      <p class="aviso-impresion">Conserva esta hoja como recordatorio.</p>
    </main>
  </body>
</html>

Contenido de css/estilos.css:

body {
  margin: 0;
  padding: 1.5rem;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  background: #eef6ff;
  color: #172b3a;
}
main { max-width: 40rem; margin-inline: auto; }
h1 { color: #123e64; }
.aviso-impresion { display: none; }

Contenido de css/impresion.css:

body { background: white; color: black; padding: 0; }
h1 { color: black; }
.aviso-impresion { display: block; }

Sirve esta carpeta como raíz con tu servidor local; con Python 3, usa python -m http.server 8000 --directory prueba-link después de detener el servidor anterior. Abre http://localhost:8000/.

En pantalla verás el título azul sobre un fondo claro. El navegador puede mostrar el icono en la pestaña; no aparece dentro del contenido. Abre las herramientas de desarrollo, entra en Red / Network y recarga: verifica las URLs y respuestas de ambos CSS y del PNG. Una respuesta nueva correcta será 200; con caché puede aparecer otro estado o indicarse que procede de memoria.

Abre la vista previa de impresión: el fondo y el título pasan a blanco y negro, y aparece el recordatorio. media="print" limita la aplicación de esa hoja a impresión; el navegador puede descargarla antes, así que verla en Red no demuestra que se aplique a la pantalla. Medios aplicables.

Si retiras el enlace de impresión, deja de aparecer el recordatorio al imprimir. Si quitas solo media="print", esas reglas también se aplican en pantalla. Si cambias el href por un archivo ausente, la etiqueta no lo crea ni repara la ruta. Ambos ejemplos funcionan sin JavaScript.

Rutas y atributos según la relación

Sin una base declarada, href="css/estilos.css" se resuelve desde la carpeta de la URL del documento. En /taller/index.html apunta a /taller/css/estilos.css; /css/estilos.css apunta a la raíz. Si hay <base href>, revisa cómo cambia el punto de partida.

Atributo	Uso relevante
`rel`	Identifica la relación, como `stylesheet` o `icon`. Admite palabras separadas por espacios cuando la combinación tiene sentido.
`href`	URL del recurso. Se usa `href`, no `src`.
`media`	Consulta de medios, como `print`. Sin condición, la hoja se aplica a todos los medios.
`type`	Pista del tipo MIME, como `image/png`. Para CSS suele omitirse; no corrige la respuesta del servidor.
`sizes`	Tamaños reales del icono, como `32x32`; `any` describe un icono vectorial escalable. No redimensiona el archivo.

Consulta la referencia de atributos de MDN. id, class y lang son atributos globales. color y background en los ejemplos son propiedades CSS; consultar document.querySelector("link").href con JavaScript lee una propiedad DOM que devuelve la URL resuelta.

Canonical, preload y preconnect

canonical identifica la URL preferida del documento, por ejemplo cuando varias direcciones ofrecen contenido equivalente. No redirige al visitante ni garantiza posiciones o indexación. Este ejemplo solo ilustra la sintaxis; sustituye la URL por la real y evita canónicas duplicadas o que apunten a contenido distinto:

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

La relación está definida en el estándar HTML.

preload adelanta la descarga de un recurso que se necesitará pronto. Requiere un as correcto, como style, font o image; descargar CSS no equivale a aplicarlo. Necesitarías también rel="stylesheet". Reserva esta técnica para recursos críticos descubiertos tarde y mide el resultado: precargar todo compite por ancho de banda.

Si precargas una fuente con as="font", usa crossorigin="anonymous", incluso para una fuente del mismo origen. La URL, el destino y el modo CORS/credenciales deben coincidir con la petición que consumirá el recurso. Para otro origen, el servidor debe permitir CORS; el atributo no concede ese permiso. MDN: preload y CORS.

preconnect anticipa la conexión con un origen, sin descargar un archivo específico. Puede ayudar con un origen externo crítico que se usará pronto; no aporta esa ventaja para el origen de la propia página. Evita añadirlo a todos los dominios y mide antes de conservarlo. MDN: preconnect.

crossorigin configura peticiones CORS: anonymous no envía credenciales a otros orígenes y use-credentials las incluye. integrity permite verificar el hash del recurso en relaciones como stylesheet y preload. Para CSS externo de una versión fija, usa un hash real de ese archivo; si cambia, la comprobación fallará. SRI entre orígenes exige CORS, normalmente con crossorigin="anonymous" y permiso del servidor. Los archivos locales del ejemplo no necesitan esos atributos. Integridad de subrecursos y CORS.

Errores frecuentes y accesibilidad

¿Cuál es la diferencia entre link y a? <link> relaciona el documento con recursos u otros documentos; <a href> crea un enlace visible que la persona puede activar. Para CSS escrito dentro del documento existe <style>; usa <link> si mantienes las reglas en un archivo externo.

¿Por qué no carga mi CSS? Comprueba en este orden:

La URL resuelta de href en Red, incluidas mayúsculas, carpetas y una posible <base>.
La respuesta: un 404 significa recurso ausente; un HTML de error servido como CSS también falla. Revisa el tipo de contenido.
rel="stylesheet" y la condición de media: una hoja para impresión no cambia la pantalla.
La consola por bloqueos de seguridad o integridad; si la hoja cargó, revisa selectores y reglas que la sobrescriban.

<link> no es un control de teclado. Conserva título y contenido comprensibles si el CSS falla, comprueba contraste y foco en los estilos externos, y no uses el favicon como único identificador del sitio. El título del documento y el encabezado visible del ejemplo siguen nombrando el taller aunque el icono no se muestre.

Compatibilidad y fuentes

Consultado el 3 de octubre de 2026: <link>, CSS externo, iconos PNG y los atributos básicos tienen soporte consolidado en los navegadores actuales. preload y preconnect también están disponibles en los motores actuales, pero son indicaciones de optimización: su soporte no garantiza una mejora ni que cada indicación se ejecute. Revisa el registro de compatibilidad de MDN para la relación y el atributo concretos; formato del recurso, políticas del servidor y caché se comprueban por separado.