How to Link to Sections in HTML using id and #anchor

Introduction: Why Linking to Sections Matters

On long webpages—such as tutorials, documentation, FAQs, or blogs—users don’t want to scroll endlessly.
They want to jump directly to the content they need.

HTML solves this problem using section links, also called:

Anchor links
Bookmark links
In-page navigation links

These links use:

the id attribute
the #anchor syntax

👉 This technique is essential for user experience, accessibility, and SEO.

What Is an Anchor Link in HTML?

An anchor link allows you to jump to a specific section on the same page (or another page).

It works using:

an element with an id
a link pointing to that id using #

Basic Concept (Very Important)

Two Things Are Required:

A target element with an id
A link that references that id using #

Step 1: Create a Target Section Using `id`

The id attribute uniquely identifies an element.

✔ id must be unique
✔ No spaces allowed
✔ Case-sensitive

Step 2: Create a Link Using `#anchor`

Now create a link that points to that id.

How It Works

Clicking the link scrolls the page
Browser jumps to the element with id="about

Complete Example: Link to a Section on the Same Page

<!DOCTYPE html>
<html>
<head>
  <title>HTML Anchor Link Example</title>
</head>
<body>

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

  <h2 id="home">Home</h2>
  <p>Welcome to our website.</p>

  <h2 id="contact">Contact Us</h2>
  <p>Email: info@example.com</p>

</body>
</html>

Linking to Sections from Another Page

You can also link to a section on a different HTML page.

Example

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

This:

Opens about.html
Scrolls directly to id="team"

Using Anchor Links for Navigation Menus

Anchor links are commonly used in single-page websites.

<nav>
  <a href="#services">Services</a>
  <a href="#portfolio">Portfolio</a>
  <a href="#contact">Contact</a>
</nav>

<section id="services">
  <h2>Our Services</h2>
</section>

<section id="portfolio">
  <h2>Portfolio</h2>
</section>

<section id="contact">
  <h2>Contact</h2>
</section>

Clean
Fast navigation
Professional layout

Linking to Top of the Page

To jump to the top of the page:

Option 1: Use `#top`

Option 2: Use `#` (Quick Method)

⚠️ Best practice is to use an explicit id.

Rules for Using id Attributes

Rule	Description
Unique	Only one element per `id`
No spaces	Use `-` or `_`
Case-sensitive	`#About` ≠ `#about`
Meaningful	Use descriptive names

Good Examples

Bad Examples

Smooth Scrolling (Optional Enhancement with CSS)

By default, anchor jumps are instant.
You can make them smooth using CSS.

✔ Modern
✔ User-friendly
✔ No JavaScript needed

SEO Benefits of Anchor Links

Anchor links help SEO by:

Improving user experience
Reducing bounce rate
Helping search engines understand page structure
Enabling jump links in Google results (featured snippets)

👉 Especially useful for long-form content.

Accessibility Considerations

Screen readers recognize anchor navigation
Use clear, descriptive link text
Avoid vague labels like “Click here”

✅ Good Example

Common Beginner Mistakes

Forgetting to add the id
Using duplicate id values
Adding spaces in id
Linking to wrong anchor name
Using name attribute instead of id (deprecated)

id vs name Attribute

Attribute	Status
`id`	✅ Recommended
`name`	❌ Deprecated for anchors

Always use id in modern HTML.

Real-World Example: FAQ Page

<h1>FAQs</h1>

<ul>
  <li><a href="#payment">Payment Options</a></li>
  <li><a href="#delivery">Delivery Info</a></li>
  <li><a href="#refund">Refund Policy</a></li>
</ul>

<h2 id="payment">Payment Options</h2>
<p>We accept cards and UPI.</p>

<h2 id="delivery">Delivery Info</h2>
<p>Delivery in 3–5 days.</p>

<h2 id="refund">Refund Policy</h2>
<p>Refunds processed in 7 days.</p>

FAQs: HTML id and #anchor

What is an anchor link in HTML?

A link that jumps to a specific section using id and #.

Can I link to any HTML element?

Yes, as long as it has an id.

Do anchor links work on mobile?

Yes, fully supported.

Does this require JavaScript?

No, it’s pure HTML.

Is this good for SEO?

Yes, when used correctly.