HTML Links and Anchor Tags: href, target, and Jumping to a Section

Every clickable link in HTML, whether it points to another website, another page on your own site, or a specific spot further down the same page, starts with the same tag: <a>.

This is the written version of my HTML links and anchor tags videos, part of my HTML beginners course. It's embedded near the top.

Key Takeaways

• <a href="..."> wraps whatever you want clickable, text or an image.
• An external link points to another website. An internal link points to another page on your own site. Both use the same tag, just a different href value.
• target="_blank" opens a link in a new tab, leaving your original page open.
• An anchor link jumps to a specific spot on a page. Give the target an id, then link to it with # followed by that id.
• href has to match exactly. A typo doesn't throw an error; it just silently sends people to the wrong place, or nowhere.

The anchor tag and href

Anything you want clickable goes between an opening <a> and a closing </a>, with the destination in the href attribute:

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

You can wrap text, an image, or several elements at once. href is the one attribute every link needs.

External links

An external link points to a different website:

<img src="photo.jpg" alt="Example photo">

<a href="https://www.bing.com">
  <img src="photo.jpg" alt="Example photo">
</a>

Wrapping the <img> in an <a> makes the whole image clickable. Clicking a plain external link like this navigates the visitor away from your page entirely. To keep your page open and send the link to a new tab instead, add target="_blank":

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

rel="noopener noreferrer" is worth adding alongside target="_blank": it stops the new tab from getting a reference back to your page, which is a minor but real security and performance consideration on links you don't control.

Internal links

An internal link points to another page in your own project, using that page's filename instead of a full URL:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

A list like this, repeated in the same form on every page, is the simplest version of a navigation menu. Copy the same block onto about.html and contact.html and every page can reach every other page.

Text links work the same way without a list:

<p>Want to know more about me? <a href="about.html">Click here</a>.</p>

Anchor links: jumping to a section

An anchor link jumps to a specific point on a page instead of loading a new one, which is useful on any page long enough that scrolling to find something gets tedious. It takes two pieces: an id on the target, and a link that points to # plus that id.

<h2 id="example-two">Example Two</h2>

<a href="#example-two">Jump to Example Two</a>

The id can go on the heading itself or just above it; either works, as long as it's attached to something in the right spot on the page. Clicking the link jumps straight there. Nothing about the id shows up visually; it's only there to be linked to.

Linking to an anchor on a different page

The same #id technique also works across pages. Combine a filename with a hash to jump straight to a section on another page:

<a href="about.html#example-four">Go to Example Four on the About page</a>

That opens about.html and jumps directly to whatever has id="example-four" on it, skipping past everything above it.

A common mistake: exact matches only

href has to match exactly, character for character. google.com isn't the same as https://google.com as far as HTML is concerned in some contexts, and about.html isn't the same as abouts.html. Get it wrong and there's no error message, just a broken link or a page that loads the wrong thing. If a link stops working, the first thing to check is whether the href value still matches the actual filename or id exactly.

See MDN's anchor element reference for the full set of attributes <a> supports.

Where to go next

HTML Forms and HTML Tables cover the other structural elements this course builds toward next.

FAQ

What's the difference between an external and internal link?

Both use the same <a href="..."> tag. An external link's href is a full URL to another website. An internal link's href is just a filename, pointing to another page in your own project.

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

Add target="_blank" to the <a> tag. It's good practice to also add rel="noopener noreferrer" alongside it for security and performance.

How do I link to a specific section of a page?

Give the target element an id attribute, then link to it with href="#that-id". Clicking the link jumps straight to that spot on the page instead of loading anything new.

Can I link to an anchor on a different page?

Yes. Combine the filename and the hash: href="page.html#section-id" opens that page and jumps directly to the element with that id.

Why doesn't my link work even though it looks right?

href needs an exact match, character for character, to the actual filename or id. A typo, a missing file extension, or a mismatched id all produce a silently broken link with no error message.