Navegar dentro de una misma página HTML

Aunque la navegación dentro de un mismo documento web es algo que lleva mucho tiempo funcionando dentro de las tecnologías web, a día de hoy, a vuelto a estar de moda gracias a los themes que aprovechan la navegación vertical sin cambio de URL. ¿Cómo funciona esta forma de navegar? Creo que todos conocéis la siguiente forma:

<a href="url_de_enlace">parte legible del enlace</a>

Con la que navegamos a URL de fuera del documento. Pero también podemos indicar la URL de dentro del documento, ¿cómo hacerlo? Se puede hacer de diferentes formas, usando jQuery por ejemplo, con lo que ampliamos las posibilidad y dotamos de más efectos a la misma acción. Sin embargo, explicaré en esta entrada la forma básica, la que ofrece la tecnología web de forma propia sin añadidos.

Lo primero es definir las diferentes secciones dentro de la página a la que podremos saltar. Lo haremos con el elemento HTML anchor, ancla, que tanto usamos para enlazar pero que tan pocas veces usamos como “ancla” dentro del mismo documento:

<a name="pie_de_pagina"/>

Como puedes ver se usa de forma única, sin etiqueta de apertura y cierre y además no se verá por parte del usuario. Los enlaces en ese mismo documento que nos llevarán a esta sección tendrán esta forma:

<a href="#pie_de_pagina">como podéis ver en el pie de página</a>

Tan sencillo como esto, ya véis que la etiqueta <a> tiene más usos de los que esperabas.

Por cierto, si te interesa todo este tema de programación web, te recomiendo que leas el curso de WordPress que estoy dando ahora mismo en CODECTION o esta entrada donde cuento cómo crear una tienda online.

La entrada Navegar dentro de una misma página HTML apareció primero en Linux Hispano.