11 | Enlace ancla

Ancla es un enlace a cierto punto concreto de una determinada página HTML, de forma que mediante el enlace ancla el visitante salta directamente a ese lugar señalado de la página. En este post se explica la manera de llegar a dos secciones específicas de la página Enlazar vs. incrustar anteriormente mostrada.

Para crear un enlace es preciso distinguir entre dos conceptos y a cada cual le corresponderá un código HTML, los conceptos son:

• Punto de destino, su código será un identificador.
• Punto de origen, su código HTML es la URI completa del punto de destino.

---

Punto de destino

Supongamos que en cierto lugar de la página http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html se desea colocar un par de anclas que serán los puntos de destino. Para ello se escribirá en cada punto de destino el siguiente código:

<div id="AnclaEnlazar"> </div>
<div id="AnclaIncrustar"> </div>

Punto de origen

Para referirse directamente uno de los puntos anteriormente definidos, habrá que usar la correspondiente URI completa. En el caso que nos ocupa, una de las direcciones sería: http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar donde a la referencia de la página se le ha añadido, por ejemplo, el identificador del primer punto de destino.

<div id="AnclaEnlazar"> </div>

Continuando con el caso anterior, distingamos entre sí estas tres URIs:

1. Ir al comienzo de la página http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html
   
2. Ir a una sección de la página http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar
   
3. Ir a otra sección de la página http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar