Ejemplos de 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.
Contenido del artículo
- • ¿Qué es un enlace, liga o hipervínculo en HTML?
- • Ejemplo de liga a página web
- • Ejemplo de liga a archivo multimedia
- • Ejemplo de hipervínculo a correo electrónico
- • Enlaces ancla dentro de la misma página
- • Ejemplo enlaces internos en el mismo documento HTML
- • Ejemplo de hipervínculo en una nueva ventana o pestaña
- • Atributos adicionales
¿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
Últimos 10 comentarios