Vínculos

En la introducción a los atributos, compartimos un ejemplo de cómo se agregan atributos a la etiqueta de apertura. En el ejemplo, se usó la etiqueta <a>, pero no se analizó el elemento ni los atributos específicos que se introdujeron en ese ejemplo.

La etiqueta de apertura, los atributos y la etiqueta de cierre, etiquetados en un elemento HTML.

La etiqueta de anclaje <a>, junto con el atributo href, crea un hipervínculo. Los vínculos son la columna vertebral de Internet. La primera página web contenía 25 vínculos y decía: "Todo lo que hay en línea sobre W3 está vinculado directa o indirectamente a este documento". Es muy probable que todo lo que hay en línea sobre W3 también esté vinculado directa o indirectamente desde este documento.

El poder de la Web y la etiqueta <a> crecieron enormemente desde que Tim Berners-Lee publicó esta primera explicación en agosto de 1991. Los vínculos representan una conexión entre dos recursos, uno de los cuales es el documento actual. Los vínculos pueden crearlos <a>, <area>, <form> y <link>. Aprendiste sobre <link> y descubrirás los formularios en una sección aparte. También hay una sección de aprendizaje sobre formularios completa. En esta sesión, descubrirás la etiqueta <a> de una sola letra, que no es tan simple.

El atributo href

Si bien no es obligatorio, el atributo href se encuentra en casi todas las etiquetas <a>. Proporcionar la dirección del hipervínculo es lo que convierte el <a> en un vínculo. El atributo href se usa para crear hipervínculos a ubicaciones dentro de la página actual, otras páginas dentro de un sitio o incluso otros sitios. También se puede codificar para descargar archivos o enviar un correo electrónico a una dirección específica, incluso con un asunto y contenido sugerido para el cuerpo del correo electrónico.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

El primer vínculo incluye una URL absoluta, que se puede usar en cualquier sitio del mundo para navegar a la página principal de MLW. Las URLs absolutas incluyen un protocolo, en este caso https://, y un nombre de dominio. Cuando el protocolo se escribe como //, es un protocolo implícito y significa “usa el mismo protocolo que se está usando de forma activa”.

Las URLs relativas no incluyen un protocolo ni un nombre de dominio. Son "relativas" al archivo actual. MLW es un sitio de una sola página, pero esta serie de HTML tiene varias secciones. Para vincular esta página a la lección sobre atributos, se usa una URL relativa <a href="../attributes/">Attributes</a>.

El segundo vínculo es solo un identificador de fragmento de vínculo y vinculará al elemento con id="teachers",, si hay uno, en la página actual. Los navegadores también admiten dos vínculos de "principio de la página": hacer clic en <a href="#top">Top</a> (sin distinción entre mayúsculas y minúsculas) o incluso solo en <a href="#">Top</a> devuelve al usuario a la parte superior de la página, a menos que haya un elemento con el ID de top establecido en las mismas mayúsculas y minúsculas.

MLW es un documento bastante largo. Para evitar el desplazamiento, puedes agregar un vínculo que regrese a la parte superior desde la parte inferior de la sección #teachers:

<a href="#top">Go to top.</a>

El tercer vínculo combina los dos valores: contiene una URL absoluta seguida de un fragmento de vínculo. Esto permite vincular directamente a una sección de la URL definida, en este caso, la sección #teachers de la página principal de MLW. Se carga la página de MLW y el navegador se desplaza a la sección de profesores sin enviar el fragmento en la solicitud HTTP.

El atributo href puede comenzar con mailto: o tel: para enviar correos electrónicos o realizar llamadas. El control del vínculo depende del dispositivo, el sistema operativo y las aplicaciones instaladas.

El vínculo mailto no necesita incluir una dirección de correo electrónico, pero puede hacerlo, junto con texto de cc, bcc, subject y body para completar previamente el correo electrónico. De forma predeterminada, se abrirá un cliente de correo electrónico. Podrías prepropagar el asunto y el cuerpo del correo electrónico sin una dirección de correo electrónico para permitir que los visitantes del sitio inviten a sus propios amigos. En nuestro vínculo, en el pie de página del documento, incluimos la URL del registro:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

El signo de interrogación (?) separa el mailto: y la dirección de correo electrónico, si la hay, del término de búsqueda. Dentro de la búsqueda, los signos de unión (&) separan los campos y los signos igual (=) equiparan cada nombre de campo con su valor. Toda la cadena está codificada como porcentaje, lo que es necesario si el valor de href no está entre comillas o si los valores incluyen comillas.

La app que se abre cuando el usuario hace clic en un vínculo de tel, lo presiona o presiona Intro depende del sistema operativo, las aplicaciones instaladas y la configuración que el usuario tiene en su dispositivo. Un iPhone puede abrir FaceTime, la app de Teléfono o Contactos. Es posible que se abra Skype en un escritorio de Windows si está instalado.

Existen varios otros tipos de URLs, como los blobs y las URLs de datos (consulta ejemplos en el análisis del atributo download). En el caso de los sitios seguros (aquellos que se publican a través de https), es posible crear y ejecutar protocolos específicos de la app con registerProtocolHandler().

Cuando incluyas vínculos que probablemente abran otras aplicaciones instaladas, es bueno que se lo informes al usuario. Asegúrate de que el texto entre las etiquetas de apertura y cierre le indique al usuario qué tipo de vínculo está a punto de activar. Los selectores de atributos de CSS, como [href^="mailto:"], [href^="tel:"] y [href$=".pdf"], se pueden usar para segmentar los diseños por tipo de aplicación.

Recursos descargables

El atributo download se debe incluir cuando href apunta a un recurso descargable. El valor del atributo de descarga es el nombre de archivo sugerido para que el recurso se guarde en el sistema de archivos local del usuario. SVGOMG, el optimizador de SVG, usa el atributo download para sugerir un nombre de archivo para el BLOB descargable que crea el optimizador. Cuando se optimiza hal.svg, la etiqueta de apertura del vínculo de descarga de SVGOMG es similar a la siguiente:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

También hay una demostración de un <canvas> que crea una URL de datos PNG descargable.

Para vincular un recurso descargable, incluye la URL del activo como el valor del atributo href y un nombre de archivo sugerido para el usuario como el valor del atributo download.

Contexto de navegación

El atributo target permite definir el contexto de navegación para la navegación de vínculos (y el envío de formularios). Las cuatro palabras clave que no distinguen mayúsculas de minúsculas y que tienen un prefijo de guion bajo se analizaron con el elemento <base>. Esto incluye lo siguiente:

  • (Predeterminado) _self: Abre el vínculo en la ventana actual.
  • _blank: Abre el vínculo en una pestaña nueva.
  • _parent: Abre el vínculo en el objeto principal o en el iframe.
  • _top: Abre el vínculo en el principal superior. Esto es especialmente útil si el vínculo está anidado en profundidad.

Si el vínculo no está anidado, _top y _parent actúan igual que _self. El atributo target no se limita a estos cuatro términos clave: se puede usar cualquier término.

Cada contexto de navegación (o cada pestaña del navegador) tiene un nombre de contexto de navegación. Los vínculos pueden abrirse en la pestaña actual, en una pestaña nueva sin nombre o en una pestaña nueva o existente con nombre. De forma predeterminada, el nombre es una cadena vacía.

Para abrir un vínculo en una pestaña nueva, el usuario puede hacer clic con el botón derecho y seleccionar "Abrir en una pestaña nueva". Los desarrolladores pueden forzar esto incluyendo target="_blank".

Un vínculo con target="_blank" se abre en una pestaña nueva con un nombre nulo, lo que abre una pestaña nueva sin nombre con cada clic en el vínculo. Esto puede crear muchas pestañas nuevas. Hay demasiadas pestañas. Por ejemplo, si el usuario hace clic en <a href="registration.html" target="_blank">Register Now</a> 15 veces, el formulario de registro se abrirá en 15 pestañas separadas. Este problema se puede solucionar si se proporciona un nombre de contexto de la pestaña. Si incluyes el atributotarget con un valor que distingue mayúsculas de minúsculas, como <a href="registration.html" target="reg">Register Now</a>, el primer clic abrirá el formulario de registro en una nueva pestaña reg. Si haces clic en este vínculo 15 veces más, se volverá a cargar el registro en el contexto de navegación reg, sin abrir ninguna pestaña adicional.

El atributo rel controla qué tipos de vínculos crea el vínculo, y define la relación entre el documento actual y el recurso vinculado en el hipervínculo. El valor del atributo debe ser una lista separada por espacios en uno o más de los valores de atributo de puntuación de rel admitidos por la etiqueta <a>.

La palabra clave nofollow se puede incluir si no quieres que los rastreadores sigan el vínculo. El valor external se puede agregar para indicar que el vínculo dirige a una URL externa y no a una página dentro del dominio actual. La palabra clave help indica que el hipervínculo proporcionará ayuda sensible al contexto. Si colocas el cursor sobre un vínculo con este valor de rel, se mostrará un cursor de ayuda en lugar del cursor de puntero normal. No uses este valor solo para obtener el cursor de ayuda; usa la propiedad cursor de CSS en su lugar. Los valores prev y next se pueden usar en vínculos que dirijan al documento anterior y siguiente de una serie.

Al igual que <link rel="alternative">, el significado de <a rel="alternative"> depende de otros atributos. Las alternativas de feeds RSS también incluirán type="application/rss+xml" o type="application/atom+xml, los formatos alternativos incluirán el atributo type y las traducciones incluirán el atributo hreflang. Si el contenido entre las etiquetas de apertura y cierre está en un idioma diferente al del documento principal, incluye el atributo lang. Si el idioma del documento vinculado es diferente, incluye el atributo hreflang.

En este ejemplo, incluimos la URL de la página traducida como el valor de href, rel="alternate" para indicar que es una versión alternativa de un sitio; el atributo hreflang proporciona el idioma de las traducciones:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Si la traducción al francés es un PDF, puedes proporcionar el atributo type con el tipo de MIME PDF del recurso vinculado. Si bien el tipo de MIME es meramente informativo, siempre es una buena idea informar al usuario que un vínculo abrirá un documento con un formato diferente.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Una forma de hacer un seguimiento de las interacciones del usuario es enviar un ping a una URL cuando se hace clic en un vínculo. El atributo ping, si está presente, incluye una lista separada por espacios de URLs seguras (que comienzan con https) a las que se debe notificar o enviar un ping si el usuario activa el hipervínculo. El navegador envía solicitudes POST con el cuerpo PING a las URLs que se indican como el valor del atributo ping.

Sugerencias para mejorar la experiencia del usuario

  • Siempre ten en cuenta la experiencia del usuario cuando escribas código HTML. Los vínculos deben proporcionar suficiente información sobre el recurso vinculado para que el usuario sepa en qué está haciendo clic.
  • Dentro de un bloque de texto, la apariencia de tus vínculos debe diferir lo suficiente del texto circundante para que los usuarios puedan identificar más fácilmente los vínculos de otro contenido. Usa varios indicadores visuales, como el color y un subrayado. El color por sí solo no es suficiente.
  • Siempre incluye estilos de enfoque. Esto ayuda a los usuarios que navegan con el teclado a saber dónde se encuentran cuando se desplazan por tu contenido con la tecla Tab.
  • El contenido entre la etiqueta de apertura <a> y la de cierre </a> es el nombre accesible predeterminado del vínculo y debe informar al usuario sobre el destino o el propósito del vínculo. Si el contenido de un vínculo es una imagen, la descripción de alt es el nombre accesible. El texto del vínculo y el texto de alt deben ser más descriptivos que "haz clic aquí" o "más información". En cambio, debe ofrecerle al usuario información sobre adónde irá cuando se active el vínculo. Esto es fundamental para los usuarios de lectores de pantalla y los resultados de los motores de búsqueda.
  • No incluyas contenido interactivo, como <button> o <input>, dentro de un vínculo. Tampoco anides un vínculo dentro de un <button> o <label>. Si bien la página HTML se seguirá renderizando, anidar elementos enfocables y en los que se puede hacer clic dentro de elementos interactivos genera una mala experiencia del usuario.
  • Si el atributo href está presente, presionar la tecla Intro mientras se enfoca el elemento <a> lo activará.
  • Los vínculos no se limitan al lenguaje HTML. El elemento a también se puede usar dentro de un SVG, lo que forma un vínculo con los atributos "href" o "xlink:href".

El atributo links devuelve un HTMLCollection que coincide con los elementos a y area que tienen un atributo href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

En esta sección, aprendiste todo sobre los vínculos. En la siguiente sección, se abordan las listas, que debemos aprender para poder crear listas de vínculos, también conocidas como navegación.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los vínculos.

¿Qué hace el vínculo nofollow?

Hace que el vínculo no sea apto para hacer clic.
Vuelve a intentarlo.
Indica a los rastreadores que no sigan el vínculo.
Correcto.
Hace que tu visita al sitio no se pueda rastrear.
Vuelve a intentarlo.

¿Qué vínculos te llevarán a la parte superior de la página?

#start
Vuelve a intentarlo.
#
Correcto.
#top
Correcto.