HTML Enlaces
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.
Enlaces HTML - Hipervínculos
Los enlaces HTML son hipervínculos.
Puedes hacer clic en un enlace y saltar a otro documento.
Cuando mueves el ratón sobre un enlace, la flecha del ratón se convertirá en una pequeña mano.
Nota: No es necesario enviar un enlace por mensaje de texto. ¡Un enlace puede ser una imagen o cualquier otro elemento HTML!
HTML Enlaces - Sintaxis
La etiqueta HTML <a> define un hipervínculo. Tiene la siguiente sintaxis:
<a href="url">Texto del enlace</a>
El atributo más importante del elemento <a> es el atributo href, que indica la dirección del enlace destino.
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
Este ejemplo muestra cómo crear un enlace a W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Inténtalo tú mismo »
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
Consejo: Los enlaces, por supuesto, se pueden diseñar con CSS para darles otro aspecto.
HTML Enlaces: el atributo objetivo
De forma predeterminada, la página vinculada se mostrará en la ventana actual del navegador. Para cambiar esto, debe especificar otro destino para el enlace.
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_blank- 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
Utilice target="_blank" para abrir el documento vinculado en una nueva ventana o pestaña del navegador:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Inténtalo tú mismo »
URL absolutas frente a URL relativas
Los dos 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>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
Inténtalo tú mismo »
HTML Enlaces: utilice una imagen como enlace
Para usar una imagen como enlace, simplemente coloque la etiqueta <img> dentro de la etiqueta <a>:
Ejemplo
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Inténtalo tú mismo »
Enlace a una dirección de correo electrónico
Utilice mailto: dentro del atributo href para crear un vínculo que abra el programa de correo electrónico del usuario (para permitirle enviar un nuevo correo electrónico):
Botón como enlace
Para utilizar un botón HTML como enlace, debe agregar código JavaScript.
JavaScript le permite especificar qué sucede en ciertos eventos, como hacer clic en un botón:
Ejemplo
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Inténtalo tú mismo »
Consejo: Obtenga más información sobre JavaScript en nuestro JavaScript Tutorial.
Títulos de enlaces
El atributo title especifica información adicional sobre un elemento. La información suele mostrarse como texto de información sobre herramientas cuando el ratón se mueve sobre el elemento.
Ejemplo
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit HTML Tutorial</a>
Inténtalo tú mismo »
Más sobre URL absolutas y URL relativas
Ejemplo
Utilice una URL completa para vincular a una página web:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Inténtalo tú mismo »
Ejemplo
Enlace a una página ubicada en la carpeta html del sitio web actual:
<a href="/html/default.asp">HTML tutorial</a>
Inténtalo tú mismo »
Ejemplo
Enlace a una página ubicada en la misma carpeta que la página actual:
<a href="default.asp">HTML tutorial</a>
Inténtalo tú mismo »
Puede leer más sobre las rutas de archivos en el capítulo Rutas de archivos HTML.
Resumen del capítulo
- Utilice el elemento
<a>para definir un enlace - Utilice el atributo
hrefpara definir la dirección del enlace - Utilice el atributo
targetpara definir dónde abrir el documento vinculado - Utilice el elemento
<img>(dentro de<a>) para utilizar una imagen como enlace - Utilice el esquema
mailto:dentro del atributohrefpara crear un vínculo que abra el programa de correo electrónico del usuario
HTML Etiquetas de enlace
| Tag | Descripción |
|---|---|
| <a> | Define un hipervínculo |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestro HTML Tag Referencia.
