Elemento link en HTML
El elemento link sirve para indicar una conexión entre el documento y recursos externos. Es comunmente usado para añadir CSS externo y agregar un favicon (icono que aparece en las pestañas del navagador).
Cristian Escalante
Última actualización: 19 de abril de 2025
Elemento link en HTML
El elemento Link sirve para indicar una conexión entre el documento y recursos externos. Es comunmente usado para añadir CSS externo y agregar un favicon (icono que aparece en las pestañas del navagador).
Este elemento no posee etiqueta de cierre, y solamente acepta algunas propiedades, además, debe de ir dentro del elemento head.
Se listan las propiedades principales
- href: aquí se indica el recurso que se desea agregar al documento actual.
- rel: aquí se indica el tipo de conexión entre el documento actual y el recurso a agregar, toma valores como (icon, stylesheet, prerender, preload, prefetch, license, etc.)
- media: especifica en que tipo de dispositivo se debe mostrar el recurso.
- type: indica el tipo de medio del recurso
- sizes: comunmente usado con iconos para indicar los tamaños disponibles.
Ejemplos
Para aggregar CSS
<!DOCTYPE html>
<html>
<head>
<title>Mi Página</title>
<link rel="stylesheet" href="estilos.css" type="text/css" />
</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
El elemento link puede repetirse las veces que sean necesarias según recursos que se agreguen:
<link rel="stylesheet" href="general.css" media="all" />
<link rel="stylesheet" href="impresion.css" media="print" />
<link rel="stylesheet" href="movil.css" media="screen and (max-width: 600px)" />
Para Agregar un Favicon
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.png" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="apple-icon.png" sizes="180x180" />
Preconectar Dominios Externos
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Precarcar Recursos Importantes
<link rel="preload" href="fuente.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="video-intro.mp4" as="video" type="video/mp4" />
Usas hojas de Estilo Alternativas
<link rel="stylesheet" href="tema-claro.css" title="Tema Claro" />
<link rel="alternate stylesheet" href="tema-oscuro.css" title="Tema Oscuro" />
<link rel="alternate stylesheet" href="alto-contraste.css" title="Alto Contraste" />
Especificar Url Canónica
<link rel="canonical" href="https://www.misitio.com/articulo-importante" />