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 donde debe apuntar dicho enlace y eso lo haremos con el atributo href.

Atributos para enlaces HTML

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

  • href
  • target
  • rel

Existen muchos más, pero estos te son los principales. Ahora vemos como 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
  • 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 especifico.
  • Se puede colocar enlace tanto a texto como a imágenes.
Te recomendamos leer:  Cómo hacer tablas 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 este es un párrafo   bastante bueno este es un párrafo bastante seguidamente colocaremos un enlace html para que veas como se inserta un enlace en el siguiente texto: <a href="https://www.deingenieriaswq.com/"> haga clic en este enlace</a>, bueno este es un párrafo bastante bueno este es un párrafo bastante bueno este es un párrafo bastante bueno</p>

Resultado del ejemplo anterior:

Enlaces en html
Imagen resultado de enlaces en html

Ahora ver;as 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.deingenierias.org/" 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 pagina del cual sale el enlace y la pagina 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.
  • nofollow.- indica a los motores de búsqueda que no siga el enlace como si fuera natural.
Te recomendamos leer:  Cómo insertar una imagen en HTML

Ejemplo:

<a href="https://www.deundominid.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.

lecciones HTML
5 2 votos
Calificación
guest
2 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Marcos
Marcos
1 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/