[IOGUIDEES3251]" tabindex="0">

Con la etiqueta <link> en HTML puedes anclar hy­pe­r­li­n­ks a destinos internos o externos, como URL, medios, archivos u otros elementos en HTML. Esto garantiza una mejor na­ve­ga­bi­li­dad, mayor facilidad de uso, además de pro­pie­da­des SEO op­ti­mi­za­das. 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 hy­pe­r­li­n­ks a páginas web externas o internas, así como enlaces a archivos, do­cu­me­n­tos y descargas. Por otro lado, con las etiquetas <link> se pueden integrar recursos como hojas de estilo, fuentes e iconos, lo que mejora la fu­n­cio­na­li­dad, usa­bi­li­dad y na­ve­ga­bi­li­dad dentro de una página.

¿Cuál es la di­fe­re­n­cia entre <a> y <link>?

Para integrar hy­pe­r­li­n­ks o recursos externos, se pueden utilizar las HTML tags <a> o <link>, según el caso. Debes tener en cuenta sus di­fe­re­n­cias, ya que cada una de ellas cumple objetivos y funciones di­fe­re­n­tes:

  • <a>: La etiqueta <a> significa “ancla”, ya que se puede utilizar para anclar hy­pe­r­li­n­ks a URL o imágenes, gráficos y vídeos en páginas HTML. Estos pueden en­co­n­trar­se 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, do­cu­me­n­tos o fuentes en do­cu­me­n­tos HTML. Esto influye en el aspecto y el fu­n­cio­na­mie­n­to de una página HTML o bien en el re­n­di­mie­n­to de la página mediante precarga o URL pre­fe­ri­das (URL canónicas).

La di­fe­re­n­cia principal es que <a> se utiliza pri­n­ci­pa­l­me­n­te para integrar hy­pe­r­li­n­ks, mientras que <link> se emplea sobre todo para integrar elementos externos como hojas de estilo. La etiqueta <a> también suele in­te­grar­se dentro del área <body>, mientras que la etiqueta <link> se utiliza en el área <header>.

Web Hosting
El hosting que crece con tu proyecto
  • Tiempo de actividad de 99.99 % y seguridad ga­ra­n­ti­za­da
  • Aumenta el re­n­di­mie­n­to según el tráfico de tu página web
  • Incluye dominio, SSL, e-mail y soporte 24/7

La sintaxis de las HTML hyperlink tags explicada

A co­n­ti­nua­ción, te ex­pli­ca­mos la sintaxis de las dos HTML hyperlink tags <a> y <link>.

Sintaxis de la etiqueta <a> en HTML

Para utilizar co­rre­c­ta­me­n­te la etiqueta <a>, necesitas elementos adi­cio­na­les 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 re­fe­re­n­cia con la etiqueta de enlace HTML. Puede ser una URL absoluta o relativa o un ide­n­ti­fi­ca­dor 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 op­cio­na­les 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: es­pe­ci­fi­ca que los enlaces realicen au­to­má­ti­ca­me­n­te una descarga.
  • title: se utiliza para mostrar títulos o de­s­cri­p­cio­nes 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 uti­li­zar­se para es­pe­ci­fi­car 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 uti­li­zar­se distintas variantes y atributos HTML de­pe­n­die­n­do de su finalidad:

Enlace de hojas de estilo

La siguiente sintaxis se utiliza para integrar hojas de estilo CSS externas y definir la apa­rie­n­cia 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 re­n­di­mie­n­to en la carga de páginas web se pueden cargar recursos en segundo plano uti­li­za­n­do la función de pre­fe­t­chi­ng. Para ello, se utiliza la siguiente sintaxis:

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

URL canónicas o etiquetas

Mediante la vi­n­cu­la­ción de URL canónicas o tags, puedes indicar a los motores de búsqueda qué URL debe prio­ri­zar­se en el caso de que di­fe­re­n­tes URL enlacen a la misma página:

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

Enlace de URL al­te­r­na­ti­vas

Si existen di­fe­re­n­tes versiones de la misma página web, por ejemplo, en di­fe­re­n­tes 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 pri­n­ci­pia­n­tes para aprender aún más sobre el lenguaje de pro­gra­ma­ción.

¿Qué fines tienen las HTML hyperlink tags?

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

  • Mejorar la na­ve­ga­ción mediante menús in­te­gra­dos y barras de na­ve­ga­ción
  • Enlazar e integrar hy­pe­r­li­n­ks a URL o recursos internos o externos
  • Descargar do­cu­me­n­tos y archivos
  • Vincular de forma eficiente su­b­pá­gi­nas internas re­le­va­n­tes mediante enlaces de anclaje
  • La ac­ce­si­bi­li­dad y op­ti­mi­za­ción para motores de búsqueda
  • Mejorar los tiempos de carga y el re­n­di­mie­n­to de la página web
Compra y registra tu dominio ideal
  • Ce­r­ti­fi­ca­do SSL Wildcard gratis
  • Registro privado
  • Función Domain Connect para una co­n­fi­gu­ra­ción DNS si­m­pli­fi­ca­da gratis
Ir al menú principal