Practical Exercise 11: Anchor Links
Discover how to use anchor links in HTML to create smooth internal navigation within a single page. Learn with practical examples how to implement links that improve the user experience.
Activity
Create an HTML document with anchor links that allow navigation within the same page.
Interactive Solution
Solution with complete HTML code
<!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>
Variants of the Same Exercise
Variant 1: Fixed Navigation with Smooth Scroll
Add a CSS style to animate the scrolling between sections. This greatly improves the user experience without needing JavaScript.
<!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>
<!-- Back to top button -->
<footer style="margin-top: 80px; text-align: center;">
<a href="#top">⬆ Back to top</a>
</footer>
</body>
</html>
scroll-behavior: smooth applies a scroll animation to all anchor links. The nav with position: sticky keeps the menu visible while the user scrolls.
Variant 2: "Back to Top" Button with #top
The id doesn't always have to be on an <h2> — you can use #top to point to the top of the page without explicitly defining an id.
<!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>Long Article</h1>
<p>
This is a very long article. It's good practice to offer a button that allows
quickly returning to the top. Imagine this text extends over several paragraphs...
</p>
<p>
When the user reaches the bottom, they don't want to manually scroll back to
the menu or main title. A link with href="#top" solves this in a single line of HTML.
</p>
<p>
The browser interprets #top as the top of the document, without needing an
element with that id. It's a clean and semantic way to offer return navigation.
</p>
<a href="#top" class="volver-arriba" title="Back to top">⬆</a>
</body>
</html>
Variant 3: Cross-Page Anchoring
Anchor links aren't limited to the same page — you can point to a specific section of another HTML document.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Página Principal</title>
</head>
<body>
<h1>User Manual</h1>
<ul>
<li><a href="capitulo1.html#instalacion">Go to Installation (Chapter 1)</a></li>
<li><a href="capitulo1.html#configuracion">Go to Configuration (Chapter 1)</a></li>
<li><a href="capitulo2.html#primeros-pasos">Go to Getting Started (Chapter 2)</a></li>
</ul>
</body>
</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">← Back to index</a></p>
</body>
</html>
Best Practices and Common Mistakes
| ✅ Best Practice | ❌ Common Mistake |
|---|---|
Use descriptive id values: id="contact-section" | Use generic id values: id="section1" |
Combine with scroll-behavior: smooth | Don't inform the user that the link scrolls the page |
Keep the navigation menu visible with position: sticky | Have anchors pointing to non-existent elements |
| Add a "Back to Top" button on long pages | Use JavaScript only when HTML solves it natively |
Use #top to return to the top without defining an id | Don't include return links on internal pages |
Frequently Asked Questions (FAQ)
Do anchor links work without JavaScript?
Yes, completely. Anchor navigation is a native HTML feature that works in all browsers, even with JavaScript disabled. scroll-behavior: smooth is pure CSS and also works without JS.
Can I animate the scroll differently?
In addition to scroll-behavior: smooth, you can use the Element.scrollIntoView() API with JavaScript for more control over the animation. But for most cases, the CSS solution is sufficient and more performant.
What happens if the id doesn't exist?
The browser simply doesn't scroll the page. It doesn't generate a visible error, but the user may get confused. Always verify that href="#id" exactly matches the id of the target elements (respecting case sensitivity).
Do anchor links affect SEO?
Yes, positively. Google can display anchor links as "jump to" in search results, which improves visibility and user experience. A clear structure with well-defined anchors helps search engines understand your content organization.
🔗 If you want to dive deeper into links in HTML, visit the HTML Elements and Tags section where we explain the <a> tag and all its attributes in detail.