¿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:
| ATRIBUTO | DESCRIPCIÓN |
| href | Atributo principal. Indica la direccion del recurso. Pueden usarse rutas absolutas o relativas. |
| hreflang | Atributo de lenguaje que indica en qué idioma debe ser presentado el recurso. |
| target | Indica cómo o dónde debe abrirse el recurso. Los valores permitidos son _blank | _parent | _self | _top. |
| download | Atributo tipo booleano. Indica si el recurso se descarga al presionar el enlace o se abre en el navegador. |
| ping | Al pulsar el enlace, el atributo ping le indica al navegador que debe solicitar o navegar por una lista de URLs. |
| rel | Atributo 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. |
| type | Indica el tipo de contenido del recurso. Por defecto, se especifica “all“. |
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!
