Etiqueta <link> HTML: ¿Qué es y como usar correctamente?

La etiqueta <link> HTML es una herramienta esencial en la construcción de páginas web. Esta etiqueta establece relaciones entre un documento HTML y recursos externos, como hojas de estilo CSS, fuentes, e incluso feeds RSS. Desde su función hasta ejemplos prácticos de cómo usarla y los diferentes atributos disponibles, exploraremos todo lo que necesitas saber sobre esta etiqueta clave en la web moderna.

Sigue las palabras fuertes si quieres un resumen de todo el artículo.

1. ¿Qué es la etiqueta link en HTML?

La etiqueta <link> en HTML es una herramienta fundamental para establecer relaciones entre un documento HTML y recursos externos, como hojas de estilo CSS, favicones, fuentes web y scripts. Es una etiqueta vacía, lo que significa que no tiene contenido ni etiqueta de cierre.

En esencia, la etiqueta <link> funciona como un enlace que conecta el HTML con estos elementos externos, permitiendo que el navegador los interprete y los incorpore correctamente en la página web.

Imagina que estás construyendo una casa: la etiqueta <link> sería como los cables eléctricos que conectan los diferentes componentes, como las luces y los electrodomésticos, a la fuente de alimentación. Sin estos cables, la casa no funcionaría correctamente.

¿Y que serian los recursos externos en este caso?

Estos recursos externos son elementos independientes que complementan y enriquecen la página web, pero que se encuentran alojados en ubicaciones distintas al archivo HTML principal.

Tipos de recursos externos:

• Hojas de estilo CSS (Cascading Style Sheets): Son archivos que contienen instrucciones para definir la apariencia visual de los elementos HTML, como colores, tipografías, tamaños y disposición.
• Favicones: Son pequeños iconos que se muestran en la pestaña del navegador y en la lista de favoritos, brindando identidad visual al sitio web.
• Fuentes web: Permiten utilizar tipografías personalizadas que no están instaladas por defecto en el sistema operativo del usuario, mejorando la experiencia visual del sitio web.
• Scripts JavaScript: Son archivos que contienen código JavaScript que agrega funcionalidades interactivas al sitio web, como formularios dinámicos, animaciones o efectos especiales.

1.1. ¿Para que sirve establecer relaciones entre un documento HTML y recursos externos con la etiqueta <link>?

La conexión entre el documento HTML y estos recursos externos es fundamental por varias razones:

• Enriquecimiento visual: Las hojas de estilo CSS y las fuentes web permiten crear páginas web más atractivas y profesionales, con una estética consistente y personalizada.
• Funcionalidad mejorada: Los scripts JavaScript añaden dinamismo e interactividad a la página, permitiendo al usuario realizar acciones, obtener información o participar en experiencias más envolventes.
• Organización y mejor mantenimiento: Al separar la presentación (CSS) y la lógica (JavaScript) del HTML, se facilita el mantenimiento y la reutilización del código, haciendo que el sitio web sea más escalable y adaptable.
• Reducción del tamaño del archivo HTML: Al alojar los recursos externos en archivos independientes, se reduce el tamaño del archivo HTML principal, lo que mejora la velocidad de carga de la página.

RESUMEN: La etiqueta <link> y su capacidad para establecer relaciones con recursos externos son pilares fundamentales en la construcción de sitios web modernos, funcionales y visualmente atractivos.

2. Estructura básica de la etiqueta link.

La etiqueta <link> no tiene contenido visible en el navegador, ya que su propósito es simplemente establecer relaciones entre el documento HTML y recursos externos. Su sintaxis básica es:

<link rel="tipo-relacion" href="URL-del-recurso" type="tipo-de-contenido">

• rel: Atributo que define el tipo de relación entre el documento HTML y el recurso externo.
• href: Atributo que especifica la URL del recurso externo.
• type: Atributo que define el tipo de contenido del recurso.

Más adelante amplio cada uno de sus atributos (existen otros) y sus principales funciones, con ejemplos de como usarlos!!!

3. Atributos de la etiqueta link.

La etiqueta <link> en HTML, aunque sencilla en apariencia, posee un conjunto de atributos que le otorgan gran versatilidad y control sobre la forma en que se incluyen y se relacionan los recursos externos en un sitio web.

A continuación, te presento los atributos más comunes:

3.1. Atributos importantes:

1. href: El atributo href (hipertext reference) define la URL del recurso externo que se va a vincular con el documento HTML.
2. rel: El atributo rel ((relationship) define el tipo de relación entre el documento HTML y el recurso externo y el navegador los interpreta de manera específica según el contexto. Los valores más comunes son:
   • stylesheet: Para hojas de estilo CSS.
   • icon: Para favicones.
   • preload: Para precargar recursos como fuentes web o scripts.
   • alternate: Para especificar versiones alternativas de una página web.
   • canonical: Se usa para indicar la URL canónica de la página, lo que ayuda a los motores de búsqueda a identificar la URL preferida cuando hay varias versiones de una página.
   • next, prev: Estos valores se utilizan para indicar la relación entre las páginas, como páginas siguientes o anteriores en una secuencia.
3. type: Indica el tipo de contenido del recurso externo. Sin embargo, para hojas de estilo CSS en HTML5, el atributo type es opcional y generalmente se omite, ya que el navegador puede reconocer automáticamente que se trata de una hoja de estilo CSS. Los valores comunes incluyen:
   • text/css: Para hojas de estilo CSS.
   • image/png: Para imágenes en formato PNG.
   • application/javascript: Para scripts JavaScript.

ALGUNOS EJEMPLO DE USO DE ESTOS ATRIBUTOS:

3.2. Atributos adicionales:

1. media: Se utiliza para especificar las condiciones de presentación bajo las cuales se debe aplicar la hoja de estilo CSS vinculada. Esto permite adaptar el estilo de la página según el dispositivo de visualización o el medio de salida, como una pantalla de ordenador, una impresora o un dispositivo de lectura de pantalla. Sus valores comunes son:
   • all: Se aplica a todos los dispositivos. Es el valor predeterminado si no se especifica ningún valor de media.
   • screen: Indica que la hoja de estilo se aplica cuando se visualiza en una pantalla, como en un ordenador o dispositivo móvil.
   • print: Indica que la hoja de estilo se aplica cuando se imprime la página.
   • speech: Indica que la hoja de estilo se aplica cuando se lee en voz alta por un software de lectura de pantalla.
   • Ejemplo: <link rel="stylesheet" href="estilos.css" media="screen"> ( En este ejemplo, la hoja de estilo estilos.css se aplicará solo cuando la página se visualice en una pantalla, pero no cuando se imprima ni cuando se lea en voz alta).
2. integrity: Sirve para verificar la integridad del recurso externo mediante una hash criptográfica, mejorando la seguridad.
3. crossorigin: Se utiliza para controlar cómo se manejan las solicitudes de recursos entre diferentes orígenes (cross-origin). Puede tener los siguientes valores:
   • nonymous: Indica que la solicitud de recurso se realiza sin incluir credenciales, como cookies de autenticación. Esto se utiliza comúnmente para recursos públicos que no requieren autenticación, como hojas de estilo CSS y scripts.
   • use-credentials: Indica que la solicitud de recurso debe incluir credenciales, como cookies de autenticación. Esto se utiliza cuando se requiere autenticación para acceder al recurso vinculado, por ejemplo, al cargar fuentes web que requieren autenticación.

Ejemplo de uso del atributo integrity y crossorigin que normalmente se combinan:

<link rel="stylesheet" href="estilos.css" integrity="sha256-BNADd9/UfF8YN7H/koHRM7Y7pvZn8AO9X26U2u0XVU8=" crossorigin="anonymous">

1. integrity="sha256-BNADd9/UfF8YN7H/koHRM7Y7pvZn8AO9X26U2u0XVU8=": Se especifica una firma criptográfica (SHA-256 hash) del recurso estilos.css. Esta firma se utiliza para verificar la integridad del archivo estilos.css cuando se carga en el navegador.
2. crossorigin="anonymous": Indica que el recurso se puede compartir entre diferentes orígenes, pero la solicitud no incluirá credenciales (como cookies de autenticación), lo que es comúnmente utilizado para recursos públicos como hojas de estilo y scripts.

EN EL SIGUIENTE PUNTO AMPLIFICO CON EJEMPLOS EL USO DE ESTOS ATRIBUTOS.

4. Ejemplos de usos comunes de la etiqueta link.

A continuación, te presento algunos ejemplos concretos de sus usos más comunes:

1. Vincular hojas de estilo CSS (Cascading Style Sheets):
2. Agregar un favicon:
3. Cargar fuentes web personalizadas:
4. Incluir scripts JavaScript externos:
5. Recursos adicionales y menos comunes:

4.1. Vincular hojas de estilo CSS (Cascading Style Sheets):

Este es el uso más extendido de la etiqueta <link>. Permite incluir hojas de estilo CSS externas que definen la apariencia visual de los elementos HTML, como colores, tipografías, tamaños, márgenes, disposición y otros aspectos estéticos. De esta manera, se separa la estructura del contenido (HTML) de su presentación visual (CSS), promoviendo un código más organizado y reutilizable.

Ejemplo:

4.2. Agregar un favicon:

El favicon es ese pequeño icono que aparece en la pestaña del navegador, en la lista de favoritos y en algunas aplicaciones móviles cuando se guarda un sitio web. La etiqueta <link> permite incluir un favicon en formato ICO o PNG, brindando identidad visual al sitio web y mejorando la experiencia del usuario.

Ejemplo:

4.3. Cargar fuentes web personalizadas:

Las fuentes web permiten utilizar tipografías que no están instaladas por defecto en el sistema operativo del usuario, enriqueciendo la estética del sitio web y brindando una experiencia visual más personalizada. La etiqueta <link> con el atributo rel="preload" as="font" facilita la carga previa de estas fuentes, optimizando el tiempo de renderizado de la página.

Ejemplo:

4.4. Incluir scripts JavaScript externos:

Aunque menos común que los casos anteriores, la etiqueta <link> también puede servir para incluir scripts JavaScript externos. Estos scripts añaden funcionalidades interactivas al sitio web, como formularios dinámicos, animaciones, efectos especiales o llamadas a APIs externas.

Ejemplo:

4.5. Recursos adicionales y menos comunes:

• Especificar versiones alternativas de una página web: 
  • El atributo rel="alternate" permite indicar versiones alternativas de una página web en función del idioma, el dispositivo o la resolución de pantalla.
• Incluir archivos de manifiesto de aplicaciones web: 
  • Las aplicaciones web progresivas (PWAs) utilizan archivos de manifiesto para definir su configuración y metadatos. La etiqueta <link> con el atributo rel="manifest" permite incluir estos archivos.
• Enlazar a recursos relacionados: 
  • El atributo rel="related" sirve para establecer relaciones entre la página actual y otras páginas relevantes dentro del sitio web.

5. ¿Cómo poner la etiqueta link correctamente? Pasos a paso.

A continuación, te presento los pasos generales para incorporar esta etiqueta en tu página web, independientemente del recurso que desees enlazar:

1. Identifica el recurso externo:
   • Determina qué tipo de recurso externo deseas vincular a tu página web. Puede ser una hoja de estilo CSS, un favicon, una fuente web, un script JavaScript o un recurso similar.
   • Ubica la URL del recurso externo. Esta URL es la dirección web que apunta al archivo o servicio que deseas incluir en tu sitio.
2. Escribe la etiqueta <link>:
   • Guíate de la siguiente sintaxis para su correcta implementación:
   • <link rel="tipo-relacion" href="URL-del-recurso">
   • Reemplaza "tipo-relacion" con el valor adecuado del atributo rel que describe la relación entre el documento actual y el recurso vinculado (por ejemplo, "stylesheet" para hojas de estilo CSS).
   • Reemplaza "URL-del-recurso" con la URL o la ruta relativa al recurso externo que deseas vincular.
   • Revisa el punto 3 sobre los atributos de la etiqueta <link> si es necesario.
3. Colocación de la etiqueta <link> dentro del elemento <head>:
   • La etiqueta <link> se suele incluir dentro de la sección <head> del documento HTML. Esta sección contiene metadatos y recursos que no se muestran directamente en la página, pero que son esenciales para su correcto funcionamiento.
4. Guarda y carga tu página web:
   • Guarda los cambios en tu archivo HTML y cárgalo en tu navegador web para verificar que la etiqueta <link> esté funcionando correctamente y que el recurso externo se esté vinculando correctamente.

EJEMPLO PRÁCTICO: Supongamos que deseas vincular una hoja de estilo CSS llamada «estilo.css» a tu página web. La URL del archivo CSS es "https://midominio.com/css/estilo.css":

<head>
  <link rel="stylesheet" href="https://midominio.com/css/estilo.css" type="text/css">
</head>Lenguaje del código: HTML, XML (xml)

En este ejemplo, se ha definido una relación de tipo stylesheet con la URL del archivo CSS, indicando además que su tipo de contenido es text/css.

4.1. Consideraciones para usar la etiqueta link correctamente:

Para aprovechar al máximo esta etiqueta y evitar errores comunes, te presento algunas consideraciones importantes que puedes tener en cuenta:

1. Usa los atributos adecuadamente:
   • La etiqueta <link> requiere al menos dos atributos obligatorios; rel y href.
   • No olvides incluir el atributo type cuando sea necesario, como en hojas de estilo CSS (type="text/css") o scripts JavaScript (type="application/javascript").
   • Los atributos se escriben dentro de la etiqueta <link>, separados por espacios.
   • El orden de los atributos no es relevante.
2. Errores comunes:
   • Verifica cuidadosamente la URL del recurso externo. Un error tipográfico o una URL incompleta pueden impedir que el recurso se cargue correctamente.
   • Elige el valor del atributo rel que corresponda al tipo de recurso que deseas vincular. Un valor incorrecto puede generar resultados inesperados o incluso errores.
   • Evita incluir la misma etiqueta <link> para el mismo recurso externo varias veces (duplicación de etiquetas). Esto puede generar problemas de rendimiento o comportamientos no deseados.
3. Buenas prácticas:
   • Organización: Ordena las etiquetas <link> dentro de la sección <head> de forma lógica, agrupando por tipo de recurso (hojas de estilo CSS, fuentes web, scripts, etc.).
   • Comentarios descriptivos: Agrega comentarios que describan brevemente el propósito de cada etiqueta <link>, especialmente si tienes varias etiquetas para el mismo tipo de recurso.
   • Validación de código: Utiliza herramientas de validación de código HTML para verificar que la sintaxis de las etiquetas <link> sea correcta y no haya errores. Algunos validadores pueden ser el Validador HTML de W3C y el Nu Html Checker.
   • Actualización de URLs: Si cambias la ubicación de los recursos externos, asegúrate de actualizar las URLs en las etiquetas <link> correspondientes.

PREGUNTAS FRECUENTES Y RESUMEN