Cómo crear enlaces dentro de una misma página con HTML?

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.

Cómo crear enlaces dentro de una misma página con HTML?

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!

Índice de Contenido:

 

  1. Crear el anchor
  2. Crear un enlace al anchor

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.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.