En este tutorial te mostraremos cómo crear enlaces dentro de una misma página. Esto se puede hacer de manera sencilla en HTML, sin tener que refrescar la página. Es decir, será una navegación fluida dentro de la página.
Primero quiero aclarar qué es a lo que nos referimos con «enlaces dentro de una misma página». A continuación hay un índice de contenido que tiene enlaces que te llevarán a cada apartado de este tutorial. ¡Pruébalo!
Cómo crear un anchor en HTML
Los anchors apuntan a un lugar específico en cada página. Esto es muy útil cuando queremos generar enlaces dentro de la misma página. Los anchors se definen mediante la etiqueta <a>, como se muestra a continuación:
<a name="nombre-del-anchor"></a>
Puedes poner el nombre que desees, pero que no se repita con otro en la misma página.
Cómo crear un enlace a un anchor en HTML
Ahora lo único que debemos hacer es crear el enlace al anchor creado anteriormente. Esto se hace como un enlace comun y corriente, pero especificando ‘#’ + ‘nombre-del-anchor’ como URL. Así:
<a href="#nombre-del-anchor">Enlace al anchor</a>
Con eso, tendríamos un enlace que te lleva al anchor definido anteriormente. ¡Así de sencillo!
Ejemplo aplicado
Entonces, si queremos hacer diferentes enlaces en la misma página, lo haremos como el siguiente ejemplo.
See the Pen
Enlaces dentro de misma página con anchors (HTML) by regardis (@regardis)
on CodePen.
Si tienes alguna duda, por favor, comenta debajo para poder ayudarte. Este tutorial es sencillo para poder conseguir una navegación fácil, especialmente dentro de artículos o páginas estáticas.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
