Link to a Specific Part of a Page with HTML Anchor Links

Anchor links allow users to jump directly to a specific part of a webpage. They improve usability for long documents, one-page sites, and in-page navigation menus.

1. Define the Target Section

Assign a unique id attribute to any HTML element you want to navigate to:

<h2 id="contact">Contact Us</h2>
<p>If you have any questions, feel free to reach out via email or phone.</p>

2. Create the Anchor Link

Use an <a> tag with its href set to #id:

<a href="#contact">Go to Contact Section</a>

When clicked, the browser scrolls to the element with id="contact".

3. Enable Smooth Scrolling

For a polished experience, add this CSS rule to enable smooth scrolling:

html {
    scroll-behavior: smooth;
}

Browser Support:

• Supported in modern browsers (Chrome, Firefox, Edge, Safari 15+).
• For older browsers, consider a JavaScript polyfill.

4. Link to Sections on Other Pages

To navigate to a section on a different page, include the target page’s URL:

<a href="about.html#team">Meet Our Team</a>

This link opens about.html and scrolls to the element with id="team".

Best Practices

• Ensure all id values are unique within the document.
• Use concise, descriptive IDs (e.g., features, pricing).
• Avoid overly long or complex IDs.
• Provide fallback content or polyfills for smooth scrolling on unsupported browsers.

Summary

HTML anchor links enhance navigation by directing users to specific sections within or across pages. Assign unique id attributes, use <a href="#id">, and enable smooth scrolling for an improved user experience. Follow best practices to ensure accessibility and broad browser compatibility.

📂 Get the Full Source Code! 📚Click here to download the full source code