Vínculos

En la introducción de la sección de atributos, viste un ejemplo que muestra cómo se agregan atributos a la etiqueta de apertura. En el ejemplo, se usaba la etiqueta <a>, pero no se analizaron el elemento ni los atributos específicos ingresados en él:

Etiqueta de apertura, atributos y etiqueta de cierre, etiquetados en un elemento HTML.

La etiqueta de anclaje <a>, junto con el atributo href, crean un hipervínculo. Los vínculos son la columna vertebral de Internet. La primera página web contenía 25 vínculos que decían "Todo lo que hay en línea sobre W3 está vinculado directa o indirectamente a este documento". Lo más probable es 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 muchísimo 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 se pueden crear mediante <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 del formulario completa. En esta sesión, aprenderás sobre la etiqueta <a>, de una sola letra y no 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 al <a> en un vínculo. El atributo href se utiliza para crear hipervínculos a ubicaciones dentro de la página actual, a otras páginas de un sitio o a otros sitios. También se pueden codificar para descargar archivos o enviar un correo electrónico a una dirección específica, incluso si incluye un asunto y el contenido del cuerpo del correo electrónico sugerido.

<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 URL absolutas incluyen un protocolo, en este caso https://, y un nombre de dominio. Cuando el protocolo se escribe simplemente como //, es un protocolo implícito y significa que "usa el mismo protocolo que se usa actualmente".

Las URLs relativas no incluyen un protocolo ni un nombre de dominio. Son "relativos" con respecto al archivo actual. MLW es un sitio de una sola página, pero esta serie HTML tiene varias secciones. Para vincular esta página a la lección de 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 se vinculará al elemento con id="teachers", si hay uno en la página actual. Los navegadores también admiten dos vínculos de la parte superior de la página: si haces clic en <a href="#top">Top</a> (no distingue mayúsculas de minúsculas) o simplemente <a href="#">Top</a>, se desplazará al usuario a la parte superior de la página, a menos que haya un elemento con el ID top configurado en el mismo caso de mayúsculas.

MLW es un documento bastante largo. Para ahorrar desplazamiento, puedes volver a agregar un vínculo a la parte superior desde la parte inferior de la sección #profesores:

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

El tercer vínculo combina ambos valores: contiene una URL absoluta seguida de un fragmento de vínculo. Esto permite vincular directamente a una sección en la URL definida, en este caso, la sección #teachers de la página principal de MLW. Se cargará la página del MLW y, luego, el navegador se desplazará a la sección 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, y la administración del vínculo depende del dispositivo, el sistema operativo y las aplicaciones instaladas.

No es necesario que el vínculo de mailto incluya una dirección de correo electrónico, pero puede hacerlo, junto con texto cc, bcc, subject y body para prepropagar el correo electrónico. De forma predeterminada, se abrirá un cliente de correo electrónico. Puedes prepropagar el asunto y el cuerpo del correo electrónico sin 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 mailto: y la dirección de correo electrónico, si corresponde, del término de búsqueda. Dentro de la consulta, el signo de unión (&) separa los campos y el signo igual (=) equivale a cada nombre de campo con su valor. Toda la string está codificada con porcentajes, lo cual es definitivamente necesario si el valor href no está entre comillas o si los valores incluyen comillas.

El tipo de app que se abre cuando el usuario hace clic en un vínculo tel, o bien lo presiona o lo presiona depende del sistema operativo, las aplicaciones instaladas y la configuración que el usuario tenga en el dispositivo. Un iPhone puede abrir FaceTime, la app del teléfono o los contactos. Un escritorio de Windows puede abrir Skype, si está instalado.

Hay muchos otros tipos de URL, como BLOB y URL de datos (consulta los ejemplos en el debate sobre los atributos download). En el caso de los sitios seguros (los que se entregan a través de https), es posible crear y ejecutar protocolos específicos de apps con registerProtocolHandler().

Si incluyes vínculos que puedan abrir otras aplicaciones instaladas, se recomienda comunicárselo 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 orientar estilos por tipo de aplicación.

Recursos descargables

Se debe incluir el atributo download 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 a fin de 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 lo 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 descargable con datos PNG.

Para establecer un vínculo a un recurso descargable, incluye la URL del recurso como el valor del atributo href y el nombre de archivo sugerido que se puede usar en el sistema de archivos del 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 mediante vínculos (y el envío de formularios). Las cuatro palabras clave que no distinguen mayúsculas de minúsculas y con prefijos de guion bajo se analizaron con el elemento <base>. Incluyen el _self predeterminado, que es la ventana actual, _blank, que abre el vínculo en una pestaña nueva, _parent, que es el superior si el vínculo actual está anidado en un objeto o iframe, y _top, que es el principal superior, lo que es especialmente útil si el vínculo actual está profundamente anidado. _top y _parent son los mismos que _self si el vínculo no está anidado. El atributo target no se limita a estos cuatro términos clave: se puede usar cualquier término.

Cada contexto de navegación (básicamente, cada pestaña del navegador) tiene un nombre de contexto de navegación. Los vínculos pueden abrir vínculos en la pestaña actual, en una pestaña nueva sin nombre o en una pestaña nueva o existente. De forma predeterminada, el nombre es una string 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".

Se abrirá un vínculo con target="_blank" en una pestaña nueva con un nombre nulo, y se abrirá una nueva pestaña 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 diferentes. Este problema se puede solucionar proporcionando un nombre de contexto de pestaña. Si incluyes el atributo target con un valor que distingue mayúsculas de minúsculas, como <a href="registration.html" target="reg">Register Now</a>, el primer clic en este vínculo abrirá el formulario de registro en una pestaña reg nueva. Si haces clic en este vínculo 15 veces más, se volverá a cargar el registro en el contexto de navegación de reg, sin abrir ninguna pestaña adicional.

El atributo rel controla los tipos de vínculos que 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 puntajes de valores de atributos rel admitidos por la etiqueta <a>.

Si no quieres que las arañas sigan el vínculo, puedes incluir la palabra clave nofollow. Se puede agregar el valor external para indicar que el vínculo dirige a una URL externa y que no es una página dentro del dominio actual. La palabra clave help indica que el hipervínculo proporcionará ayuda contextual. 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 utilices este valor solo para obtener el cursor de ayuda. En su lugar, utiliza la propiedad cursor de CSS. Los valores prev y next se pueden usar en vínculos que hagan referencia 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 para el feed 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 que no es el principal del documento, incluye el atributo lang. Si el idioma del documento con hipervínculo está en otro idioma, 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 de PDF del recurso vinculado. Si bien el tipo de MIME es meramente orientativo, siempre se recomienda 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 realizar un seguimiento de las interacciones del usuario es hacer 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 hacer ping si el usuario activa el hipervínculo. El navegador envía solicitudes POST con el cuerpo PING a las URLs que aparecen como el valor del atributo ping.

Sugerencias sobre la experiencia del usuario

  • Cuando escribas en HTML, siempre ten en cuenta la experiencia del usuario. 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, asegúrate de que la apariencia de tus vínculos difiera lo suficiente del texto que los rodea para que los usuarios puedan identificarlos fácilmente en el resto del contenido. Asegúrate de que el color por sí solo no sea el único medio para diferenciar entre el texto y el contenido que los rodea.
  • Incluye siempre estilos de enfoque; esto permite que los navegadores del teclado sepan dónde se encuentran cuando navegan por el contenido con tabulador.
  • El contenido entre el <a> de apertura y el </a> de cierre es el nombre de acceso predeterminado del vínculo y debe informar al usuario sobre el destino o propósito del vínculo. Si el contenido de un vínculo es una imagen, la descripción alt es el nombre de acceso. Si el nombre accesible proviene del atributo alt o de un subconjunto de palabras en un bloque de texto, asegúrate de que proporcione información sobre el destino del vínculo. El texto del vínculo debe ser más descriptivo que "haz clic aquí" o "más información". Esto es importante para los usuarios de lectores de pantalla y los resultados del motor de búsqueda.
  • No incluyas contenido interactivo, como <button> o <input>, dentro de un vínculo. Tampoco anides un vínculo en un <button> o <label>. Si bien la página HTML se seguirá procesando, si se anidan elementos enfocables y en los que se puede hacer clic dentro de elementos interactivos, se crea una mala experiencia del usuario.
  • Si el atributo href está presente, puedes activarlo presionando la tecla Intro mientras el elemento <a> está enfocado.
  • Los vínculos no se limitan a HTML. El elemento a también se puede usar dentro de un archivo SVG, lo que forma un vínculo con los atributos "href" o "xlink:href".

El atributo links muestra 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 agruparlas con el objetivo de crear listas de vínculos (también conocidas como navegación).

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre vínculos.

¿Qué hace el vínculo nofollow?

Impide que se pueda hacer clic en el vínculo.
Vuelve a intentarlo.
Les pide a las arañas que no sigan el vínculo.
Correcto.
Impide que se realice un seguimiento de tu visita al sitio.
Vuelve a intentarlo.

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

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