Vinculando elementos con HTML5

En el blog de Alura tenemos algunas publicaciones muy largas sobre ciertos temas que demandan mucho contenido, pero eso hace que el desplazamiento de la página sea gigante.

Esto es lo que pasó, por ejemplo, con la publicación que escribió Sérgio Lopes Para una web más rápida: 26 técnicas de optimización de Sitios Web:

Pero, ¿y si quisiera leer solo un tema específico de este texto? Tendría que desplazarme durante mucho tiempo, intentando encontrar la parte que me interesa...

Para facilitar la navegación dentro de la propia página, una buena idea sería poder crear un índice que guiara al usuario sobre el contenido del texto, como un sumario de un libro, por ejemplo.

Crear una lista de tópicos

Para empezar, una buena idea sería crear una lista que contenga todos los tópicos de que tratará el texto, algo como:

<li>#1 – Habilite GZIP</li>
<li>#2 – Minifique JavaScript</li>
<li>#3 – Minifique CSS</li>
<li>#4 – Comprima el HTML</li>

Esto resultaría en una lista de tópicos, que podríamos agregar inmediatamente después de la introducción del texto:

Técnicas de optimización
#1 – Habilite GZIP
#2 – Minifique JavaScript
#3 – Minifique CSS
#4 – Comprima el HTML
#5 – No redimensione imágenes en HTML
#6 – Optimice las imágenes
#7 – Piense en el formato de las imágenes
#8 – Disminuya cooldes y headers
#9 – Junte archivos JavaScript
#10 – Juntar archivos CSS
#11 – Use Spreites
#12 – Use Data URIs
#13 – Configure los headers
#14 – Quite firulas del diseño
#15 – Especifique el tamaño de las imágenes
#16 – Coloque el JavaScript al final

¿Sería esta lista por sí sola suficiente para facilitar la búsqueda de temas dentro del texto? Aun así, el usuario tendría que desplazarse mucho para llegar a estos temas en la lista...

Pero, ¿y si pudiéramos saltar de una parte a otra de la página, yendo directamente a dónde necesitamos? Esto facilitaría la navegación, ¡ayudando al usuario a moverse más rápido por la página!

Entonces, una buena idea sería vincular los elementos de la lista con los tópicos correspondientes a lo largo del texto. ¡Con HTML logramos esta funcionalidad de una manera sencilla!

Vinculando puntos en la página

Con HTML podemos crear una especie de vínculo que enlaza diferentes elementos sin salir de la misma página. Es decir, primero necesitamos agregar algo que identifique a cada elemento para que podamos llamarlos de acuerdo con esta identificación.

Por ejemplo, si tomamos el primer tópico del texto:

<h3>#1 - Habilite GZIP</h3> 
Durante mucho tiempo he dicho que habilitar GZIP en el servidor es el primer paso. No se necesitan más de 30 segundos y es compatible con todos los navegadores...

Luego determinaremos una identificación (id) para este elemento.

<h3 id="habilite-gzip">#1 - Habilite GZIP</h3>

En este caso, el id como referencia habilite-gzip, por ejemplo. Cada caso pedirá una especificidad diferente.

Bien, con eso definido, ahora necesitamos crear un enlace al tópico dentro del texto, desde el índice del inicio.

En los elementos del índice agregamos exactamente esto: ¡enlaces!

<li><a href="#">#1 - Habilite GZIP</a></li>

Tenga en cuenta que no tenemos ningún enlace para insertar en nuestra referencia de link (href)... Pero entonces, ¿qué entra en (href)?

¿Recuerda que agregamos una identificación (id) específica para ese tópico, en la tag h3, que lo involucra? Es exactamente esta referencia la que indicaremos en href.

<li><a href="#habilite-gzip">#1 - Habilite GZIP</a></li>

Es decir, para indicar que queremos saltar dentro de la página directamente a la id indicada, se añadió un "#" antes de la indicación (id). Con esto, el enlace que creamos crea un vínculo dentro de la propia página, escaneando toda la página hasta encontrar la id correspondiente a lo indicado en href. :)

Ahora sí, ¡conseguimos vincular un enlace con otro punto dentro de la misma página!

Otros usos

Además de este índice de tópicos, hay otras formas de utilizar el vínculo, como los botones "Volver al principio". Algo como:

En estos casos, también tenemos un vínculo, pero nos devuelve al origen.

Independientemente del caso de uso, es importante tener en cuenta que este tipo de función sólo es relevante en páginas con mucho contenido, es decir, páginas donde el desplazamiento es tan grande que el usuario puede perderse en el medio del camino y, en consecuencia, puede perjudicar la usabilidad de nuestro sitio web.

Mejorando la navegabilidad

Si consideramos que hoy los usuarios son lectores con poco envolvimiento en la lectura de textos completos, considere que el vínculo de elementos dentro de la propia página es algo muy interesante para lograr una mejor navegabilidad.

De esta forma, facilitamos la búsqueda de lo que realmente interesa al usuario, dentro de nuestra página e incrementamos las posibilidades de mantenerlo interesado en lo que consideramos importante para su conversión.

Eso sí, a pesar de ser un recurso interesante, es importante utilizarlo con cautela, buscando analizar bien el contexto para validar si de hecho, es necesario utilizar este mecanismo.

Si te interesa este tema, aquí en Alura tenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.