¿Qué es un elemento ancla en HTML y para qué sirve?

Un sitio web realmente funciona cuando los usuarios pueden navegar entre sus páginas sin ninguna complicación. En caso de que estés creando un sitio web y notes que no tiene fluidez en sus elementos o que no es fácil llegar a determinadas secciones, puede que necesites aprender sobre el elemento ancla en HTML.

Gracias a él facilitarás la interacción con el contenido, ya sea dirigiendo al usuario a otra página, a una sección específica dentro de la misma página, o incluso abriendo aplicaciones externas como el correo electrónico.

¿Qué es un elemento ancla en HTML?

Un elemento ancla en HTML se usa para crear enlaces dentro de una página web. La idea de usarlo, es que permita la navegación entre diferentes secciones de un sitio, o bien, se pueda redirigir a los usuarios a otras páginas o recursos dentro de la web. Lo reconocerás fácilmente con el código HTML <a>, y por lo general, se usa junto con el atributo href para definir el destino del enlace.

Sintaxis básica de un ancla en HTML

La estructura básica de un ancla en HTML es muy sencilla:

<a href="URL_destino">Texto del enlace</a>

• Aquí, href es el atributo que define la URL o el destino del enlace.
• El texto entre las etiquetas <a> es el que se mostrará al usuario como enlace.
• Al hacer clic en ese texto, el navegador llevará al usuario a la URL especificada en el atributo href.

¿Para qué sirve el elemento ancla en HTML?

Aparte de lo que te comenté, el elemento ancla en HTML tiene múltiples usos en la construcción de sitios web, los más comunes incluyen:

Enlazar a otras páginas web

Uno de los usos más comunes de las anclas es enlazar a otras páginas o recursos en línea. Estos enlaces pueden ser externos, apuntando a otros sitios web, o internos, dentro del mismo dominio.

Ejemplo de enlace a una página externa

<a href="https://www.keepcoding.io">Visita KeepCoding</a>

Al hacer clic en este enlace, el navegador llevará al usuario a la página de KeepCoding.

Enlazar a secciones dentro de la misma página

Otra función útil de las anclas es la posibilidad de crear enlaces dentro de la misma página. Esto se logra utilizando fragmentos de URL:

• Usa el símbolo # seguido de un ID de un elemento en la página.

Ejemplo de enlace a una sección interna de la misma página

<a href="#contacto">Ir a la sección de contacto</a>

Este enlace llevará al usuario directamente a la sección que tenga el id=”contacto”, sin necesidad de cargar una nueva página.

Enlaces de correo electrónico

Con el ancla en HTML también puedes crear enlaces que abren el cliente de correo del usuario para enviar un correo electrónico de manera rápida. Esto se logra utilizando el esquema mailto:.

Ejemplo de enlace para enviar un correo

<a href="mailto:[email protected]">Envíanos un correo</a>

Al hacer clic en este enlace, se abrirá el cliente de correo predeterminado del usuario con la dirección de correo ya completada.

Enlaces a números de teléfono

Con el ancla en HTML también puedes crear enlaces a números de teléfono. Sirve mucho cuando se visualiza una página web en dispositivos móviles, ya que al hacer clic en el enlace, el teléfono se marcará automáticamente.

Ejemplo de enlace a un número de teléfono

<a href="tel:+34123456789">Llámanos</a>

Atributos adicionales de la etiqueta <a>

Estos son otros atributos con los que funciona la etiqueta <a> y que modifican su comportamiento y funcionalidad:

target=”_blank”

Este atributo se usa para especificar en qué contexto se abrirá el enlace. Si deseas que el enlace se abra en una nueva pestaña del navegador, debes usar target=”_blank”.

Ejemplo de uso de target=”_blank”

<a href="https://www.keepcoding.io" target="_blank">Visita KeepCoding</a>

download

Para que el enlace descargue un archivo en lugar de navegar a una página, puedes usar el atributo download. Así el navegador sabrá que la URL proporcionada debe descargarse como un archivo.

Ejemplo de enlace para descargar un archivo

<a href="archivo.pdf" download>Descargar PDF</a>

rel

El atributo rel especifica la relación entre la página de origen y la página de destino. Si utilizas target=”_blank”, le puedes agregar rel=”noopener noreferrer” para mejorar la seguridad.

Ejemplo de uso de rel

<a href="https://www.keepcoding.io" target="_blank" rel="noopener noreferrer">Visita KeepCoding</a>

Construir páginas web interactivas y funcionales te tomara menos tiempo si aprendes a usar el elemento ancla en HTML, tal y como te lo explique aquí. En el desarrollo web el uso de anclas es uno de los primeros pasos para lograr sitios web bien estructurados, además del menú en HTML y las listas desplegables.

Profundiza más en HTML, CSS, JavaScript y otros lenguajes esenciales para el desarrollo web, ¡te invitamos a apuntarte al Bootcamp Programación desde Cero de KeepCoding! Aprenderás desde lo más básico hasta convertirte en un experto, con el apoyo de los mejores instructores. ¡Es tu oportunidad para comenzar una nueva carrera en el sector IT!