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>