HTML links and anchor tags explained for beginners

How does an HTML link know where to go, and why does a jump link to a section of the page sometimes do nothing at all?

Short answer: a link is an <a> element, the anchor tag, with an href attribute that says where it points. That can be a full URL, a path to another page on your site, or # plus an element's id to jump to a spot on the page.

By the end of this post you will write all three kinds of link, open a link in a new tab safely, make jump links that actually land, and spot the small mistakes that break links. If tags and attributes are new, start with What Are Attributes (opens in a new tab).

The anatomy of a link

<a href="https://start.dev">Start learning to code</a>

<a> is the anchor element. Everything between the opening and closing tags is the clickable text.
href holds the destination. Without it, <a> isn't a working link: it isn't clickable and keyboard users can't tab to it.
The text should say where the link goes, because that's what people (and screen readers) see.

Three kinds of href

1. A full URL to another site

<a href="https://developer.mozilla.org">MDN Web Docs</a>

Include the https://. If you write href="www.example.com", the browser treats it as a file on your own site and sends people to something like yoursite.com/www.example.com.

2. A path to another page on your site

<a href="about.html">About</a>           <!-- same folder -->
<a href="blog/first-post.html">Post</a>  <!-- a folder inside this one -->
<a href="../index.html">Home</a>         <!-- one folder up -->
<a href="/contact">Contact</a>           <!-- from the root of the site -->

These are relative links, worked out from where the current page lives. ../ means "go up one folder", and a leading / means "start from the top of the site". They keep working when you move the whole site to a new domain, which is why you use them for your own pages. Multi Page Websites (opens in a new tab) and Site Setup And Navigation (opens in a new tab) build a small site with them.

3. A jump link to a spot on a page

Give the target element an id, then link to it with # and the same name:

<nav>
  <a href="#pricing">Pricing</a>
  <a href="#faq">FAQ</a>
</nav>
 
<section id="pricing">...</section>
<section id="faq">...</section>

These are often called anchor links or jump links, and they're where most beginners get stuck. Anchor Links (opens in a new tab) practices them.

You can combine both: about.html#team opens the About page and jumps to the element with id="team".

Why your jump link isn't working

If clicking a # link does nothing, check these in order:

The # goes in the href, not in the id. Write href="#faq" and id="faq", never id="#faq".
The names match exactly. #FAQ won't find id="faq". Ids are case-sensitive.
The id exists once. An id must be unique on the page. With duplicates, the browser jumps to the first one.
There are no spaces. Use id="contact-form", not id="contact form".
Use id, not name. Old tutorials use <a name="..."> as the target. That's obsolete. Any element with an id works.

Two small CSS touches make jump links feel finished. html { scroll-behavior: smooth; } scrolls to the target instead of snapping. And if a sticky header covers the top of the section you land on, add scroll-margin-top to the target, for example section { scroll-margin-top: 80px; }.

Opening a link in a new tab

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs (opens in a new tab)
</a>

target="_blank" opens the page in a new tab. rel="noopener" stops the new page from controlling yours through JavaScript. Modern browsers now apply that protection automatically for target="_blank", but adding it costs nothing and covers older ones. noreferrer also hides which page the visitor came from.

Use new tabs sparingly. People expect links to open in the same tab, and the back button stops working for them in a new one. If you do it, say so in the link text, as above. Links In A New Tab (opens in a new tab) covers this.

Links and accessibility

Make the text say where it goes. "Read the pricing guide" beats "click here". Screen reader users often jump from link to link, hearing only the text.
Links go somewhere, buttons do something. If clicking it navigates to a page or a spot on a page, use <a href>. If it submits a form, opens a menu or runs JavaScript, use <button>.
Don't nest links. A link inside another link is invalid HTML, and browsers handle it unpredictably.

Common mistakes

Leaving out https:// on a link to another site, so it turns into a broken path on your own site.
Getting the relative path wrong. If a link breaks after you move a file into a folder, check whether it now needs ../.
Spaces or capital letters in file names. My Page.html is easy to mistype in a link. Stick to lowercase and hyphens: my-page.html.
A missing or mismatched id on the target of a jump link.
Using href="#" as a placeholder for a click handler. It jumps to the top of the page. Use a <button> for actions.

Quick recap

A link is <a href="destination">text</a>.
Use full URLs for other sites, relative paths for your own pages, and #id to jump within a page.
For jump links, the # goes in href only, and the id must match exactly and be unique.
target="_blank" opens a new tab. Pair it with rel="noopener noreferrer" and use it sparingly.
Write link text that says where the link goes.

Frequently asked questions

What is an anchor tag in HTML?

It's the <a> element, the tag that creates links. With an href attribute, it links to another page, a file, an email address, or a spot on the same page.

What's the difference between a link and an anchor?

In HTML they're the same element: the a in <a> stands for anchor. People often say "anchor link" to mean a link that jumps to a section of the same page using #.

How do I link to a section on the same page?

Give the section an id, like id="faq", then link to it with <a href="#faq">FAQ</a>. The names must match exactly.

How do I make a link open in a new tab?

Add target="_blank" and rel="noopener noreferrer" to the <a> tag. Mention in the link text that it opens a new tab.

Practice

Try each step in your browser, with nothing to install: Links (opens in a new tab), then Links In A New Tab (opens in a new tab), then Anchor Links (opens in a new tab). When you're ready to link pages together, Site Setup And Navigation (opens in a new tab) builds a site's navigation. For a quick check of what you know, try the HTML & CSS Fundamentals challenges.

Where to go next

Links are early in HTML Basics (opens in a new tab), right after attributes. Once your pages link together, CSS Basics (opens in a new tab) makes them look good, starting with the CSS box model.

Check out our related courses

Beginner

HTML Basics

Learn the basics of HTML and how to build simple web pages.

Instructor

CSS Basics

Learn modern CSS from the ground up. Build a sleek, dark-themed landing page chapter by chapter, starting with a single styled card and growing into a fully responsive multi-section page.

Instructor