HTML Links: The Anchor Tag, href, target and rel Explained

What you will learn

The web is called a “web” because pages link to each other. That link is built with one element: the anchor tag, <a>. In this lesson you will learn how to link to other websites, to your own pages, to a spot inside the same page, to an email address or phone number, and how to control where a link opens — plus a security detail almost every tutorial skips.

The anchor element: <a> and href

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

• <a> is the anchor element. Everything between <a> and </a> becomes clickable.
• href (short for hypertext reference) is the attribute that says where the link goes. Without href, an <a> is not a link at all — it looks like plain text.

An anchor is an inline element (you met these in the block/inline lesson), so it flows inside a line of text and does not start a new line by itself:

<p>
  Read more about HTML on
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN</a>,
  a great free resource.
</p>

You can also wrap something other than plain text, such as an image:

<a href="https://www.wikipedia.org">
  <img src="wikipedia-logo.png" alt="Wikipedia logo" width="120">
</a>

Absolute vs relative URLs

The value of href can be written in two ways, and the difference matters a lot as your site grows.

Absolute URL

An absolute URL is the full address, starting with https:// (or http://). It always points to the exact same place, no matter which page the link sits on.

<a href="https://www.google.com">Open Google</a>

Use an absolute URL whenever you link to another website.

Relative URL

A relative URL points to a file based on where the current page is, not the full address. Use it whenever you link to your own pages.

<a href="about.html">About</a>
<a href="blog/first-post.html">My first blog post</a>
<a href="../index.html">Back to Home</a>

Path	Meaning
about.html	A file in the same folder as the current page
blog/first-post.html	Go into the blog folder, then open first-post.html
../index.html	Go up one folder, then open index.html
../../index.html	Go up two folders
/about.html	Starting from the root of the website (the very top folder)

Why bother with relative URLs? Because if you move your whole site from localhost to a live domain, every relative link still works without a single change. Absolute URLs to your own pages would need editing everywhere.

A common mistake: writing a folder name that does not match your actual folder structure, such as linking to ../Core HTML/list.html when the file is actually one level up in a folder with a different name or a space in it. Always check the real path in your project’s file tree — spaces in folder names also get encoded as %20 in the browser, so it is best to avoid spaces in file and folder names altogether (use hyphens: core-html instead of Core HTML).

The target attribute: where the link opens

target controls which browsing context (tab, window, or frame) the linked page opens in.

<a href="https://www.google.com">Opens in the same tab</a>
<a href="https://www.google.com" target="_blank">Opens in a new tab</a>

Value	Behaviour
_self	Default. Opens in the same tab, replacing the current page. You never need to write this; it happens automatically.
_blank	Opens in a new tab or window.
_parent	Opens in the parent frame of the current frame (only matters inside an <iframe>).
_top	Opens in the full browser tab, breaking out of all frames (only matters inside an <iframe>).

_parent and _top only make sense when the link itself is inside an <iframe> — for example, if your page embeds another page in a frame, and a link inside that embedded page wants to escape the frame. Outside of an <iframe>, both behave exactly like _self, since there is no frame to escape. You will use these two rarely; _self and _blank cover almost every real situation.

The security rule for target="_blank"

This is a detail most beginner tutorials leave out, and it matters. When you open a link in a new tab, the new page can, in older or misconfigured browsers, get partial access to the original tab through window.opener — for example, to redirect it to a fake login page. Always pair target="_blank" with rel="noopener noreferrer":

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

• noopener stops the new page from accessing the original tab.
• noreferrer also stops your page’s address from being sent to the linked site.

Make this a habit: every target="_blank" link should carry rel="noopener noreferrer".

Linking to a spot on the same page

You can jump straight to a section of a page instead of just the top. It takes two parts.

1. Give the destination an id:

<div id="section-2">
  <h2>Section 2</h2>
  <p>...</p>
</div>

2. Point a link at that id, with a # in front of it:

<a href="#section-2">Go to Section 2</a>

Clicking the link scrolls the page to the element whose id matches. This is exactly how a table of contents or a “back to top” link works:

<a href="#top">Back to top</a>

<h1 id="top">My Long Article</h1>
<p>...</p>

<h2 id="section-1">Section 1</h2>
<p>...</p>

<h2 id="section-2">Section 2</h2>
<p>...</p>

<a href="#section-1">Jump to Section 1</a>

Two rules for this to work:

• The id must be unique on the page (you learned this in the grouping lesson) — never reuse the same id twice.
• The id in the link’s href must be spelled exactly the same as the id in the element, including capital letters.

You can even link to a section on a different page, by combining a file name with a #:

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

Email and phone links

Two special link types open the visitor’s email app or dialer instead of a web page.

<a href="mailto:hello@example.com">Email us</a>

<a href="mailto:hello@example.com?subject=Website%20Question&body=Hi%20there">
  Email us with a pre-filled subject
</a>

<a href="tel:+911234567890">Call us: +91 12345 67890</a>

• mailto: opens the visitor’s default email application with the address already filled in. You can add ?subject= and &body= to pre-fill those fields too (spaces are written as %20).
• tel: opens the phone dialer on a phone, which is especially useful on mobile sites.

Download links

Add the download attribute to make the browser download the linked file instead of opening it:

<a href="resume.pdf" download>Download my resume</a>
<a href="report.pdf" download="Company-Report-2026.pdf">Download report</a>

Giving download a value (like "Company-Report-2026.pdf") sets the file name the visitor’s computer will save it as.

The rel attribute

rel describes the relationship between the current page and the linked page. You already met one important use (rel="noopener noreferrer"). A few other common values:

<a href="https://example.com" rel="nofollow">Sponsored link</a>
<a href="https://example.com" rel="noopener noreferrer" target="_blank">Partner site</a>

• nofollow tells search engines not to pass ranking credit through this link — often used for ads, sponsored content, or links you do not fully vouch for.
• noopener / noreferrer — the security pair from earlier.

You do not need to memorise every rel value as a beginner. Just remember the security pairing with target="_blank".

Styling links (a preview of CSS)

By default, browsers style links with blue text and an underline, and a link you have already visited turns purple. You will fully control this with CSS :link, :visited, :hover and :active in the CSS course, but here is a small preview:

a {
  color: tomato;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Putting it together: a small page

<nav>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<h1 id="about">About This Page</h1>
<p>
  Learn more on <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN</a>.
</p>

<h2 id="contact">Contact</h2>
<p>
  Email: <a href="mailto:hello@example.com">hello@example.com</a><br>
  Call: <a href="tel:+911234567890">+91 12345 67890</a>
</p>

<a href="brochure.pdf" download>Download our brochure</a>

Common mistakes

• Leaving out href. <a>Click me</a> with no href is not a real link and gets no default styling or keyboard focus.
• Using href="#" as a placeholder. It looks harmless but silently jumps to the very top of the page and can confuse the scroll position. If a link has no real destination yet, prefer href="#!" temporarily, or better, wire up the real destination before shipping.
• Forgetting rel="noopener noreferrer" on target="_blank" links. A small habit that closes a real security gap.
• Mismatched id and href, such as href="#Section2" pointing to id="section-2". HTML id matching is case-sensitive.
• Duplicate id values on the same page, which breaks in-page links unpredictably (the browser jumps to whichever comes first).
• Confusing relative and absolute paths, especially after moving files into a subfolder. Always re-check relative links when you reorganise your project.
• Spaces in file or folder names used in a path (Core HTML/list.html). Browsers encode the space as %20, which is easy to get wrong. Use hyphens instead.
• Using _parent or _top outside of an <iframe> expecting special behaviour. Without a frame, they behave exactly like _self.

Interview-style questions

What is the difference between an absolute and a relative URL? An absolute URL is the complete address, including the protocol and domain (https://example.com/page.html), and always points to the same place. A relative URL is based on the current page’s location (page.html, ../page.html) and is used for links within your own site.

Why should target="_blank" be used with rel="noopener noreferrer"? Without it, the newly opened page could get limited access to the original tab through window.opener, which is a security and privacy risk. noopener blocks that access, and noreferrer also hides the referring page’s address.

How do you link to a specific section of the same page? Give the target element a unique id, then set the link’s href to # followed by that id, for example <a href="#pricing">.

What does the download attribute do? It tells the browser to download the linked file instead of navigating to it, and can optionally set the saved file’s name.

Practice

1. Use the Practice in Editor button. Add a third link that opens in a new tab, and make sure it includes rel="noopener noreferrer".

2. Add two more sections (section-3, section-4) below the existing ones, each with their own id, and add links that jump to each one.

3. Write a mailto: link that pre-fills the subject as “Website Feedback”.

4. Fix this code (it has three mistakes: a missing href, a target="_blank" with no rel, and a link pointing to an id that does not exist on the page):

   <a>Visit our shop</a>
   <a href="https://shop.example.com" target="_blank">Open shop</a>
   <a href="#pricing-section">See pricing</a>
   <div id="pricing">Pricing info here...</div>

Recap

• <a href="..."> creates a link; without href it is not a real link.
• Use absolute URLs for other websites, relative URLs for your own pages.
• target="_blank" opens a link in a new tab; always pair it with rel="noopener noreferrer" for security.
• _parent and _top only matter inside an <iframe>.
• Link to a section of a page with href="#id", matching a unique id on the target element.
• mailto: and tel: open the visitor’s email app or dialer; download saves the file instead of opening it.
• rel describes the relationship to the linked page, such as nofollow or the noopener noreferrer security pair.