<link>El elemento <link> en HTML5 es utilizado principalmente dentro del <head> de un documento HTML. Sirve para definir una relación entre el documento actual y un recurso externo. Es comúnmente usado para enlaces de hojas de estilo, preconexiones, iconos de página, entre otros.
<link>href: Especifica la URL del recurso al que se vincula el documento.
rel: Define la relación entre el documento actual y el recurso vinculado. Algunos valores comunes incluyen stylesheet (para hojas de estilo), icon (para iconos de la página), preload (para precargar recursos), preconnect (para preconectar a los orígenes), y alternate (para indicar versiones alternativas del documento, como RSS feeds).
type: Especifica el tipo MIME del recurso vinculado. Por ejemplo, text/css para hojas de estilo CSS.
media: Especifica el tipo de medio para el que está diseñado el recurso vinculado. Esto puede ser usado para aplicar diferentes hojas de estilo para dispositivos diferentes, como screen, print, all, etc.
hreflang: Define el idioma del documento vinculado.
sizes: Se usa principalmente cuando rel es icon y especifica los tamaños de los iconos que se están referenciando.
crossorigin: Indica si debe hacerse un CORS (Cross-Origin Resource Sharing) para este enlace. Valores posibles incluyen anonymous y use-credentials.
integrity: Permite comprobar que el recurso se ha entregado sin cambios. Es usado junto con Subresource Integrity (SRI).
title: Este atributo es opcional y puede ser usado para dar un título al recurso vinculado.
as: Especifica el tipo del recurso que está siendo vinculado para el atributo rel="preload". Ejemplos incluyen script, style, font, etc.
<link> en HTML5 con EjemplosEnlazar una hoja de estilo CSS:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de <link></title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1>Hola, Mundo!</h1>
</body>
</html>Enlazar un favicon:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Favicon Example</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Hola, Mundo!</h1>
</body>
</html>Precargar un recurso (como una fuente):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Preload Example</title>
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
</head>
<body>
<h1>Hola, Mundo!</h1>
<p>Este es un ejemplo de precarga de fuente.</p>
</body>
</html>Preconectar a un origen (mejorando tiempos de carga para recursos de terceros):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Preconnect Example</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<h1>Hola, Mundo!</h1>
<p>Este es un ejemplo de preconexión a un origen.</p>
</body>
</html>Estos ejemplos demuestran cómo el elemento <link> se puede utilizar para enriquecer la funcionalidad y el rendimiento de tu documento HTML5 mediante la vinculación de diversos recursos externos.