Etiqueta HTML <a>
Ejemplo
Crear un enlace a W3Schools.com:
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Try it Yourself »
Más ejemplos de "Try it Yourself" ("Pruébelo usted mismo") a continuación.
Definición y uso
La etiqueta <a> define un hipervínculo, que se utiliza para vincular de una página a otra.
El atributo más importante del elemento <a> es el atributo href, que indica la dirección del enlace destino.
De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los navegadores:
- Un enlace no visitado está subrayado y en azul
- Un enlace visitado está subrayado y en color violeta
- Un enlace activo está subrayado y en rojo
Consejos y notas
Consejo: Si la etiqueta <a> no tiene el atributo href, es solo un marcador de posición para un hipervínculo.
Consejo: Una página vinculada normalmente se muestra en la ventana actual del navegador, a menos que especifique otro destino.
Consejo: Utilice CSS para diseñar enlaces: enlaces CSS y botones CSS.
Soporte del navegador
| Elemento | |||||
|---|---|---|---|---|---|
| <a> | Sí | Sí | Sí | Sí | Sí |
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| download | filename | Especifique que el destino se descargará cuando un usuario haga clic en el hipervínculo. |
| href | URL | Especifique la URL de la página a la que va el enlace |
| hreflang | language_code | Especificar el idioma del documento vinculado |
| media | media_query | Especifique para qué medio/dispositivo está optimizado el documento vinculado |
| ping | list_of_URLs | Especifique una lista de URL separadas por espacios a las que, cuando se sigue el enlace, el navegador enviará solicitudes de publicación con el ping del cuerpo (en segundo plano). Normalmente, se utiliza para el seguimiento. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Especifique qué información de referencia enviar con el enlace |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Especifica la relación entre el documento actual y el documento vinculado |
| target | _blank _parent _self _top |
Especificar dónde abrir el documento vinculado |
| type | media_type | Especificar el tipo de medio del documento vinculado |
Atributos globales
La etiqueta <a> también soporta los Atributos Globales en HTML.
Atributos del evento
La etiqueta <a> también soporta los Atributos de Evento en HTML.
Más ejemplos
Ejemplo
Cómo utilizar una imagen como enlace:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>
Try it Yourself »
Ejemplo
Cómo abrir un enlace en una nueva ventana del navegador:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
Try it Yourself »
Ejemplo
Cómo vincular a una dirección de correo electrónico:
<a href="mailto:someone@example.com">Send email</a>
Try it Yourself »
Ejemplo
Cómo vincular a un número de teléfono:
<a href="tel:+4733378901">+47 333 78 901</a>
Try it Yourself »
Ejemplo
Cómo vincular a otra sección en la misma página:
<a href="#section2">Go to Section 2</a>
Try it Yourself »
Ejemplo
Cómo vincular a un JavaScript:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
Try it Yourself »
Páginas Relacionadas
HTML Tutorial: Enlaces HTML
HTML DOM referencia: Objeto de anclaje
CSS Tutorial: Enlaces de estilo
Configuración CSS predeterminada
La mayoría de los navegadores mostrarán el elemento <a> con los siguientes valores predeterminados:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
