Saltar al contenido principal

Ejercicio práctico 11: Enlaces de anclaje o de ancla

Descubre cómo usar enlaces de anclaje en HTML para crear una navegación interna fluida dentro de una misma página. Aprende con ejemplos prácticos a implementar enlaces que mejoran la experiencia del usuario.

Actividad

Crea un documento HTML con enlaces de ancla que permitan desplazarse dentro de la misma página.

Solución interactiva

Solución con el código HTML completo

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Enlaces de Ancla</title>
</head>
<body>
<h1>Índice</h1>
<ul>
<li><a href="#seccion1">Sección 1</a></li>
<li><a href="#seccion2">Sección 2</a></li>
<li><a href="#seccion3">Sección 3</a></li>
</ul>
<div
style="padding-left: 20px; padding-right: 20px; padding-bottom: 140px; padding-top: 140px;"
>
<h2 id="seccion1">Sección 1</h2>
<p>
Contenido de la sección 1. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Aut ab soluta animi odit delectus praesentium atque
doloremque quas eum! Consectetur provident autem ad impedit quas dolorem
labore eligendi quos expedita! A, in? Perspiciatis, pariatur accusamus
inventore quia ratione quis facilis earum praesentium quaerat, alias
excepturi reiciendis nulla, incidunt esse. Voluptatum, nulla quia
exercitationem doloribus numquam nam reprehenderit eos aliquid illum!
Omnis aut magnam voluptatibus placeat facilis eos, molestiae fugit ex
corrupti ipsa eum laborum esse dolorum suscipit culpa deserunt vel iure.
Totam, labore? Praesentium odio cupiditate sint quisquam, totam itaque.
</p>
</div>
<div
style="padding-left: 20px; padding-right: 20px; padding-bottom: 140px; padding-top: 140px;"
>
<h2 id="seccion2">Sección 2</h2>
<p>
Contenido de la sección 2. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Aut ab soluta animi odit delectus praesentium atque
doloremque quas eum! Consectetur provident autem ad impedit quas dolorem
labore eligendi quos expedita! A, in? Perspiciatis, pariatur accusamus
inventore quia ratione quis facilis earum praesentium quaerat, alias
excepturi reiciendis nulla, incidunt esse. Voluptatum, nulla quia
exercitationem doloribus numquam nam reprehenderit eos aliquid illum!
Omnis aut magnam voluptatibus placeat facilis eos, molestiae fugit ex
corrupti ipsa eum laborum esse dolorum suscipit culpa deserunt vel iure.
Totam, labore? Praesentium odio cupiditate sint quisquam, totam itaque.
</p>
</div>
<div
style="padding-left: 20px; padding-right: 20px; padding-bottom: 140px; padding-top: 140px;"
>
<h2 id="seccion3">Sección 3</h2>
<p>
Contenido de la sección 3. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Aut ab soluta animi odit delectus praesentium atque
doloremque quas eum! Consectetur provident autem ad impedit quas dolorem
labore eligendi quos expedita! A, in? Perspiciatis, pariatur accusamus
inventore quia ratione quis facilis earum praesentium quaerat, alias
excepturi reiciendis nulla, incidunt esse. Voluptatum, nulla quia
exercitationem doloribus numquam nam reprehenderit eos aliquid illum!
Omnis aut magnam voluptatibus placeat facilis eos, molestiae fugit ex
corrupti ipsa eum laborum esse dolorum suscipit culpa deserunt vel iure.
Totam, labore? Praesentium odio cupiditate sint quisquam, totam itaque.
</p>
</div>
</body>
</html>