Ejemplos de Enlaces, Ligas O Hipervinculos En HTML

Inicio » HTML » Enlaces, ligas o hipervinculos en HTML

Los enlaces, ligas o hipervínculos son elementos fundamentales de Internet. Nos permiten navegar dentro de páginas web, hacia otras páginas y por supuesto a recursos y documentos. A continuación, te mostramos todo lo que debes saber para crear y utilizar enlaces en HTML para conectar distintas páginas y recursos de manera efectiva y accesible.

¿Qué es un enlace, liga o hipervínculo en HTML?

Un enlace, liga o hipervínculo son sinónimos y básicamente es un elemento donde simplemente haciendo clic te lleva a otro lugar de Internet. Los enlaces pueden llevar a otras páginas web, archivos multimedia, direcciones de correo electrónico, entre otros.

Para poner un enlace o liga, se utiliza la etiqueta <a>. La etiqueta <a> permite enlazar a otro archivo o página dentro o fuera de nuestro sitio web. El atributo href es el encargado de especificar la dirección URL del recurso al que se enlaza.

Ejemplo de liga a página web

En este ejemplo, creamos un enlace simple que dirige a una página web externa:

<html>
<body>
<a href="https://www.ejemplo.com"> Visita nuestro sitio web </a> </body>
</html>

Ejemplo de liga a archivo multimedia

En este ejemplo, mostramos cómo crear enlaces para descargar archivos multimedia como imágenes y documentos PDF:

<html>
<body>
<a href="imagen.jpg" download>Descargar imagen</a> <br>
<a href="documento.pdf" download>Descargar documento PDF</a>
</body>
</html>

El atributo download indica al navegador que debe descargar el archivo en lugar de navegar hacia él.

Ejemplo de hipervínculo a correo electrónico

Al dar clic en un enlace, podemos hacer que se abra el correo electrónico del usuario. En este ejemplo, creamos un enlace que abre el cliente de correo electrónico predeterminado del usuario con una dirección de correo electrónico predefinida:

<html>
<body>
<a href="mailto:ejemplo@correo.com">
Envíanos un correo electrónico </a>
</body>
</html>

Enlaces ancla dentro de la misma página

Puedes enlazar a elementos específicos en la misma página utilizando el atributo id en el elemento de destino y referenciándolo en el atributo href con un hash (#) seguido del identificador.

Ejemplo enlaces internos en el mismo documento HTML

En este ejemplo, creamos enlaces que permiten al usuario navegar entre diferentes secciones de la misma página. Lo que sucede es un efecto de "scroll" dentro del mismo documento. Por ejemplo, la tabla de contenidos de esta página está construida con el siguiente código:

<html>
<body>
<h2 id="seccion1">Sección 1</h2> <p>Contenido de la sección 1...</p>
<h2 id="seccion2">Sección 2</h2> <p>Contenido de la sección 2...</p>
<a href="#seccion1">Ir a la Sección 1</a> <br>
<a href="#seccion2">Ir a la Sección 2</a>
</body>
</html>

Ejemplo de hipervínculo en una nueva ventana o pestaña

En ocasiones, es posible que desees abrir un enlace en una nueva ventana o pestaña del navegador. Para lograr esto, utiliza el atributo target con el valor _blank:

<html>
<body>
<a href="https://www.ejemplo.com" target="_blank"> Visita nuestro sitio web en una nueva pestaña </a>
</body>
</html>

El valor _blank indica al navegador que abra el enlace en una nueva ventana o pestaña.

Atributos adicionales

Es posible agregar más atributos a los enlaces para mejorar la accesibilidad y la experiencia del usuario. Por ejemplo, puedes agregar el atributo title para proporcionar información adicional sobre el enlace, y el atributo rel para especificar la relación entre el documento actual y el enlace.

<html>
<body>
<a href="https://www.ejemplo.com" target="_blank" title="Visita nuestro sitio web" rel="noopener noreferrer"> Visita nuestro sitio web en una nueva pestaña </a>
</body>
</html>

El atributo title proporciona información adicional al usuario al pasar el mouse sobre el enlace. El atributo rel con los valores noopener y noreferrer mejora la seguridad al abrir enlaces en una nueva ventana o pestaña.

¿Cómo citar? Pichardo, A. & Del Moral, M. (s.f.). Ejemplos de Enlaces, Ligas O Hipervinculos En HTML.Ejemplo de. Recuperado el 13 de Junio de 2024 de https://www.ejemplode.com/17-html/33-ejemplo_de_enlaces_ligas_o_hipervinculos_en_html.html

Escrito por:
Aziel Pichardo
Ingeniería en Sistemas
Universidad del Estado de Guanajuato
Editado por:
Mauricio del Moral Durán
Master en Comunicación
Universidad Intercontinental
Creado el: 2008-04-23
Última modificación: 2023-04-18

Últimos 10 comentarios

  1. Cómo hago ejemplos de hipervínculos si son 20.


    Por juan camilo castro contreras 2016-08-21 a las 21:45:58
  2. Gracias, es justo lo que necesitaba.
    Por GTF50012 2012-08-09 a las 23:10:43
  3. ejemplo para la clase
    Por kandy 2011-10-08 a las 20:23:03
  4. Deberían explicar como se usan y para que se utilizan,tampoco dicen que etiqueta utilizar para uno poder sacar una buena nota y hacer las cosas bien en la clase de informática.No es entendible el artículo.Además ya lo intenté como dice ahí y no sirvió :(
    Por Bella 2011-03-27 a las 21:26:04
  5. Podrian decirme como hacer para que el hypervinculo que esta en el frame izquerdo cargue una página en el frame derecho ´_`
    Por Yo 2010-11-06 a las 22:55:21
  6. deberían poner ejemplos con páginas porque quiero hacer un enlace a un documento en mi mismo equipo que no es html sino doc o exe y no puedo.
    Por rene 2010-03-02 a las 5:00:05
  7. pore que no ponen los ejemplos que son de enlaces.heeeeeeeeee????????
    Por almendra 2008-12-08 a las 21:15:10

Deja un comentario


Acepto la política de privacidad.