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 re­di­re­c­cio­na­mie­n­to a di­re­c­cio­nes 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 co­rre­c­ta­me­n­te, el atributo href se integra pe­r­fe­c­ta­me­n­te en tu página web y aparece ahí en forma de hi­pe­r­ví­ncu­lo. Los vi­si­ta­n­tes 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 es­tru­c­tu­ra mediante los links generados, facilitan la na­ve­ga­ción o pro­po­r­cio­nan in­fo­r­ma­ció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 pre­ce­de­n­te).

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

¿Qué es­tru­c­tu­ra 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 im­po­r­ta­n­te:

• La a introduce el link. La a designa un texto de anclaje. Esta etiqueta HTML define el punto inicial y final del hi­pe­r­ví­ncu­lo.
• 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, do­cu­me­n­tos PDF o imágenes.
• La URL a la que debe dirigir el enlace se pone entre comillas.
• A co­n­ti­nua­ció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 de­s­cri­p­ti­vo del enlace). El link title puede contener in­fo­r­ma­ció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 im­po­r­ta­n­tes. 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 pree­s­ta­ble­ci­dos, el enlace no fu­n­cio­na­rá co­rre­c­ta­me­n­te. Los valores que admite href son los si­guie­n­tes:

• Una URL absoluta. La URL absoluta es el ejemplo clásico de uso del atributo a href. Redirige di­re­c­ta­me­n­te a una página web externa. Contiene el nombre de dominio, la ruta y (si está di­s­po­ni­ble) 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 es­pe­ci­fi­ca 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 in­te­r­na­me­n­te secciones concretas de tu página web. Ejemplo: <a href="#section3">Enlace directo a un elemento</a>
• Otros pro­to­co­los: href también nos vale para otros usos como, por ejemplo, si quieres es­ta­ble­cer un enlace directo a una dirección de correo ele­c­tró­ni­co concreta. Esto funciona a través del protocolo mailto:. Otros pro­to­co­los posibles son, entre otros, https://, ftp:// o file:.
• Scripts. Los scripts como, por ejemplo, Ja­va­S­cri­pt también son valores admitidos en el atributo a href. Ejemplo: <a href="javascript:alert('¿Tienes más preguntas?');">

Cinco ejemplos de apli­ca­ción de a href

Se le puede dar un gran número de usos a a href a la hora de im­ple­me­n­tar el atributo en tu página web. A co­n­ti­nua­ció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 ele­c­tró­ni­co

Para crear un link a una dirección de correo ele­c­tró­ni­co, 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 ele­c­tró­ni­co e insertará au­to­má­ti­ca­me­n­te la dirección es­pe­ci­fi­ca­da (pe­r­so­nae­je­m­plo@pa­gi­nae­je­m­plo.mx) en el campo del de­s­ti­na­ta­rio. Como al­te­r­na­ti­va, el visitante puede hacer clic con el botón derecho del ratón en la dirección de correo ele­c­tró­ni­co 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 es­pe­cia­l­me­n­te útil si alguien accede a tu página desde su sma­r­t­pho­ne y quiere ponerse en contacto contigo di­re­c­ta­me­n­te. El enlace tiene el siguiente aspecto:

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

Aquí es im­po­r­ta­n­te que añadas el signo más y el prefijo in­te­r­na­cio­nal después de la re­fe­re­n­cia te­le­fó­ni­ca tel:

Crear un link a un Ja­va­S­cri­pt

También puedes crear un link a un Ja­va­S­cri­pt con href. El código co­rre­s­po­n­die­n­te 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 di­re­c­ta­me­n­te 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 pe­r­ma­ne­cen un mayor tiempo en tu página web y pueden buscar in­fo­r­ma­ción adicional po­s­te­rio­r­me­n­te. Para ello, utiliza el siguiente código:

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