HTML Anchors and href: Creating Links and Jump Targets

HTML anchors are the foundation of navigation on the web. With the a element and its href attribute, you can link to other pages, jump to sections on the same page, open email drafts, start phone calls, and more.

Quick answer: Use the a element for links, and put the destination in href. If href is missing, the element is not a link; if it starts with #, it points to an element on the current page.

Difficulty: Beginner

You'll understand this better if you know: basic HTML elements, attributes, and how browser navigation works.

1. What Is HTML Anchors and href?

In HTML, an anchor usually means the a element. It creates a clickable link when it has an href attribute. The browser uses the value of href to decide where the link goes.

The a element is the link element.
href stands for hypertext reference.
Links can point to another page, a location on the current page, or a special scheme such as email or telephone.
Anchor links can also improve page navigation and accessibility when used correctly.

People often say “anchor tag” when they mean the a element, but the key feature that makes it a link is href.

2. Why HTML Anchors and href Matter

Links connect content into a usable site. Without them, visitors cannot move between pages, jump to important sections, or open related resources quickly.

They also matter for accessibility and search engines. Clear, descriptive links help keyboard users, screen reader users, and crawlers understand the structure of a page.

You use anchors when you want navigation, not when you want a button-like action. If you are changing state on the same page, a button is often the better choice.

3. Basic Syntax or Core Idea

The simplest link uses the a element with an href value:

<a href="/about">About us</a>

Here, the element text is what users see, and the href value is the destination. When the user activates the link, the browser navigates to that address.

Parts of the link

a creates the anchor element.
href provides the target URL or fragment.
The text between the tags should describe the destination clearly.

4. Step-by-Step Examples

Example 1: Link to another page

This is the most common use case. The link below points to a page on the same site:

<a href="/pricing">View pricing</a>

This works because the browser treats the href value as a navigation target.

Example 2: Link to a section on the same page

To jump to a section, the href value begins with #, and the target element needs a matching id:

<a href="#contact">Jump to contact</a>

<section id="contact">
  <h2>Contact</h2>
  <p>Email us at [email protected].</p>
</section>

The link scrolls to the element whose id is contact.

Example 3: Link to an email address

You can open the user’s email app with a mail link:

<a href="mailto:[email protected]">Email support</a>

This does not send email automatically; it opens a new message in the user’s mail client.

Example 4: Link to a phone number

On supported devices, a telephone link can start a call:

<a href="tel:+15551234567">Call us</a>

This is especially useful on mobile devices, where tapping the link can open the dialer.

Example 5: Open a file or download resource

Links can also point to files such as PDFs or images:

<a href="/files/guide.pdf" download>Download the guide</a>

The download attribute suggests that the browser should save the file instead of navigating to it.

5. Practical Use Cases

Site navigation menus that move between pages such as Home, About, and Contact.
Table of contents links that jump to headings in long articles.
Call-to-action links that send users to product, pricing, or signup pages.
Contact links that open email or telephone apps.
Documentation pages that link to related sections, examples, or downloadable resources.

6. Common Mistakes

Mistake 1: Leaving out href and expecting a real link

An a element without href is not a proper hyperlink. It may still be focusable in some browsers or behave like generic text, but it will not navigate anywhere.

Problem: The element looks like a link, but it has no destination, so users cannot navigate and assistive technology may not treat it as a link.

<a>About us</a>

Fix: Add a valid href value.

<a href="/about">About us</a>

The corrected version works because the browser now has a destination to follow.

Mistake 2: Using href="#" as a fake destination

Beginners often use # as a placeholder, but that changes the page’s URL fragment and can scroll the page to the top. It also creates a misleading link if no real destination exists.

Problem: The link does not point to a meaningful location, and users may experience an unwanted jump or lose their place on the page.

<a href="#">Read more</a>

Fix: Use a real destination, or use a button if the control performs an action instead of navigation.

<a href="/article/intro-to-html">Read more</a>

The corrected version is better because it sends users to an actual resource.

Mistake 3: Linking to a fragment that does not exist

Fragment links depend on an element whose id matches the value after #. If that element does not exist, the link will not jump anywhere useful.

Problem: The browser cannot find an element with the matching id, so the jump link appears broken.

<a href="#features">Go to features</a>

<section id="details">
  <h2>Details</h2>
</section>

Fix: Make the href fragment and the target id match exactly.

<a href="#details">Go to details</a>

<section id="details">
  <h2>Details</h2>
</section>

The fixed version works because the fragment identifier now matches an actual element.

7. Best Practices

Practice 1: Write link text that describes the destination

Good link text helps everyone understand where a link goes without extra context. Avoid vague phrases such as “click here” or “read more” when you can be specific.

<a href="/docs/html">Read the HTML guide</a>

This is better because the purpose of the link is clear even when read out of context.

Practice 2: Use fragments for real page structure

If you have a long page, let headings and landmarks become jump targets. This makes navigation easier for keyboard users and screen readers.

<nav aria-label="Table of contents">
  <a href="#install">Installation</a>
  <a href="#usage">Usage</a>
</nav>

Using real section targets makes the page easier to scan and navigate.

Practice 3: Mark external links clearly when needed

External links can be useful, but users should not be surprised when they leave your site. When a link opens in a new browsing context, pair target with a safe rel value.

<a href="https://example.com" target="_blank" rel="noreferrer">Visit example.com</a>

This is safer and helps prevent opener-related issues in the new tab or window.

8. Limitations and Edge Cases

Not every browser or device handles tel: and mailto: links the same way, because they depend on installed apps and platform support.
Fragment links scroll to the matching element, but the exact scrolling behavior can vary when sticky headers are present.
Links to files may open in the browser or download, depending on the file type, server headers, and browser settings.
An empty or invalid href can behave inconsistently, so avoid using placeholder values in production markup.
Text inside a link should stay concise and useful; very long link text can be hard to scan in menus or lists.

If you use a sticky header, fragment links may land with the target hidden under the header. A common solution is to add spacing or use CSS scroll offset techniques, but the link itself still works correctly.

9. Practical Mini Project

Here is a small, complete example of a simple page with navigation links, section jumps, and a contact link. It shows the most common ways anchors and href are used together.

<nav aria-label="Main navigation">
  <a href="#overview">Overview</a>
  <a href="#contact">Contact</a>
  <a href="/help">Help center</a>
</nav>

<main>
  <section id="overview">
    <h1>Overview</h1>
    <p>This page demonstrates HTML anchors and the href attribute.</p>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Email <a href="mailto:[email protected]">[email protected]</a> for questions.</p>
  </section>
</main>

This example combines internal navigation, same-page jump links, and an email link in a realistic layout.

10. Key Points

The a element becomes a link when it has href.
href can point to pages, fragments, email addresses, phone numbers, and files.
Fragment links need a matching id on the target element.
Good link text should describe the destination clearly.
Use button instead of a when the control performs an action rather than navigation.

11. Practice Exercise

Create a small HTML page with three navigation links at the top.
Make one link go to another page, one jump to a section on the same page, and one open an email client.
Use descriptive link text for each link.

Expected output: A page where each link behaves differently: page navigation, same-page jump, and email composition.

Hint: Give the target section an id that matches the fragment in the link.

One possible solution is shown below:

<nav>
  <a href="/contact">Contact page</a>
  <a href="#faq">Go to FAQ</a>
  <a href="mailto:[email protected]">Email support</a>
</nav>

<section id="faq">
  <h2>FAQ</h2>
  <p>This section answers common questions.</p>
</section>

12. Final Summary

HTML anchors are one of the simplest and most important parts of the language. The a element creates a link, and href tells the browser where that link should go. Together, they support navigation across pages, within pages, and into external resources like email or phone apps.

When you write links, focus on three things: make the destination real, make the text descriptive, and choose the right element for the job. If you need navigation, use a with href. If you need an action, use a button.

Next, practice building a small page with a table of contents and a few real section links. That will make the relationship between anchors, fragments, and accessible navigation much easier to remember.