Links dentro de la misma página

Además de enlazar a otras páginas, un <a> puede apuntar a una sección dentro de la misma página. Esto se llama enlace de fragmento o anchor link. Es lo que hace que un índice de documentación, al clicar un título, lleve directamente a esa sección.

Las dos piezas del mecanismo

Para que un enlace de fragmento funcione necesitás dos cosas trabajando juntas:

Pieza 1 — El elemento destino con id

Cualquier elemento HTML puede tener un atributo id que lo identifica de forma única en la página:

<h2 id="recetas">Recetas favoritas</h2>

El valor del id es el nombre que vas a usar para apuntar a ese elemento.

Pieza 2 — El enlace con href que empieza con #

El href empieza con # seguido del valor del id:

<a href="#recetas">Ver recetas</a>

Cuando el usuario clica el enlace, el navegador desplaza la página hasta el elemento con id="recetas".

Ejemplo completo

<!-- Al principio de la página: un índice -->
<ul>
  <li><a href="#ingredientes">Ingredientes</a></li>
  <li><a href="#preparacion">Preparación</a></li>
</ul>

<!-- Más abajo: las secciones destino -->
<h2 id="ingredientes">Ingredientes</h2>
<p>...</p>

<h2 id="preparacion">Preparación</h2>
<p>...</p>

Ingredientes
Preparación

Ingredientes

Pasta, salsa de tomate, albahaca.

Preparación

Hervir la pasta, agregar la salsa, servir.

En el sandbox los enlaces no desplazan la página (el iframe aislado no puede hacer scroll de fragmento). En el aula validamos que el href y el id sean correctos — en una página real el navegador se desplaza automáticamente.

Puntos finos

El id debe existir. Si el href="#algo" apunta a un id que no existe, el enlace no falla con error pero no hace nada útil. El error más frecuente es el typo: escribir #Ingredientes (con mayúscula) cuando el id es ingredientes (en minúscula).

<!-- ❌ MAL: el id es "ingredientes" en minúscula, el href tiene mayúscula -->
<a href="#Ingredientes">Ver ingredientes</a>

<!-- ✅ BIEN: coinciden exactamente -->
<a href="#ingredientes">Ver ingredientes</a>

Los id son sensibles a mayúsculas. id="Recetas" y id="recetas" son dos id distintos.

El id debe ser único. En una página bien formada, cada valor de id aparece una sola vez. Si hubiera dos elementos con el mismo id, el enlace solo llevaría al primero — y el HTML sería inválido.

Buen texto de enlace en fragmentos

Los mismos principios aplican: el texto debe describir el destino sin necesitar contexto.

<!-- ❌ MAL: "ir acá" no describe la sección destino -->
<a href="#preparacion">ir acá</a>

<!-- ✅ BIEN: el texto dice qué hay en esa sección -->
<a href="#preparacion">Ver preparación</a>

Tu turno: el starter ya tiene las secciones con sus id definidos (no las borres). Completá los <li> del índice con los dos enlaces internos usando los href y textos exactos indicados. Luego hacé clic en “Comprobar”.