Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic para pasar de una página a otra.
Hipervínculos
Los enlaces HTML son hipervínculos.
Puedes hacer clic en un enlace y saltar a otro documento.
Cuando mueva el mouse(cursor) sobre un enlace, la flecha del mouse se convertirá en una mano✋ pequeña.
Nota: Un enlace no siempre tiene que ser un texto, puede ser una imagen o cualquier otro elemento HTML.
Sintáxis
La etiqueta HTML <a> define un hipervínculo, y tiene la siguiente sintaxis:
<a href="url">Vínculo</a>
El atributo href es el más importante del elemento <a>, que indica el destino del enlace.
El texto del enlace es la parte que será visible para el lector.
Al hacer clic en el texto del enlace, se enviará al lector a la dirección URL especificada.
Ejemplo:
Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores:
Enlace no visitado subrayado y en azul
Enlace visitado subrayado y en morado
Enlace activo subrayado y en rojo
Tip: Por supuesto, los enlaces se pueden diseñar con CSS, para obtener otro aspecto.
El atributo target
Por defecto, la página vinculada se mostrará en la ventana actual del navegador. Para cambiar esto, debes especificar otro destino para el vínculo.
El atributo target especifica dónde abrir el documento vinculado.
El atributo target puede tener uno de los siguientes valores:
_self- por defecto. Abre el documento en la misma ventana/pestaña en la que se hizo clic._blanck- Abre el documento en una nueva ventana o pestaña._parent- Abre el documento en el marco principal._top- Abre el documento en el cuerpo completo de la ventana.
Ejemplo:
URLs absolutas vs. relativas
Ambos ejemplos anteriores utilizan una URL absoluta (una dirección web completa) en el atributo href.
Un enlace local (un enlace a una página dentro del mismo sitio web) se especifica con una URL relativa (sin la parte "https://www"):
Ejemplo:
<h2>URLs absolutas</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>URLs relativas</h2>
<p><a href="html_images.asp">HTML Tutorial</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
Una imagen como enlace
Para usar una imagen como enlace, simplemente coloque la etiqueta <img> dentro de la etiqueta <a>:
Ejemplo:
Enlace a un correo electrónico
Use mailto: dentro del atributo href para crear un enlace que abra la aplicación de correo electrónico del usuario.
Ejemplo:
Un botón como enlace
Para usar un botón HTML como enlace, debes agregar algo de código JavaScript.
JavaScript le permite especificar lo que sucede en ciertos eventos, como hacer clic en un botón:
Ejemplo:
Títulos de enlace
El atributo title especifica información adicional sobre un elemento. La información generalmente se muestra como un texto informativo cuando el mouse pasa sobre el elemento.
Ejemplo:
Resumen
Usa el elemento
<a>para definir un enlaceUsa el atributo
hrefpara definir un dirección del enlaceUsa el atributo
targetpara definir dónde abrir el documento vinculadoUsa el elemento
<img>(dentro de<a>) para usar una imagen como enlaceUsa
mailto:dentro del atributohrefpara crear un vínculo que abre la aplicación de correo electrónico del usuario
Traducido con 💚 desde W3Schools.com