Como crear enlaces ancla (anchor) en Html, Tutorial

por

Contenido:

  1. Que es un enlace ancla
  2. Por qué utilizar enlaces ancla
  3. Como crear un enlace ancla

Que es un enlace ancla(anchor)

 

Un ancla es un enlace <a></a> que centra la pantalla en un punto concreto de una página, al principio del articulo los enlaces de contenido son anclas.

Por qué utilizar enlaces ancla (anchor)

 

Hoy en día hay que facilitar en lo máximo posible la comodidad del usuario y con el uso mayoritario de los teléfonos móviles las anclas (anchors) son de lo más útil.

Los tiempos de espera en los dispositivos móviles son de lo mas molestos, evitarlos o reducirlos es recomendable, la diferencia de carga entre dos páginas con cierta información, o una sola con toda la información de ambas es notable, es mas cómodo esperar una sola vez un segundo extra que dividir esa espera, las cargas aunque cortas hacen que la navegación se sienta lenta.

Si utilizamos enlaces ancla podemos tener más información accesible con menos cargas y que la experiencia del usuario siga siendo cómoda

Como crear un enlace ancla (anchor)

 

Crear enlaces ancla es bastante sencillo, estos necesitan dos componentes para funcionar.

Un identificador en el punto enlazado

 

Para que un ancla funcione necesitamos identificar el punto de destino de esta. Para hacerlo bastara con crear una id en la división, recordad que las ids tienen que tener un nombre único en toda la web.

Ejemplo:

<p id=”nombre_del_ancla”> Además de párrafo puede ser un título, foto o cualquier elemento al que le puedas asignar una id</p>

Crear el enlace

 

Un ancla es similar a cualquier enlace <a> que podamos crear, basta con que en donde ponemos el enlace poner #nombre_del_ancla donde nombre_del_ancla es el identificador del elemento destino.
En caso de hacerlo con código ira en el apartado href, si lo hacemos con algun tipo de editor simplemente introducirlo en el espacio reservado para el enlace.

Ejemplo con cogido:

<a href=”#nombre_del_ancla”>Sección/elemento a enlazar</a>

Volver al inicio