HTML
Anclas e hipervínculos
Buscar..
Introducción
Las etiquetas de anclaje se usan comúnmente para vincular páginas web separadas, pero también se pueden usar para vincular diferentes lugares en un solo documento, a menudo dentro de la tabla de contenido o incluso para lanzar aplicaciones externas. Este tema explica la implementación y la aplicación de etiquetas de anclaje HTML en varias funciones.
Sintaxis
<a href="URL or anchor">Link Text</a>
Parámetros
| Parámetro | Detalles |
|---|---|
href | Especifica la dirección de destino. Puede ser una URL absoluta o relativa, o el name de un ancla. Una URL absoluta es la URL completa de un sitio web como http://example.com/ . Una URL relativa apunta a otro directorio y / o documento dentro del mismo sitio web, por ejemplo, /about-us/ apunta al directorio "about-us" dentro del directorio raíz ( / ). Cuando se apunta a otro directorio sin especificar explícitamente el documento, los servidores web normalmente devuelven el documento "index.html" dentro de ese directorio. |
hreflang | Especifica el idioma del recurso vinculado por el atributo href (que debe estar presente con este). Utilice los valores de idioma de BCP 47 para HTML5 y RFC 1766 para HTML 4. |
rel | Especifica la relación entre el documento actual y el documento vinculado. Para HTML5, los valores deben definirse en la especificación o registrarse en la wiki de Microformats . |
target | Especifica dónde abrir el enlace, por ejemplo, en una nueva pestaña o ventana. Los valores posibles son _blank , _self , _parent , _top y framename (en desuso). No se recomienda forzar dicho comportamiento, ya que viola el control del usuario sobre un sitio web. |
title | Especifica información extra sobre un enlace. La información se muestra con mayor frecuencia como un texto de información sobre herramientas cuando el cursor se mueve sobre el enlace. Este atributo no está restringido a enlaces, se puede usar en casi todas las etiquetas HTML. |
download | Especifica que el destino se descargará cuando un usuario haga clic en el hipervínculo. El valor del atributo será el nombre del archivo descargado. No hay restricciones en los valores permitidos, y el navegador detectará automáticamente la extensión de archivo correcta y la agregará al archivo (.img, .pdf, etc.). Si se omite el valor, se usa el nombre de archivo original. |
Enlace a otro sitio
Este es el uso básico del elemento <a> ( un elemento nchor) :
<a href="http://example.com/">Link to example.com</a>
Crea un hipervínculo a la URL http://example.com/ según lo especificado por el atributo href (referencia de hipertexto), con el texto de enlace "Vincular a example.com". Se vería algo como lo siguiente:
Para indicar que este enlace lleva a un sitio web externo, puede utilizar el tipo de enlace external :
<a href="http://example.com/" rel="external">example site</a>
Puede vincular a un sitio que utiliza un protocolo distinto de HTTP. Por ejemplo, para enlazar a un sitio FTP, puede hacer,
<a href="ftp://example.com/">This could be a link to a FTP site</a>
En este caso, la diferencia es que esta etiqueta de anclaje solicita que el navegador del usuario se conecte a example.com mediante el Protocolo de transferencia de archivos (FTP) en lugar del Protocolo de transferencia de hipertexto (HTTP).
Esto podría ser un enlace a un sitio FTP
Abrir enlace en una nueva pestaña / ventana
<a href="example.com" target="_blank">Text Here</a>
El atributo de target especifica dónde abrir el enlace. Al configurarlo en _blank , le indica al navegador que lo abra en una nueva pestaña o ventana (según la preferencia del usuario).
SEGURIDAD VULNERABILIDAD ADVERTENCIA!
El uso de
target="_blank"le da al sitio de apertura acceso parcial al objetowindow.openertravés de JavaScript, lo que le permite a esa página acceder y cambiar lawindow.opener.locationde su página y potencialmente redirigir a los usuarios a sitios de malware o phishing.Cuando utilice esto para las páginas que no controla, agregue
rel="noopener"a su enlace para evitar que el objetowindow.openerse envíe con la solicitud.Actualmente, Firefox no admite
noopener, por lo que deberá usarrel="noopener noreferrer"para obtener el máximo efecto.
Enlace a un ancla
Los anclajes se pueden usar para saltar a etiquetas específicas en una página HTML. La etiqueta <a> puede apuntar a cualquier elemento que tenga un atributo id . Para obtener más información sobre las identificaciones, visite la documentación sobre Clases e identificaciones . Los anclajes se usan principalmente para saltar a una subsección de una página y se usan junto con las etiquetas de encabezado.
Supongamos que ha creado una página ( page1.html ) sobre muchos temas:
<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>
Una vez que tenga varias secciones, es posible que desee crear una Tabla de contenido en la parte superior de la página con enlaces rápidos (o marcadores) a secciones específicas.
Si asignó un atributo de id a sus temas, podría vincularlos
<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>
Ahora puedes usar el ancla en tu tabla de contenido:
<h1>Table of Contents</h1>
<a href='#Topic1'>Click to jump to the First Topic</a>
<a href='#Topic2'>Click to jump to the Second Topic</a>
Estos anclajes también se adjuntan a la página web en la que se encuentran ( page1.html ). Por lo tanto, puede enlazar el sitio de una página a otra haciendo referencia a la página y al nombre del ancla.
Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.
Enlace que ejecuta JavaScript
Simplemente use el protocolo javascript: para ejecutar el texto como JavaScript en lugar de abrirlo como un enlace normal:
<a href="javascript:myFunction();">Run Code</a>
También puedes lograr lo mismo usando el atributo onclick :
<a href="#" onclick="myFunction(); return false;">Run Code</a>
El return false; es necesario para evitar que su página se desplace hacia la parte superior cuando se hace clic en el enlace a # . Asegúrese de incluir todo el código que le gustaría ejecutar antes, ya que la devolución detendrá la ejecución de otro código.
También cabe destacar, puede incluir un signo de exclamación ! después del hashtag para evitar que la página se desplace hacia arriba. Esto funciona porque cualquier barra no válida hará que el enlace no se desplace a ninguna parte de la página, porque no pudo ubicar el elemento al que hace referencia (un elemento con id="!" ). También puedes usar cualquier slug no válido (como #scrollsNowhere ) para lograr el mismo efecto. En este caso, return false; no es requerido:
<a href="#!" onclick="myFunction();">Run Code</a>
¿Deberías estar usando algo de esto?
La respuesta es casi seguro que no . Ejecutar JavaScript en línea con el elemento como este es una práctica bastante mala. Considere utilizar soluciones de JavaScript puras que busquen el elemento en la página y vincule una función a él en su lugar. Escuchando un evento
También considere si este elemento es realmente un botón en lugar de un enlace . Si es así, debes usar
<button>.
Enlace a una página en el mismo sitio
Puede utilizar una ruta relativa para vincular a las páginas en el mismo sitio web.
<a href="/example">Text Here</a>
El ejemplo anterior iría al example archivo en el directorio raíz ( / ) del servidor.
Si este enlace estuviera en http://example.com , los siguientes dos enlaces llevarían al usuario a la misma ubicación
<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>
Ambos de los anteriores irán al archivo de la page en el directorio raíz de example.com .
Enlace que ejecuta el cliente de correo electrónico.
Uso básico
Si el valor del atributo href comienza con mailto: intentará abrir un cliente de correo electrónico al hacer clic:
<a href="mailto:[email protected]">Send email</a>
Esto colocará la dirección de correo electrónico [email protected] como el destinatario del correo electrónico recién creado.
Cc y Bcc
También puede agregar direcciones para los destinatarios de cc o bcc usando la siguiente sintaxis:
<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>
Texto del asunto y del cuerpo
También puede rellenar el asunto y el cuerpo del nuevo correo electrónico:
<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>
Esos valores deben estar codificados en URL .
Al hacer clic en un enlace con mailto: intentará abrir el cliente de correo electrónico predeterminado especificado por su sistema operativo o le pedirá que elija qué cliente desea usar. No todas las opciones especificadas después de la dirección del destinatario son compatibles con todos los clientes de correo electrónico.
Enlace que marca un número.
Si el valor del atributo href comienza con tel: su dispositivo marcará el número cuando haga clic en él. Esto funciona en dispositivos móviles o en computadoras / tabletas que ejecutan software, como Skype o FaceTime, que pueden hacer llamadas telefónicas.
<a href="tel:11234567890">Call us</a>
La mayoría de los dispositivos y programas le pedirán al usuario que confirme el número que está a punto de marcar.