Las etiquetas HTML <link> son elementos utilizados para establecer relaciones entre el documento actual y recursos externos, como hojas de estilo CSS, íconos, fuentes y otros documentos HTML. Estas etiquetas son esenciales para la estructura y presentación adecuadas de una página web, ya que permiten vincular archivos externos que afectan directamente la apariencia y funcionalidad del documento HTML.
Uso Básico
La etiqueta <link> se coloca en el <head> del documento HTML y tiene la siguiente estructura:
<link rel="tipo" href="ruta/al/archivo">
rel: Este atributo define la relación entre el documento actual y el recurso vinculado. Algunos valores comunes para este atributo son:stylesheet: Indica que el recurso es una hoja de estilo CSS.icon: Indica que el recurso es un ícono.preconnect,dns-prefetch: Indican que se establecerán conexiones de red anticipadas.
href: Especifica la URL del recurso externo que se va a vincular.
Ejemplos de Uso
Vincular una Hoja de Estilo CSS
<link rel="stylesheet" href="styles.css">
Este ejemplo vincula el archivo styles.css al documento HTML, lo que permite aplicar estilos personalizados al contenido de la página.
Vincular un Ícono
<link rel="icon" href="favicon.ico">
Esta etiqueta vincula un ícono, como un favicon, que se mostrará en la pestaña del navegador o en la barra de direcciones.
Vincular una Fuente Externa
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Este ejemplo vincula una fuente externa desde Google Fonts, permitiendo usar la fuente Roboto en la página.
Ventajas de Usar <link>
- Separación de Contenido y Estilo: Permite mantener el HTML limpio y legible al separar la estructura del contenido de su presentación visual.
- Reutilización de Recursos: Facilita la reutilización de hojas de estilo, íconos y fuentes en múltiples páginas web.
- Optimización del Rendimiento: Permite cargar recursos externos de forma asíncrona, mejorando el rendimiento y la velocidad de carga de la página.
En resumen, las etiquetas HTML <link> son fundamentales para vincular recursos externos, como hojas de estilo, íconos y fuentes, a un documento HTML, lo que facilita la creación de páginas web visualmente atractivas y funcionales.
Comentarios