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.
Te recomendamos leer:  Elementos Inline y Block en HTML

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:

Enlaces en html
Imagen resultado de enlaces en html.

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.
Te recomendamos leer:  Listas en HTML - Cómo crear y poner viñetas

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.

lecciones HTML
Rate this post
4.3 6 votos
Calificación
guest
4 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Marcos
Marcos
2 año atrás

Hola me gustaría saber si se puede agregar en CSS un enlace …. como se puede agregar texto con ..::after: content:”TEXTO”;
quiero saber si se puede agregar un enlace completamente funcional gracias!!!

Jhon
Jhon
Reply to  Marcos
1 año atrás

Yo creo que si puedes hacerlo mediante los pseudo elementos, ya que se puede agregar casi cualquier elemento.
Encontré este artículo al respecto: https://desarrolladoresweb.org/css3/pseudo-clases-y-pseudo-elementos-de-css3/

Cristian Rosas
Cristian Rosas
3 meses atrás

Hola, no me aparece el texto ni el hipervínculo al momento de aplicarlo, saben que puede ser?

Desarrolladoresweb.org
Reply to  Cristian Rosas
3 meses atrás

Verifica que las etiquetas de apertura y cierre estén bien puestas, también, los atributos y valores necesarios. Asegúrate que tu documento cumpla con lo necesario para considerarse un documento HTML.