Cómo poner hipervínculos o enlaces en HTML

Anterior
Avanzar

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:  Etiquetas para texto HTML y formatos 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:  Etiquetas HTML tipos y ejemplos

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
Anterior
Avanzar
5 1 votar
Calificación
guest
1 Comentario
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Marcos
Marcos
4 meses 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!!!

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML