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​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

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>

Variantes del mismo ejercicio​

Variante 1: Navegación fija con scroll suave​

Agregá un estilo CSS para que el desplazamiento entre secciones sea animado. Esto mejora muchísimo la experiencia de usuario sin necesidad de JavaScript.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Scroll Suave</title>
    <style>
      html {
        scroll-behavior: smooth;
      }
      nav {
        position: sticky;
        top: 0;
        background: #f8f8f8;
        padding: 15px;
        border-bottom: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#inicio">Inicio</a> |
      <a href="#servicios">Servicios</a> |
      <a href="#contacto">Contacto</a>
    </nav>

    <h2 id="inicio">Inicio</h2>
    <p>Bienvenido a nuestro sitio web. Somos una empresa dedicada al desarrollo de software.</p>

    <h2 id="servicios">Servicios</h2>
    <p>Ofrecemos desarrollo web, aplicaciones móviles y consultoría tecnológica. Contamos con un equipo de profesionales listos para ayudarte.</p>

    <h2 id="contacto">Contacto</h2>
    <p>Podés escribirnos a info@ejemplo.com o llamarnos al +54 11 1234-5678. Estamos ubicados en Buenos Aires, Argentina.</p>

    <!-- Botón para volver arriba -->
    <footer style="margin-top: 80px; text-align: center;">
      <a href="#top">⬆ Volver arriba</a>
    </footer>
  </body>
</html>

scroll-behavior: smooth aplica una animación de desplazamiento en todos los enlaces de anclaje. El nav con position: sticky mantiene el menú visible mientras el usuario hace scroll.

Variante 2: Botón "Volver arriba" con #top​

El id no siempre tiene que estar en un <h2> — podés usar #top para apuntar al inicio de la página sin necesidad de definir un id explícito.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Volver Arriba</title>
    <style>
      html {
        scroll-behavior: smooth;
      }
      .volver-arriba {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: #007bff;
        color: white;
        padding: 12px 18px;
        border-radius: 50%;
        text-decoration: none;
        font-size: 24px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      }
    </style>
  </head>
  <body>
    <h1>Artículo Extenso</h1>
    <p>
      Este es un artículo muy largo. Para mantener al lector interesado, es una buena práctica ofrecer un botón que permita volver al inicio rápidamente. 
      Imaginá que este texto se extiende por varios párrafos...
    </p>
    <p>
      Cuando el usuario llega al final de la página, no quiere tener que hacer scroll manual para volver al menú o al título principal. 
      Un enlace con href="#top" resuelve esto en una sola línea de HTML.
    </p>
    <p>
      El navegador interpreta #top como el tope del documento, sin necesidad de que exista un elemento con ese id. 
      Es una forma limpia y semántica de ofrecer navegación de retorno.
    </p>

    <a href="#top" class="volver-arriba" title="Volver al inicio">⬆</a>
  </body>
</html>

Variante 3: Anclaje entre páginas distintas​

Los enlaces de anclaje no se limitan a la misma página — podés apuntar a una sección específica de otro documento HTML.

index.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Página Principal</title>
  </head>
  <body>
    <h1>Manual de Usuario</h1>
    <ul>
      <li><a href="capitulo1.html#instalacion">Ir a Instalación (Capítulo 1)</a></li>
      <li><a href="capitulo1.html#configuracion">Ir a Configuración (Capítulo 1)</a></li>
      <li><a href="capitulo2.html#primeros-pasos">Ir a Primeros Pasos (Capítulo 2)</a></li>
    </ul>
  </body>
</html>
capitulo1.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Capítulo 1</title>
  </head>
  <body>
    <h2 id="instalacion">Instalación</h2>
    <p>Descargá el instalador desde nuestro sitio oficial y ejecutalo con permisos de administrador.</p>

    <h2 id="configuracion">Configuración</h2>
    <p>Una vez instalado, abrí el archivo config.ini y ajustá los parámetros según tu entorno.</p>

    <p><a href="index.html">← Volver al índice</a></p>
  </body>
</html>

Buenas y Malas Prácticas​

✅ Buena práctica❌ Mala práctica
Usar id descriptivos: id="seccion-contacto"Usar id genéricos: id="section1"
Combinar con scroll-behavior: smoothNo avisar al usuario que el enlace desplaza la página
Mantener el menú de navegación visible con position: stickyTener anclas que apuntan a elementos inexistentes
Agregar un botón "Volver arriba" en páginas largasUsar solo JavaScript cuando HTML lo resuelve nativamente
Usar #top para volver al inicio sin definir un idNo incluir enlaces de retorno en páginas internas

Preguntas Frecuentes (FAQ)​

¿Los enlaces de anclaje funcionan sin JavaScript?​

Sí, completamente. La navegación por anclaje es una funcionalidad nativa de HTML que funciona en todos los navegadores, incluso con JavaScript deshabilitado. scroll-behavior: smooth es CSS puro y también funciona sin JS.

¿Puedo animar el scroll de forma diferente?​

Además de scroll-behavior: smooth, podés usar la API Element.scrollIntoView() con JavaScript para tener más control sobre la animación. Pero para la mayoría de los casos, la solución CSS es suficiente y más performante.

¿Qué pasa si el id no existe?​

El navegador simplemente no desplaza la página. No genera un error visible, pero el usuario puede confundirse. Siempre verificá que los href="#id" coincidan exactamente con los id de los elementos destino (respetando mayúsculas/minúsculas).

¿Los enlaces de anclaje afectan al SEO?​

Sí, de forma positiva. Google puede mostrar enlaces de anclaje como "saltar a" en los resultados de búsqueda, lo que mejora la visibilidad y la experiencia del usuario. Una estructura clara con anclajes bien definidos ayuda a los motores de búsqueda a entender la organización de tu contenido.

tip

🔗 Si querés profundizar más sobre enlaces en HTML, visitá la sección de Elementos y etiquetas en HTML donde explicamos en detalle la etiqueta <a> y todos sus atributos.