Cómo poner hipervínculos o enlaces en HTML

Aprendamos a colocar hipervínculos en HTML a nuestras páginas web, es una tarea muy fácil y a la vez muy útil para mejorar la usabilidad de una página, nos da el poder de dirigir a los usuarios a otras direcciones URL, además de ello conoceremos los atributos que corresponden a enlaces HTML.

Cómo hacer un hipervínculo en HTML

Colocar un enlace en HTML a un texto es mucho más fácil de lo que puedas imaginar, es tan simple como abrir y cerrar la etiqueta para enlace son sus respectivos atributos y valores.

Etiqueta <a>

Para definir enlaces o hipervínculos utilizaremos la etiqueta <a> de la siguiente manera:

<a> texto del enlace</a>

Sin embargo aún no hemos indicado a dónde debe apuntar dicho enlace, por lo cual aún no funciona; para ello haremos uso del atributo href, como veremos más adelante.

Atributos para enlaces HTML

Existen varios atributos para los enlaces, en esta lección los desarrollamos detalladamente cada uno de ellos, a continuación los nombramos:

• href
• target
• rel

Existen muchos más, sin embargo, estos te son los principales. Ahora vemos cómo se usan y los valores que pueden tomar estas.

Atributo href para enlaces HTML

Para indicar la dirección destino del enlace utilizaremos el atributo href, En todo caso quedaría de la siguiente manera.

<a href="URL"> texto ancla </a>

• El atributo href contiene el valor de la url de destino, es decir, el link o dirección web.
• El texto ancla es el texto visible, o el texto que contiene el enlace, el texto donde se hará clic.
• <a> puede ir dentro de un párrafo para un texto ancla específico.
• Se puede colocar enlace tanto a texto como a imágenes.

Ahora nos toca crear nuestro primer enlace de texto, veamos el ejemplo:

Ejemplos de Hipervínculos en HTML

A continuación veamos ejemplos concretos en las que se coloca un en lace a un pedazo de texto dentro de párrafos:

Haga clic <a href="https://desarrolladoresweb.org/">en este enlace </a> para ir a desarrolladoresweb.org

<p> Este es un párrafo bastante bueno para ejemplo de Hipervínculos en HTML, este es un párrafo bastante bueno este es un párrafo bastante seguidamente colocaremos un enlace html para que veas cómo se inserta un enlace en el siguiente texto: <a href="https://www.example.com/"> haga clic en este enlace</a> de ejemplo, bueno este párrafo bastante bueno continua, este es un párrafo bastante bueno este es un párrafo bastante bueno para un ejemplo de enlace.</p>

Resultado del ejemplo anterior:

Ahora verás que si clicamos sobre los respectivos enlaces, estos nos dirigen hacia las respectivas direcciones asignadas.

Atributo target para enlaces HTML

Por defecto, los enlaces se abren en una misma ventana del navegador web, para que el enlace se habrá en una nueva ventana el atributo target toma el valor «_blank» de la siguiente manera:

Ejemplo:

<a href="https://www.example.com/" target="_blank">Este enlace se abrirá en una nueva ventana</a>

Atributo rel para enlaces HTML

El atributo rel de HTML sirve para indicar la relación que existe entre la página del cual sale el enlace y la página que recibe el enlace, muy importante para indicar a los motores de búsqueda dicha relación y también a los usuarios.

Valores para el atributo rel

• sponsored.- para indicar que el enlace es un enlace de pago.
• ugc.- indica que el enlace es un enlace generado por el usuario, por ejemplo, un enlace escrito en un comentario.
• nofollow.- indica a los motores de búsqueda que no siga el enlace como si fuera natural.

Ejemplo:

<a href="https://www.example.com/"  rel="nofollow">Este enlace, es un enlace nofollow de ejemplo</a>

listo, por ahora es suficiente, en la siguiente lección continuaremos aprendiendo a manejar las etiquetas de imagen y todo lo relacionado. También aprenderemos a poner enlaces o hipervínculos a imágenes en HTML, es muy simple, ya lo verás.

[popup_anything id=»4350″]