Nivel: Básico · HTML · Después de semántica y enlaces · 15 minutos
Al terminar tendrás un índice al inicio de la página que salta a cada sección con anclas (href="#id" + id en el destino) y un enlace «volver arriba».
Resultado final: una página larga con 3 secciones, menú interno y anclas que funcionan al hacer clic.
Paso 1: Pon un id en el destino
<h2 id="ingredientes">Ingredientes</h2>El id debe ser único en la página, sin espacios (usa guiones: paso-2).
Trampa: dos elementos con el mismo id — el navegador se confunde.
Paso 2: Enlaza con #
<nav>
<a href="#ingredientes">Ingredientes</a>
<a href="#pasos">Pasos</a>
<a href="#tips">Tips</a>
</nav>El texto del enlace debe describir la sección (accesibilidad).
Paso 3: Índice + secciones + volver arriba
<body>
<header id="arriba">
<h1>Guía rápida</h1>
<nav>
<a href="#ingredientes">Ingredientes</a>
<a href="#pasos">Pasos</a>
<a href="#tips">Tips</a>
</nav>
</header>
<main>
<h2 id="ingredientes">Ingredientes</h2>
<p>…</p>
<h2 id="pasos">Pasos</h2>
<p>…</p>
<h2 id="tips">Tips</h2>
<p>…</p>
<p><a href="#arriba">Volver arriba</a></p>
</main>
</body>
Paso 4: Ancla a otro archivo (opcional)
<a href="receta.html#pasos">Ver pasos en receta.html</a>Útil en sitios multipágina: abres el archivo y caes en la sección.
Trampa: mayúsculas distintas (#Pasos vs id="pasos") — en muchos servidores falla.
Si algo no funciona
| Síntoma | Causa | Solución |
|---|---|---|
| No se mueve | id distinto al hash | Copia-pega el mismo nombre |
| Salta mal | id duplicado | Un id por elemento |
| 404 | Mezclaste archivo inexistente | Separa ruta y #sección |
Reto: añade una cuarta sección «FAQ» al índice y al main.
Para seguir: comentarios HTML y buenas prácticas — dejar pistas sin romper la página.
