Etiqueta HTML <a>
La etiqueta HTML <a> crea hipervínculos a páginas, archivos, secciones y enlaces de correo o teléfono. Ver ejemplos de target, rel y download.
La etiqueta <a> se utiliza para insertar hipervínculos a otras páginas, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL. Puedes usar tanto texto como imágenes como hipervínculo.
En el navegador, los hipervínculos difieren en su apariencia y color. De forma predeterminada, los enlaces HTML aparecen como texto azul subrayado. Cuando pasas el cursor sobre un enlace, se vuelve rojo (enlace activo). Los enlaces que ya se han visitado se vuelven morados.
Puedes cambiar el color de los enlaces, quitar el subrayado o cambiar el color de los enlaces usando estilos de CSS.
Los atributos "download", "media", "hreflang", "target", "rel" y "type" solo estarán presentes si el atributo "href" está presente.
Hasta que definas otro destino, la página enlazada se muestra en la ventana actual del navegador.
Sintaxis
La etiqueta <a> va en pares. El destino del enlace se establece con el atributo href en la etiqueta de apertura, y el contenido clicable (texto o imagen) se escribe entre las etiquetas de apertura (<a>) y cierre (</a>).
<a href="https://www.w3docs.com/">Visit W3docs</a>El texto "Visit W3docs" se convierte en el hipervínculo clicable, y al hacer clic en él se navega a la URL indicada en href.
Atributos
La etiqueta <a> puede tener atributos que proporcionan información adicional sobre ella.
El atributo href
El atributo href es un atributo obligatorio de la etiqueta <a>. Define un enlace en la página web o un lugar dentro de la misma página al que el usuario navega después de hacer clic en el enlace. El valor del atributo es un ancla o una URL. El ancla apunta al ID (identificador único) de la parte de la página web referenciada. Antes del ID se coloca una almohadilla (#).
Se ve así:
Etiqueta HTML <a>
<a href="url">the link text</a>
<a href="#a">the link text</a>Ejemplo de la etiqueta HTML <a> con el atributo href:
Example of the HTML <a> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Resultado
Haz clic en el enlace y serás redirigido a la página de inicio de nuestro sitio web.
Usando el atributo href de la etiqueta <a> con la etiqueta <img>, puedes crear una imagen enlazada.
Ejemplo de la etiqueta HTML <a> para crear una imagen enlazada:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
height: 90vh;
}
</style>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/France">
<img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
</a>
</body>
</html>El atributo target
El atributo target se utiliza para indicarle al navegador dónde abrir el documento (de forma predeterminada, los enlaces se abren en la ventana actual).
El atributo target puede tener los siguientes valores:
_blank– abre el enlace en una nueva ventana o pestaña._self– abre el enlace en la ventana actual (es el valor predeterminado)._parent– abre el documento en el marco padre._top– abre el documento en el cuerpo completo de la ventana.
Ejemplo de la etiqueta HTML <a> con el atributo target:
Example of the HTML <a> Tag with a target attribute|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Resultado
Seguridad con target="_blank": rel="noopener noreferrer"
Cuando abres un enlace en una nueva pestaña con target="_blank", la página recién abierta puede, en navegadores más antiguos, acceder a tu página mediante la propiedad JavaScript window.opener. Una página maliciosa podría usar esto para redirigir tu pestaña original a un sitio de phishing — un ataque conocido como reverse tabnabbing.
Para prevenirlo, añade rel="noopener noreferrer":
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
External site
</a>noopener– establecewindow.openerennullen la nueva pestaña, de modo que la página de destino no puede controlar ni hacer referencia a la página que la abrió.noreferrer– hace lo mismo quenoopenery además evita que el navegador envíe el encabezadoReferer, de modo que el destino no sabe desde qué página llegó el visitante.
Los navegadores modernos ahora implican noopener automáticamente para cualquier enlace con target="_blank", pero es una buena práctica establecer rel explícitamente para que la protección también se aplique en navegadores más antiguos y sea visible en tu código.
El atributo rel
Este atributo define la relación del documento actual con el documento enlazado. Los valores del atributo pueden ser los siguientes:
alternate– una versión alternativa del documento.author– referencia al autor del documento o artículo.bookmark– un enlace permanente para usarse en marcadores.nofollow– enlaza a un documento no respaldado (esto indica a los motores de búsqueda que el rastreador no debe seguir ese enlace).noopener/noreferrer– valores de seguridad usados contarget="_blank"(ver arriba).
El valor nofollow
Si quieres crear un enlace nofollow, usa rel="nofollow". Esto informa a los motores de búsqueda de que no respaldas el contenido al otro lado del enlace. El valor nofollow del atributo generalmente se utiliza en enlaces de pago y publicidad. A veces se considera nofollow como una etiqueta o atributo, pero en realidad es un valor del atributo rel.
Ejemplo del atributo rel con el valor "nofollow":
Example of the "rel" attribute with the "nofollow" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
</body>
</html>El atributo download
El atributo download indica al navegador que descargue el recurso enlazado en lugar de navegar hacia él. Funciona para recursos servidos desde el mismo origen (y para URLs blob: y data:).
Si le das al atributo un valor, ese valor se convierte en el nombre de archivo sugerido para el archivo guardado, independientemente del nombre del archivo en el servidor. Si lo dejas vacío, el navegador conserva el nombre de archivo original.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Saves the file using its original name -->
<a href="/files/report.pdf" download>Download the report</a>
<!-- Saves the same file as "annual-report.pdf" -->
<a href="/files/report.pdf" download="annual-report.pdf">
Download the annual report
</a>
</body>
</html>Enlaces de correo electrónico y teléfono: mailto: y tel:
Además de las URLs habituales, el atributo href puede contener esquemas especiales que abren la aplicación de correo electrónico o teléfono del visitante en lugar de una página web.
Un enlace mailto: abre el cliente de correo predeterminado con la dirección ya rellenada. También puedes añadir un asunto y cuerpo usando parámetros de consulta:
<a href="mailto:[email protected]">Email us</a>
<a href="mailto:[email protected]?subject=Hello&body=I%20have%20a%20question">
Email us about your question
</a>Un enlace tel: solicita al dispositivo que llame al número, lo cual es especialmente útil en teléfonos móviles:
<a href="tel:+1234567890">Call us: +1 (234) 567-890</a>Enlazar a una sección de la misma página (fragmentos)
Para saltar a una parte específica de una página, establece href con una almohadilla (#) seguida del id del elemento de destino. Esto se denomina enlace de fragmento o ancla.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- The link -->
<a href="#section2">Go to Section 2</a>
<h2 id="section1">Section 1</h2>
<p>First section content...</p>
<!-- The target: its id matches the href without the # -->
<h2 id="section2">Section 2</h2>
<p>Second section content...</p>
</body>
</html>Al hacer clic en el enlace, la página se desplaza hasta el elemento cuyo id coincide con el valor después del #. También puedes enlazar a una sección de otra página combinando una URL y un fragmento, por ejemplo href="page.html#section2". Para aprender más sobre cómo construir direcciones de enlace, consulta HTML URL.
El atributo hreflang
El atributo hreflang indica el idioma del documento al que apunta el enlace (por ejemplo, hreflang="es" para una página en español). Es puramente informativo — lo usan los motores de búsqueda y las tecnologías de asistencia — y no modifica la página actual. Esto es diferente del atributo global lang, que declara el idioma del elemento en el que se coloca.
<a href="https://es.example.com/" hreflang="es">Versión en español</a>Accesibilidad: escribe texto de enlace descriptivo
Los usuarios de lectores de pantalla suelen navegar saltando de enlace en enlace, escuchando solo el texto del enlace fuera de contexto. Un texto genérico como "haz clic aquí" o "leer más" no les dice nada sobre el destino. Asegúrate siempre de que el texto del enlace describa a dónde lleva.
<!-- Avoid -->
<p>To read our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text is meaningful on its own -->
<p>Read about <a href="/pricing">our pricing plans</a>.</p>Consulta HTML Links para más información sobre las mejores prácticas de enlazado.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| charset | char_encoding | Define el conjunto de caracteres de un documento enlazado. No se usa en HTML5. |
| coords | coordinates | Define las coordenadas de un enlace. No se usa en HTML5. |
| download | filename | Indica que el destino se descargará al hacer clic en el hipervínculo. |
| href | URL | Define la URL del documento enlazado. |
| hreflang | language_code | Define el idioma del documento enlazado. |
| media | media_query | Define para qué medio/dispositivo está optimizado el documento enlazado. |
| name | section_name | Define el nombre de un ancla. No se usa en HTML5. |
| ping | list_of_URLs | Define una lista de URLs separadas por espacios a las cuales, cuando se sigue el enlace, el navegador enviará en segundo plano solicitudes POST con el cuerpo ping. Típicamente se usa para seguimiento. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Define la relación entre el objeto de destino y el documento enlazado. |
| rev | text | Define un enlace inverso, la relación inversa del atributo "rel". No se usa en HTML5. |
| shape | default rect circle poly | Define la forma del hipervínculo. No se usa en HTML5. |
| target | _blank _parent _self _top | Define dónde abrir el documento enlazado. |
| type | media_type | Define el tipo de medio en forma de tipo MIME para la URL enlazada. |
La etiqueta <a> también admite los Atributos Globales y los Atributos de Evento.
Cómo aplicar estilos a una etiqueta HTML <a>
Los enlaces tienen cuatro estados que puedes estilizar por separado con pseudoclases CSS. Para que funcionen correctamente, deben escribirse en este orden: :link, :visited, :hover, :active (recuérdalo como "LoVe HAte").
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link { color: #1a73e8; } /* unvisited link */
a:visited { color: #6f42c1; } /* visited link */
a:hover { text-decoration: none; } /* on mouse-over */
a:active { color: #d93025; } /* on click */
</style>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>También puedes eliminar el subrayado o cambiar el color de los enlaces con CSS.