MEJOR SITIO PARA DESARROLLADORES WEB
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django CÓMO W3.CSS AI Más 🔍 ◑ Libros REFERENCIAS EJERCICIOS
HTML5 Lecciones para principiantes

Ua En De

HTML Enlaces

❮ Prev Next ❯

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):

Ejemplo

<a href="mailto:someone@example.com">Enviar correo electrónico</a>
Inténtalo tú mismo »

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 href para definir la dirección del enlace
  • Utilice el atributo target para 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 atributo href para 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.

❮ Prev Next ❯