Enlaces en HTML

Autor: | Última modificación: 10 de mayo de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post:

¿Alguna vez te has preguntado qué sería de la web sin los enlaces? Prácticamente nada, un montón de información sin conexión. Sin los enlaces en HTML no se hubiera entrelazado todo lo que conocemos en la red y no habría diferencia entre ver la información en un libro que en una pantalla.

Esto se debe a que los enlaces permiten la conexión entre múltiples recursos. Para generar estas conexiones, usamos HTML y, puntualmente, el elemento <a> (a de anchor) y el atributo href. Vamos a conocer cómo se crean los enlaces en HTML en la web.

Tipos de rutas

Antes de entrar en materia, hay que aclarar los dos tipos de rutas que usan los enlaces en HTML, que son las rutas absolutas y las relativas.

Las rutas absolutas son aquellas en las que se especifica la página web completa. Es prácticamente copiar todo el enlace de la barra de navegación.

<a href="https:\\keepcoding.io">Lo mejores Bootcamps Full Stack en Keepcoding</a>

Por otro lado, las rutas relativas son aquellas que enlazan con algún archivo HTML ubicado en el mismo espacio que nuestro documento HTML activo. Es decir, si nuestro archivo se llama index.html y tenemos un documento guardado en la misma carpeta llamado cursos.html, podemos enlazarlos así:

<a href="cursos.html">Lo mejores cursos en Keepcoding</a>

Tipos de enlaces en HTML

Ahora bien, conociendo los tipos de rutas es momento de conocer los tipos de enlaces en HTML más usados en las páginas web.

Enlaces a páginas web

Estos enlaces son los que usan las rutas absolutas. Son los más usados y más comunes. Cabe señalar que la ruta especificada puede terminar con cualquier extensión. Por ejemplo:

<a href="https://keepcoding.io/keepcoding-Tech-School.png">Imagen de inicio</a>

Enlaces en imágenes

A veces es mejor usar una imagen como enlace que un texto. Puede ser más atractivo para el usuario y brindar una mejor descripción del enlace antes de visitarlo.

<a href="http://www.keepcoding.io"><img src="curso.jpg" alt="Foto curso de programación"/></a>

También se puede utilizar este tipo de enlace para ampliar imágenes o mostrar una miniatura de baja resolución y enlazarla a una foto de mejor calidad.

<a href="curso.png"><img src="thumbnail_curso.png" alt="curso de programación"/></a>

Enlaces de posición

Estos enlaces de posición, también conocidos como enlaces ancla, se usan para posicionarse en un espacio específico de una página. Este tipo de enlaces se usan en las tablas de contenidos, como la que ves en este artículo al inicio. Si pinchas en uno de los enlaces de la tabla de contenido, te lleva directamente al título. Así funciona este enlace.

Por lo tanto, para usar este enlace debemos usar el atributo id=»valor»., donde el id lo definimos como el sitio específico al que deseamos llegar al presionar el enlace.

Veamos un ejemplo en el que definimos que todo el párrafo anterior se llama «EnlacesPosicion»:

<p id="EnlacesPosicion">Estos enlaces de posición, también conocidos como...</p> 

Ahora, desde la tabla de contenido, definimos el enlace de la siguiente manera:

<a href="#EnlacesPosicion">Enlaces de posición</a>

Es importante anteceder el # al enlace en el atributo href para que funcione. De hecho, si solo usáramos el #, crearíamos un enlace que nos llevaría a la parte superior de la página web. Así es como funcionan las flechas de navegación que encuentras al final de una página web.

<a href="#">Enlace a la parte superior de la página</a>

Enlaces a ficheros

Como ya hemos mencionado, la extensión del enlace puede ser cualquiera que un navegador reconozca. Sin embargo, hay una extensión que los navegadores detectan como descargables. Esas extensiones generalmente son los archivos .rar/.zip/.7zip

<a href="https://keepcoding.io/curso.rar">Descargar curso</a>

Enlaces a correos

Tenemos un último tipo de enlace, el dedicado a los correos. Al presionar este tipo de enlaces, el navegador nos abre la aplicación predeterminada de correo.

<a href="mailto:[email protected]">Escribenos a [email protected]</a>

Ahora comprueba que el anterior código funciona. Debe quedarte así:

Escribenos a [email protected]

Atributos de enlaces en HTML

Llegados a otro punto, el elemento <a> permite los atributos globales y también unos propios, que son los siguientes:

ATRIBUTODESCRIPCIÓN
hrefAtributo principal. Indica la direccion del recurso. Pueden usarse rutas absolutas o relativas.
hreflangAtributo de lenguaje que indica en qué idioma debe ser presentado el recurso.
targetIndica cómo o dónde debe abrirse el recurso. Los valores permitidos son _blank | _parent | _self | _top.
downloadAtributo tipo booleano. Indica si el recurso se descarga al presionar el enlace o se abre en el navegador.
pingAl pulsar el enlace, el atributo ping le indica al navegador que debe solicitar o navegar por una lista de URLs.
relAtributo de gran relevancia que agrupa diferentes tipos de vínculos de forma no ordenada. Se usa para enriquecer al recurso enlazado. Los siguientes son los valores permitidos: alternate | author | bookmark | external | help | license | next | nofollow | noopener | noreferrer | opener | prev | search | tag.
typeIndica el tipo de contenido del recurso. Por defecto, se especifica «all«.
Atributos de enlaces en HTML

Aprende más sobre HTML

Este post te habrá ayudado a comprender que los enlaces en HTML son el corazón de los hipertextos y prácticamente de toda la web. Por tanto, si quieres aprender más sobre este tipo de etiquetas de HTML, te recomiendo que realices el Desarrollo Web Full Stack Bootcamp, con el que, en pocos meses, te convertirás en un experto dentro del sector. ¡Inscríbete!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]