How to use a href in HTML for adding links to your website

a href se utiliza para insertar enlaces externos e internos en una página web. Los valores que admite el atributo HTML href vienen bien definidos. Algunos ejemplos de los usos que ofrece a href son los enlaces a otras páginas web, así como el redireccionamiento a direcciones de correo o números de teléfono.

¿Qué es href y para qué sirve?

Con a href se crean enlaces internos o externos en un documento HTML. Utilizado correctamente, el atributo href se integra perfectamente en tu página web y aparece ahí en forma de hipervínculo. Los visitantes pueden hacer clic sobre él para ir a otra página o a otro destino dentro de tu propia web. href significa “hyper reference” e indica el link de destino deseado. Usar atributos href en tu página web tiene numerosas ventajas. Por ejemplo, te permiten organizar mejor la estructura mediante los links generados, facilitan la navegación o proporcionan información adicional. Los links también pueden servir al SEO. De acuerdo con Google, no importa si utilizas una URL absoluta (con nombre de dominio) o una URL relativa (sin nombre de dominio precedente).

Para mostrar este video, se requieren cookies de terceros. Puede acceder y cambiar sus ajustes de cookies aquí.

¿Qué estructura tiene a href?

La sintaxis de href en HTML es siempre la misma y tiene el siguiente aspecto:

<a href="URL">Texto ancla</a>

Cada elemento cumple una función importante:

• La a introduce el link. La a designa un texto de anclaje. Esta etiqueta HTML define el punto inicial y final del hipervínculo.
• El atributo href se utiliza dentro del texto de anclaje y define el link de destino objetivo. Además de una página web interna o externa, aquí también se pueden enlazar, por ejemplo, documentos PDF o imágenes.
• La URL a la que debe dirigir el enlace se pone entre comillas.
• A continuación, se encuentra el texto que será visible, es decir, sobre el cual hará clic el visitante de la página web.
• Por último, se cierra el texto de anclaje.

A menudo, los enlaces se combinan con el atributo title para definir el link title (un texto descriptivo del enlace). El link title puede contener información extra sobre la página web enlazada. Para ver el link title, hay que pasar el ratón por encima del texto ancla sin clicar sobre este. Para el SEO, los link titles también son importantes. En HTML, presentan el siguiente aspecto:

<a href="URL" title="Link title">Texto ancla</a>

¿Qué valores puede tomar href?

Los valores que puede tener el atributo href en HTML vienen bien definidos. En caso de salirse de esos valores preestablecidos, el enlace no funcionará correctamente. Los valores que admite href son los siguientes:

• Una URL absoluta. La URL absoluta es el ejemplo clásico de uso del atributo a href. Redirige directamente a una página web externa. Contiene el nombre de dominio, la ruta y (si está disponible) el nombre del archivo. Ejemplo: <a href="www.paginaejemplo.mx/tema/index.html">URL absoluta a página web de ejemplo</a>
• Una URL relativa. En una URL relativa solo se especifica la ruta y, de forma opcional, el nombre del archivo. Es por ello que las URL relativas son más cortas que las absolutas. Ejemplo: <a href="/tema/index.html">URL relativa a página web de ejemplo</a>
• Link a un elemento. Es posible crear un link directo a un elemento si este tiene un ID propio. Esto te da la opción de enlazar internamente secciones concretas de tu página web. Ejemplo: <a href="#section3">Enlace directo a un elemento</a>
• Otros protocolos: href también nos vale para otros usos como, por ejemplo, si quieres establecer un enlace directo a una dirección de correo electrónico concreta. Esto funciona a través del protocolo mailto:. Otros protocolos posibles son, entre otros, https://, ftp:// o file:.
• Scripts. Los scripts como, por ejemplo, JavaScript también son valores admitidos en el atributo a href. Ejemplo: <a href="javascript:alert('¿Tienes más preguntas?');">

Cinco ejemplos de aplicación de a href

Se le puede dar un gran número de usos a a href a la hora de implementar el atributo en tu página web. A continuación, te mostramos algunos de los usos más comunes de href en HTML.

Utilizar una imagen como link

Si lo que quieres es utilizar href para que una imagen actúe como link y te redirija a una subpágina, utiliza el siguiente código:

<a href="https://www.paginaejemplo.mx"><img src=" /imagenejemplo.jpg" alt="Descripción de la imagen"></a>

Crear un link a una dirección de correo electrónico

Para crear un link a una dirección de correo electrónico, utiliza mailto como prefijo justo antes de la dirección. Debe tener el siguiente aspecto:

<a href="mailto:personaejemplo@paginaejemplo.mx">personaejemplo@paginaejemplo.mx</a>

Si el visitante hace clic en el enlace, se abrirá su programa estándar de correo electrónico e insertará automáticamente la dirección especificada (personaejemplo@paginaejemplo.mx) en el campo del destinatario. Como alternativa, el visitante puede hacer clic con el botón derecho del ratón en la dirección de correo electrónico y copiarla al programa o pegarla en otro lugar.

Crear un link a un número de teléfono

También puedes enlazar un número de teléfono con a href. Esto es especialmente útil si alguien accede a tu página desde su smartphone y quiere ponerse en contacto contigo directamente. El enlace tiene el siguiente aspecto:

<a href="tel:+34623123456">623 123 456</a>

Aquí es importante que añadas el signo más y el prefijo internacional después de la referencia telefónica tel:

Crear un link a un JavaScript

También puedes crear un link a un JavaScript con href. El código correspondiente es el siguiente:

<a href="javascript:Ejemplo ( ) ">Ejemplo</a>

Abrir el link en una nueva pestaña o ventana

Aunque incluir links en tu página web puede ser útil, no debes enviar tus visitas directamente desde tu página web a otra página web externa. Todo lo contrario, puede ser más útil abrir el link en una nueva pestaña o en una nueva ventana del navegador. De esta manera, los usuarios permanecen un mayor tiempo en tu página web y pueden buscar información adicional posteriormente. Para ello, utiliza el siguiente código:

<a href="http://www.example.org" target="_blank">http://www.example.org</a>