Cuando navegas por una página web y haces click en un texto que te lleva a otra, estás usando un enlace o link. Estos enlaces se crean con la etiqueta a href, una de las más importantes del lenguaje HTML. Los enlaces son la base de Internet, sin enlaces no existiría Internet tal y como lo conocemos, así que esta etiqueta es una de las más importantes en la web.

En esta guía te explicamos de forma clara qué es exactamente la etiqueta a href, cómo funciona y cómo puedes usarla correctamente para crear enlaces. Si estás empezando con HTML o quieres entender mejor cómo se enlazan los contenidos en la web, este artículo es para ti.

Qué es la etiqueta a href en HTML y cómo usarlo para crear enlaces

• Qué es la etiqueta a href y para qué sirve en HTML
• Cómo usar la etiqueta a href con ejemplos prácticos
• Diferentes tipos de enlaces en la etiquetas a href
• Atributos para personalizar tus enlaces
  • target
  • title
  • rel
  • hreflang
  • type
• La importancia de los enlaces para el SEO
  • Enlaces internos
  • Enlaces externos (backlinks)
  • Enlaces salientes
  • ¿Y qué pasa con el atributo nofollow?
• Estilos CSS en las etiquetas a href
  • Quitar el subrayado y cambiar el color al pasar el ratón
  • Enlaces que parecen botones
  • Enlaces con icono o flecha al pasar el ratón
  • Cambiar el estilo de los enlaces ya visitados
• Conclusión

Qué es la etiqueta a href y para qué sirve en HTML

La etiqueta a href en HTML se utiliza para crear enlaces que permiten conectar una página web con otra. Es uno de los elementos más básicos y esenciales del lenguaje HTML, ya que hace posible que los usuarios puedan moverse entre distintos contenidos con solo hacer click.

La palabra “a” viene del inglés anchor (ancla) y sirve para definir el enlace. El atributo “href” significa hypertext reference, es decir, la dirección o ruta a la que apunta ese enlace. Juntos forman la estructura que se usa para enlazar desde un texto o una imagen a cualquier otra parte de la web.

Con esta etiqueta se pueden crear enlaces internos, que llevan a otra parte de la misma web o enlaces externos, que redirigen al usuario a un sitio distinto. También se pueden usar para navegar dentro de una misma página, enlazando a secciones específicas, por ejemplo, entre los menús de la cabecera o el pie de página..

Saber cómo usar correctamente la etiqueta a href es algo que debes saber utilizar, si estás creando una web, escribiendo un blog o simplemente aprendiendo a trabajar con HTML.

Cómo usar la etiqueta a href con ejemplos prácticos

La estructura básica de un enlace con a href es así:

<a href="dirección_web">Texto que se mostrará como enlace</a>

• <a href="...">: Esta es la etiqueta de apertura del enlace, indicando que lo que viene a continuación es un hipervínculo y especificando la dirección web en el atributo href.
• dirección_web: Aquí pones la URL de la página a la que quieres enlazar. Puede ser otra página de tu mismo sitio web o una página de otro sitio.
• Texto que se mostrará como enlace: Este es el texto que los usuarios verán en la página y en el que podrán hacer clickpara seguir el enlace. A veces, en lugar de texto, se pone una imagen.
• </a>: Esta es la etiqueta de cierre del enlace, indicando que hasta aquí llega el hipervínculo.

Por ejemplo, si quieres crear un enlace a la página principal de Google, el código sería:

<a href="https://www.google.com">Ir a Google</a>

En tu página web, verías el texto "Ir a Google". Al hacer clicken él, tu navegador te llevaría a la página de Google. ¡Así de fácil!

Diferentes tipos de enlaces en la etiquetas a href

Los enlaces son muy versátiles y te permiten conectar con diferentes tipos de recursos:

• Enlaces Externos: Te llevan a otras páginas web que no pertenecen a tu sitio. Para esto, usas la URL completa o URL absoluta, que incluye el https:// o http:// y el nombre del dominio (como https://www.ejemplo.com).

  <a href="https://www.wikipedia.org">Visitar Wikipedia</a>
  

• Enlaces Internos: Te llevan a otras páginas dentro de tu propio sitio web. Aquí, puedes usar URL relativas, que son más cortas y solo indican la ruta dentro de tu sitio (por ejemplo, /contacto.html).

  <a href="https://axarnet.es/blog">Blog de Axarnet</a>
  

• Enlaces de Anclaje: Te permiten saltar a una sección específica dentro de la misma página. Primero, marcas la sección de destino con un atributo id. Luego, en el enlace, usas el símbolo # seguido del id de la sección. Estos enlaces sueles encontrarlos al principio de una página, en los que se conoce como Tabla de Contenidos o TOC, para que puedas acceder a una sección dentro de la misma página de forma rápida, sin necesidad de hacer scroll.

  <h2>Tabla de Contenidos</h2>
  <ul>
      <li><a href="#seccion1">Ir a la Sección 1</a></li>
      <li><a href="#seccion2">Ir a la Sección 2</a></li>
  </ul>
  
  <h2 id="seccion1">Sección 1</h2>
  <p>Este es el contenido de la sección 1.</p>
  
  <h2 id="seccion2">Sección 2</h2>
  <p>Este es el contenido de la sección 2.</p>
  

• Enlaces de Correo Electrónico: Abren automáticamente el programa de correo electrónico del usuario con una dirección ya escrita. Usas el protocolo mailto: seguido de la dirección de correo.

  <a href="mailto:info@misitio.com">Contactar por correo</a>
  

• Enlaces de Número de Teléfono: En dispositivos móviles, al hacer click en estos enlaces, se inicia una llamada telefónica. Usas el protocolo tel: seguido del número de teléfono.

  <a href="tel:+34123456789">Llamar ahora</a>
  

• Enlaces de Descarga: Permiten descargar un archivo al hacer clicken el enlace. Usas el atributo download dentro de la etiqueta <a>. Opcionalmente, puedes especificar el nombre del archivo para la descarga.

  <a href="/documentos/informe.pdf" download="informe_completo.pdf">Descargar informe</a>
  

Atributos para personalizar tus enlaces

Además del atributo href, la etiqueta a puede incluir otros atributos que te permiten controlar el comportamiento del enlace. Estos atributos son muy útiles para mejorar la experiencia del usuario, la seguridad del sitio y la optimización SEO.

A continuación te explicamos los más importantes:

target

Este atributo define dónde se abrirá el enlace cuando el usuario haga clic.

• _blank: Abre el enlace en una nueva pestaña o ventana del navegador. Es útil cuando enlazas a páginas externas y no quieres que el visitante abandone tu web.

Ejemplo:

<a href="https://www.youtube.com" target="_blank">Ver videos en YouTube</a>

title

El atributo title permite añadir un pequeño texto explicativo que aparece cuando el usuario pasa el ratón por encima del enlace. Es una forma sencilla de dar contexto o aclarar hacia dónde lleva el enlace.

Ejemplo:

<a href="/informacion.html" title="Más información sobre nosotros">Sobre nosotros</a>

rel

Este atributo indica la relación entre tu página y la página enlazada. Es especialmente importante cuando usas target="_blank", ya que puede afectar a la seguridad y al SEO.

Algunos valores útiles:

• nofollow: Indica a los motores de búsqueda que no deben seguir ese enlace. Se suele usar en enlaces de publicidad, comentarios o sitios poco confiables.
• noopener noreferrer: Protege tu web cuando abres enlaces en nuevas pestañas, evitando que la página enlazada pueda acceder a información de la tuya. Es recomendable usarlo siempre que uses target="_blank".

Ejemplo:

<a href="https://sitio-no-confiable.com" target="_blank" rel="noopener noreferrer nofollow">Enlace externo</a>

hreflang

Este atributo sirve para indicar el idioma del contenido al que estás enlazando. Es útil en sitios multilingües, ya que ayuda a los motores de búsqueda a entender qué idioma corresponde a cada versión de una página.

Ejemplo:

<a href="https://ejemplo.com/es/" hreflang="es">Versión en español</a>
<a href="https://ejemplo.com/en/" hreflang="en">English version</a>

type

Con este atributo puedes especificar el tipo de contenido del archivo al que apunta el enlace, como por ejemplo un PDF, una imagen o un vídeo. Esto ayuda al navegador a preparar el archivo antes de abrirlo o descargarlo.

Ejemplo:

<a href="/documento.pdf" type="application/pdf">Abrir PDF</a>

La importancia de los enlaces para el SEO

Los enlaces no solo sirven para movernos de una página a otra. También son un elemento clave en el posicionamiento SEO. Los motores de búsqueda como Google analizan los enlaces para descubrir contenido nuevo, entender la estructura de una web y determinar qué páginas son más relevantes.

Enlaces internos

Son los enlaces que van de una página a otra dentro de tu propio sitio. Son muy importantes porque:

• Ayudan a organizar tu contenido y a guiar al usuario por tu web.
• Permiten distribuir la autoridad SEO entre tus páginas, mejorando la visibilidad de las que enlazas.
• Facilitan que Google rastree e indexe correctamente tu sitio.

Un buen uso de enlaces internos puede mejorar el tiempo de permanencia de los usuarios y dar más peso a las páginas que más te interesa posicionar.

Enlaces externos (backlinks)

Cuando otros sitios web enlazan al tuyo, estás recibiendo lo que se llama un enlace externo o backlink. Para Google, estos enlaces son una señal de confianza. Si una web de calidad te menciona y enlaza tu contenido, entiende que tu sitio ofrece valor, y eso puede ayudarte a subir posiciones en los resultados de búsqueda.

Por eso es importante conseguir enlaces naturales desde blogs, medios, foros o redes sociales relacionados con tu sector.

Enlaces salientes

También puedes enlazar tú desde tu web hacia otras páginas. Estos enlaces salientes ayudan a complementar tu contenido, aportan valor al lector y, si enlazas a sitios de confianza, también pueden mejorar tu reputación a ojos de Google.

¿Y qué pasa con el atributo nofollow?

El atributo rel="nofollow" sirve para decirle a Google que no debe seguir un enlace ni transferir autoridad SEO a la página enlazada. Esto no significa que el enlace no funcione, sino que no influirá en el posicionamiento de esa otra web.

¿En qué casos conviene usarlo?

• Cuando enlazas a sitios poco confiables o cuyo contenido no puedes controlar.
• En comentarios o foros, donde los usuarios pueden incluir enlaces sin tu supervisión.
• En enlaces de afiliación o publicidad, para evitar que Google los vea como manipulaciones del posicionamiento.

Por ejemplo, si tienes un blog y escribes sobre una herramienta que te gusta, puedes enlazarla sin nofollow. Pero si te pagan por recomendarla o es un enlace de afiliado, deberías usar nofollow para seguir las buenas prácticas de Google.

En cambio, si otras webs enlazan a la tuya y usan el atributo nofollow, ese enlace no te transmitirá autoridad SEO. Aun así, puede traerte visitas, y eso también tiene valor.

Estilos CSS en las etiquetas a href

Cuando añades un enlace con la etiqueta a href, el navegador suele mostrarlo con color azul y subrayado. Si ya has hecho clic en él antes, cambia a color morado. Este estilo básico puede ser útil, pero si quieres que tu web tenga un diseño más personalizado y moderno, puedes modificar fácilmente la apariencia de los enlaces usando CSS (Hojas de Estilo en Cascada).

Con CSS puedes cambiar el color, quitar o añadir subrayado, aplicar efectos al pasar el ratón y mucho más. Aquí te mostramos algunos ejemplos comunes que puedes aplicar a tus enlaces:

Quitar el subrayado y cambiar el color al pasar el ratón

a {
  text-decoration: none; /* Elimina el subrayado */
  color: #0E76BE; /* Cambia el color del enlace */
}

a:hover {
  text-decoration: underline; /* Añade subrayado al pasar el ratón */
  color: green; /* Cambia el color al pasar el ratón */
}

Este estilo es muy útil si quieres mantener tus enlaces limpios pero aún así mostrar una reacción visual al hacer hover (pasar el ratón).

Enlaces que parecen botones

Si quieres destacar un enlace importante, puedes darle apariencia de botón:

a.boton {
  display: inline-block;
  background-color: #F1592B;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

a.boton:hover {
  background-color: #102963;
}

Para usar este estilo, solo tienes que añadir la clase boton a tu enlace:

<a href="/contacto" class="boton">Contáctanos</a>

Esto ayuda mucho en llamadas a la acción como “Compra ahora”, “Suscríbete” o “Ver más”.

Enlaces con icono o flecha al pasar el ratón

También puedes usar CSS para añadir detalles visuales como un icono o una flecha cuando el usuario pasa el ratón:

a.efecto::after {
  content: " →";
  transition: margin-left 0.3s;
}

a.efecto:hover::after {
  margin-left: 5px;
}

Este pequeño efecto visual da sensación de movimiento y puede hacer que tus enlaces sean más atractivos.

Cambiar el estilo de los enlaces ya visitados

Puedes controlar el color de los enlaces que el usuario ya ha visitado con el selector :visited:

a:visited {
  color: purple;
}

Esto es útil si quieres mantener un estilo coherente pero seguir indicando qué páginas ya han sido visitadas.

Conclusión

Como has visto, la etiqueta a href es una de las más importantes del HTML. Gracias a ella, podemos crear enlaces que conectan contenidos, mejoran la navegación y ayudan a posicionar mejor una página web en los buscadores.

Además, con un poco de CSS, es posible personalizar el estilo de los enlaces para que encajen perfectamente con el diseño de tu sitio. Y si sabes cuándo usar atributos como nofollow o target, estarás dando un paso más en la optimización técnica y SEO de tu web.

Si estás empezando tu proyecto online y aún no tienes un sitio web, recuerda que puedes contratar hosting con nosotros y empezar a crear tus páginas desde cero. En Axarnet te lo ponemos fácil para que des tus primeros pasos en el mundo del desarrollo web.