Atributo href: qué es y cómo utilizarlo en tu web

El atributo href es uno de los recursos más utilizados online. Si no sabes en qué consiste y cómo aplicarlo en tu web, ¡sigue leyendo!

Añadir enlaces es una acción muy común que nos permite vincular una página web con otra, tanto interna como externa. Esta acción tan simple, es uno de los ejes principales que permiten al usuario navegar por la red y saltar de un contenido a otro relacionado o diferente con el objetivo de ampliar información o cambiar de página.

Href es el atributo que permite crear los enlaces en HTML que facilitan la navegación online.

Te contamos más a continuación.

¿Qué es y para qué sirve href?

Href es un atributo que se añade en HTML para indicar y enlazar una URL diferente a la que estamos y que queremos relacionar con el contenido.

El nombre href proviene de Hypertext Reference (referencia de hypertexto). Su significado sería algo así como una referencia complementaria (URL) que aporta información adicional al contenido donde se encuentra.

Añadiendo al atributo href la nueva URL de destino, generamos el enlace o hipervínculo, permitiendo que cualquier usuario acceda a él clicando.

Los hipervínculos sirven para sumar información, adjuntar documentos, permitir la navegación entre páginas, etc. A continuación, vemos cómo utilizarlos con diferentes ejemplos.

Estructura de enlaces con href

Si estás empezando a programar, quizás todavía no sepas que los enlaces en HTML empiezan con la etiqueta <a> y se terminan cerrando con </a>. Dentro de esta etiqueta es donde se añade el href y otros atributos de la siguiente forma:

Ejemplo de hipervínculo

<a href="https://www.dinahosting.com/">Web de dinahosting</a>

Este sería el código para generar un enlace a dinahosting.com, que en la página o contenido HTML se vería de la siguiente forma:

Web de dinahosting

Como ves, en la etiqueta href se pone la página a la que queremos enlazar y justo antes de cerrar el hipervículo con </a>, se indica el texto que queremos poner como enlace. Este texto enlazado recibe el nombre de anchor text.

En el href se indica la URL de destino y en el anchor text se pone el texto donde iría el enlace.

Otro apunte a tener en cuenta es que si quieres poner enlaces internos en tu propia web, no es necesario escribir la URL completa. En su lugar puedes utilizar URL relativas. Te ponemos un ejemplo:

• URL completa: https://dinahosting.com/blog/category/contenidos-tecnicos/marketing/
• URL relativa: /blog/category/contenidos-tecnicos/marketing/

En código iría tal que así:

<a href="/blog/category/contenidos-tecnicos/marketing/">Ejemplo de URL relativa</a>

Y se vería de la siguiente forma:

Como puedes comprobar, funciona igual que si ponemos la URL completa.

Ejemplo de hipervínculo en imagen

Además de poner enlaces con href sobre texto, también puedes poner enlaces sobre imágenes y añadir otros atributos.

<a href="https://www.dinahosting.com/" title="Accede a la web de dinahosting">
  <img src="https://dinahosting.com/blog/upload/2023/08/logo-color.jpg" alt="dinahosting logo" />
</a>

Así se vería:

Como ves, además del href hemos añadido dos nuevos atributos, uno de enlace llamado title y otro de imagen llamado alt.

El atributo title puedes verlo si dejas el ratón quieto sobre la imagen de ejemplo. Se trata de un tooltip donde puedes poner un texto explicativo del enlace.

El alt sería similar, ya que también añade un texto explicativo de la imagen, pero solo puedes verlo en el código. Es muy útil para persona con problemas de visión.

No te pierdas nuestro post si quieres saber más sobre el alt y otras metaetiquetas SEO importantes.

Veamos otros ejemplos de enlaces que te pueden venir bien.

Ejemplo de hipervínculo que abre en nueva ventana

Si navegas habitualmente por la red, te habrás fijado que hay enlaces que se abren en la misma ventana y otros que se abren en una nueva. Esto también se puede concretar con un atributo de la siguiente forma:

<a href="https://dinahosting.com/" target="_blank">https://dinahosting.com/</a>

El atributo target_=”_blank” sería el que indica que se abra en una nueva ventana el enlace. Aquí puedes probar como funciona:

Aunque no es necesario, ya que se aplica por defecto, si cambias _blank por _self el enlace se abrirá en la misma página en la que estés.

Ejemplo de hipervínculo a email

Si incluyes el texto mailto: dentro del href, el enlace abrirá un nuevo correo, en lugar de una nueva web, en el servicio de correo electrónico que tenga instalado el usuario por defecto.

<a href="mailto:correoejemplo@dinahosting.com">correoejemplo@dinahosting.com</a>

Así se vería:

Este tipo de enlaces, no siempre funcionan, ya que no todo el mundo tiene un programa de correo electrónico asociado. Si consigues abrirlo, verás que el correo electrónico aparecerá directamente en la ventana del nuevo correo como destinatario.

Ejemplo de hipervínculo a número de teléfono

Al igual que el correo, también puedes generar un enlace hacia un número de teléfono. Esto resulta muy útil para los usuarios que naveguen desde dispositivos móviles.

<a href="tel:+34900854000">900 854 000</a> 

Vista previa:

Ten en cuenta que en la etiqueta tel, debes añadir el número con el prefijo, +34 en el caso de números de España.

Ejemplo de hipervínculo de anclaje de texto

Los anclajes son para añadir enlaces dentro de la propia página a un área determinada, sea una sección, el principio del documento, un recurso o cualquier otro apartado.

Funcionaría de la siguiente forma:

Primero debes indicar con la etiqueta id donde quieres el anclaje. Por ejemplo, nosotros vamos a hacer uno hacia el inicio de este post.

<section id="inicio-post">
</section>

Una vez establecido el id en la página tenemos que llamarlo desde donde nos interese usando en el href el símbolo # con la id que hayamos elegido.

<a href="#inicio-post">Ir al inicio del post</a>

Se vería como este ejemplo:

Otra ventaja es que los anclajes también puedes usarse como URL absoluta y linkarlos desde otras páginas:

https://dinahosting.com/blog/atributo-href-que-es#inicio-post

Y hasta aquí nuestro repaso con los enlaces. Ahora que ya conoces los múltiples usos de href, ¡esperamos que lo pongas en práctica!