Have you ever been on a website and clicked on a link that instantly took you to a specific section on the same page? That’s an anchor link! If you’re new to web development or have never written a single line of code before, don’t worry. In this blog, I’ll explain anchor links in simple terms and show you how to create them step by step.
What is an Anchor Link?
Image Credit: DreamHost
An anchor link is a type of hyperlink that lets users jump to a specific part of a webpage. Instead of scrolling manually, clicking an anchor link will instantly take you to a particular section of the page. This is especially useful for long articles, FAQs, or documentation pages where users want quick access to specific topics.
For example, if you’re reading a long blog post and want to jump straight to the conclusion, an anchor link can make that happen with just one click.
Difference Between Anchor Links and Hyperlink Links
Both anchor links and hyperlink links are used for navigation, but they serve different purposes:
Anchor Links
These links navigate to a specific section within the same webpage. Example:
<a href="#contact">Go to Contact Section</a>This will take the user to the section with id="contact" on the same page.
Hyperlink Links
These links navigate to a different webpage or an external site. Example:
<a href="https://www.example.com">Visit Example Website</a>Why Use Anchor Links?
Here are some reasons why anchor links are useful:
- Improves user experience – Helps visitors navigate a page quickly.
- Saves time – No need to scroll endlessly.
- Enhances readability – Organizes content better, making it easy to find important sections.
- Boosts SEO – Search engines like Google sometimes use anchor links in search results, which can improve visibility.
Also Read:
The Best Programming Languages for Web Development in 2025
How to Create Anchor Links
Creating an anchor link is simple. You only need two things: an anchor (target) and a link to the anchor. Let’s go step by step.
Step 1: Create an Anchor (Target)
The first step is to mark the place where you want the link to jump to. To do this, use the <a> tag with an id attribute.
<h2 id="contact">Contact Me</h2>In this example, I’ve created an anchor named contact. This is the destination where the link will take the user.
Step 2: Create a Link to the Anchor
Now, create a clickable link that jumps to the anchor.
<a href="#contact">Go to Contact Section</a>
When someone clicks this link, they will be taken directly to the section with id="contact".
Step 3: Try It in a Full Example
Here’s a complete example of how an anchor link works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Links Example</title>
</head>
<body>
<h1>Welcome to My Blog</h1>
<p><a href="#about">Jump to About Section</a></p>
<p><a href="#contact">Jump to Contact Section</a></p>
<h2 id="about">About Me</h2>
<p>This is the about section of my page.</p>
<h2 id="contact">Contact Me</h2>
<p>You can contact me via email at example@example.com</p>
</body>
</html>Bonus: Smooth Scrolling Effect
By default, anchor links jump instantly, but you can add smooth scrolling using CSS.
html {
scroll-behavior: smooth;
}Add this inside your <style> tag or CSS file to make the transition smooth when clicking an anchor link.
Leave a Reply