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>