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 ver:  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 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 ver:  Introducción a HTML y al desarrollo web

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 1 votar
Calificación
guest
2 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Marcos
Marcos
10 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!!!

Jhon
Jhon
Reply to  Marcos
4 meses 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/

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

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

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

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5