Con la etiqueta <link> en HTML puedes anclar hyperlinks a destinos internos o externos, como URL, medios, archivos u otros elementos en HTML. Esto garantiza una mejor navegabilidad, mayor facilidad de uso, además de propiedades SEO optimizadas. Aparte de <link>, también se utiliza la etiqueta <a>, así como otros atributos para insertar enlaces.

¿Qué son las HTML hyperlink tags?

Las HTML hyperlink tags <a> y <link> se utilizan para anclar enlaces a recursos internos o externos en un documento HTML. Las etiquetas <a> permiten integrar hyperlinks a páginas web externas o internas, así como enlaces a archivos, documentos y descargas. Por otro lado, con las etiquetas <link> se pueden integrar recursos como hojas de estilo, fuentes e iconos, lo que mejora la funcionalidad, usabilidad y navegabilidad dentro de una página.

¿Cuál es la diferencia entre <a> y <link>?

Para integrar hyperlinks o recursos externos, se pueden utilizar las HTML tags <a> o <link>, según el caso. Debes tener en cuenta sus diferencias, ya que cada una de ellas cumple objetivos y funciones diferentes:

  • <a>: La etiqueta <a> significa “ancla”, ya que se puede utilizar para anclar hyperlinks a URL o imágenes, gráficos y vídeos en páginas HTML. Estos pueden encontrarse dentro de la misma página web o pueden ser recursos externos.
  • <link>: Con la etiqueta <link>, puedes integrar recursos externos como hojas de estilo CSS, favicons, documentos o fuentes en documentos HTML. Esto influye en el aspecto y el funcionamiento de una página HTML o bien en el rendimiento de la página mediante precarga o URL preferidas (URL canónicas).

La diferencia principal es que <a> se utiliza principalmente para integrar hyperlinks, mientras que <link> se emplea sobre todo para integrar elementos externos como hojas de estilo. La etiqueta <a> también suele integrarse dentro del área <body>, mientras que la etiqueta <link> se utiliza en el área <header>.

Hosting
Hosting de primera al mejor precio
  • 3x más rápido, ahora un 60 % de ahorro
  • Alta disponibilidad >99.99 %
  • Solo en IONOS: hasta 500 GB incluidos

La sintaxis de las HTML hyperlink tags explicada

A continuación, te explicamos la sintaxis de las dos HTML hyperlink tags <a> y <link>.

Sintaxis de la etiqueta <a> en HTML

Para utilizar correctamente la etiqueta <a>, necesitas elementos adicionales como la apertura <a> y el cierre </a>:

  • href: con el atributo HTML href, se define la URL de destino a la que se hace referencia con la etiqueta de enlace HTML. Puede ser una URL absoluta o relativa o un identificador de anclaje para la misma página.
  • Etiqueta de enlace HTML de texto o imagen: la URL de destino se integra como URL relativa o absoluta dentro de las etiquetas <a>...</a> y después del atributo href para anclar el enlace en el texto HTML. Lo mismo se aplica a las etiquetas de imagen en el caso de las imágenes.

Otros atributos opcionales dentro de las etiquetas <a> son:

  • target: define dónde debe abrirse una URL de destino, por ejemplo, con _blank para una nueva pestaña o ventana, o con _parent para un marco principal.
  • download: especifica que los enlaces realicen automáticamente una descarga.
  • title: se utiliza para mostrar títulos o descripciones en relación con los enlaces cuando el cursor se desplaza sobre el área. -rel: define la relación entre la página actual y la página enlazada; por ejemplo, rel=nofollow puede utilizarse para especificar que los motores de búsqueda no deben buscar un enlace.

Ejemplo:

<a href="URL de destino">etiqueta de enlace de texto o de imagen</a>
html

Sintaxis de la etiqueta <link> en HTML

Para integrar la etiqueta <link> en HTML pueden utilizarse distintas variantes y atributos HTML dependiendo de su finalidad:

Enlace de hojas de estilo

La siguiente sintaxis se utiliza para integrar hojas de estilo CSS externas y definir la apariencia de una página web:

<link rel="stylesheet" href="styles.css">
html

Enlace de favicons

Para mostrar pequeños símbolos o imágenes (favicons) junto a las URL, se utiliza la siguiente sintaxis:

<link rel="icon" href="favicon.ico">
html

Precarga

Para mejorar el rendimiento en la carga de páginas web se pueden cargar recursos en segundo plano utilizando la función de prefetching. Para ello, se utiliza la siguiente sintaxis:

<link rel="prefetch" href="siguiente-pagina.html">
html

URL canónicas o etiquetas

Mediante la vinculación de URL canónicas o tags, puedes indicar a los motores de búsqueda qué URL debe priorizarse en el caso de que diferentes URL enlacen a la misma página:

<link rel="canonical" href="https://ejemplo-url/canonical-url">
html

Enlace de URL alternativas

Si existen diferentes versiones de la misma página web, por ejemplo, en diferentes idiomas, se pueden enlazar de la siguiente manera:

<link rel="alternate" href="alternative-url.html" type="text/html" title="pagina alternativa">
html
Consejo

Echa un vistazo a nuestro Tutorial HTML para principiantes para aprender aún más sobre el lenguaje de programación.

¿Qué fines tienen las HTML hyperlink tags?

Los fines más comunes de las HTML hyperlink tags son:

  • Mejorar la navegación mediante menús integrados y barras de navegación
  • Enlazar e integrar hyperlinks a URL o recursos internos o externos
  • Descargar documentos y archivos
  • Vincular de forma eficiente subpáginas internas relevantes mediante enlaces de anclaje
  • La accesibilidad y optimización para motores de búsqueda
  • Mejorar los tiempos de carga y el rendimiento de la página web
Dominios web
Compra y registra tu dominio ideal
  • Tu dominio protegido con Certificado SSL Wildcard gratis
  • Función Domain Connect para una configuración DNS simplificada gratis
  • Registro privado y gratis para mayor seguridad
¿Le ha resultado útil este artículo?
Ir al menú principal