HTML Links: Anchor Tags, href, and target Explained

HTML links are how users move between pages, jump to sections, download files, and open external resources. The a element is one of the most important parts of HTML because it connects content into a navigable web.

Quick answer: Use the a element with href to create a link. Add target when you want to control where the destination opens, such as a new tab.

Difficulty: Beginner

You'll understand this better if you know: basic HTML element syntax, attributes, and how page URLs work.

1. What Are HTML Links?

HTML links are interactive text or elements that point to another location. In HTML, links are created with the a element, short for anchor.

Links connect one page to another page or site.
Links can move to a section on the same page.
Links can open email apps, phone dialers, or files when the browser supports them.
The destination is usually set with href, which stands for hypertext reference.

The most common link pattern is simple: wrap clickable text in an anchor and give it a destination.

2. Why HTML Links Matter

Without links, the web would be a collection of isolated pages. Links make navigation possible, support content discovery, and let users move quickly through information.

They also matter for accessibility and usability. Clear links help screen reader users understand where a link goes, and well-chosen link text helps everyone scan a page more easily.

Use links when you want to take the user to another resource. Do not use them for actions that do not navigate, such as submitting forms or opening menus; those should usually be buttons.

3. Basic Syntax or Core Idea

The basic HTML link uses an opening and closing a tag with an href attribute.

Minimal link syntax

This is the simplest working form of a link:

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

Here, a creates the link, href gives the destination, and the text between the tags is what the user sees and clicks.

Common link attributes

href sets the destination URL.
target controls where the linked page opens.
rel adds relationship hints, often for security and SEO.
title can provide extra context, but should not replace clear link text.

4. Step-by-Step Examples

Example 1: Linking to another page on the same site

Use a relative URL when linking to a page in the same website.

<a href="/contact">Contact</a>

This link points to the /contact page. Relative URLs are common for internal navigation because they are short and easy to maintain.

Example 2: Linking to an external website

Use a full URL when linking to another site.

<a href="https://example.com">Visit Example</a>

This is an absolute URL. The browser knows exactly where to go, even if your current site changes.

Example 3: Opening a link in a new tab

Sometimes you want users to keep your page open while they visit another page. Use target with _blank.

<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a>

The rel="noopener noreferrer" part is a best practice for links that open new tabs. It improves safety and avoids giving the new page access to the opener context.

Example 4: Linking to a section on the same page

Links can jump to headings or other elements with an id.

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

That link jumps to an element such as <h2 id="pricing">. Anchor links are useful for long pages, table of contents navigation, and skip links.

Example 5: Email and phone links

Links can also trigger the user's email or phone app when supported.

<a href="mailto:[email protected]">Email support</a>
<a href="tel:+15551234567">Call us</a>

These are useful for contact pages and mobile-first experiences, but they should still be written clearly so users know what will happen.

5. Practical Use Cases

Main site navigation, such as Home, About, Products, and Contact.
Table of contents links that jump to sections in long articles.
External references to documentation, articles, or partner sites.
Download links for PDFs, images, or other files.
Contact actions like sending email or calling a phone number.
Accessibility skip links that let keyboard users bypass repeated navigation.

6. Common Mistakes

Mistake 1: Leaving out href and expecting a real link

An anchor without href is not a real hyperlink. It can look like link text, but it will not behave like a normal navigational link.

Problem: Without href, the element is not keyboard-friendly in the same way and does not create a destination, so users cannot navigate anywhere.

<a>Read more</a>

Fix: Add a valid destination URL.

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

The corrected version works because the browser now knows where the link should go.

Mistake 2: Using a link for an action instead of navigation

Links are for navigation. If the user is meant to trigger an in-page action, such as showing a dialog or submitting a form, a button is usually the better choice.

Problem: A link that points to # does not describe a real destination and often creates confusion or unnecessary page jumps.

<a href="#">Delete item</a>

Fix: Use a button when there is no navigation target.

<button type="button">Delete item</button>

This is better because the control matches the user's expectation: a button performs an action, while a link navigates.

Mistake 3: Opening a new tab without rel

When you use target="_blank", the new page should usually be opened with security-related relationship values too.

Problem: Opening a new tab without rel="noopener" can expose the original page to tabnabbing-style risks in some browser scenarios.

<a href="https://example.com" target="_blank">Open site</a>

Fix: Add rel="noopener noreferrer" for safer behavior.

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

The fixed version protects the opener relationship and is a widely recommended pattern.

Mistake 4: Writing vague link text

Link text should tell users where the link goes, even when read out of context.

Problem: Text like “click here” or “read more” does not help screen reader users or people scanning a page for meaning.

<a href="/pricing">Click here</a>

Fix: Make the text descriptive.

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

The corrected version is clearer, more accessible, and easier to scan.

7. Best Practices

Practice 1: Use descriptive link text

Link text should stand alone and make sense out of context. This helps accessibility, SEO, and general readability.

<a href="/docs/accessibility">Accessibility guide</a>

This is better than generic wording because it tells users exactly what they will get.

Practice 2: Match the attribute to the kind of URL

Use relative URLs for internal pages and absolute URLs for external destinations.

<a href="/services">Services</a>
<a href="https://example.org">Partner site</a>

This keeps your markup predictable and easier to maintain.

Practice 3: Be careful with target="_blank"

Only open a new tab when there is a real user benefit, and include rel="noopener noreferrer".

<a href="/report.pdf" target="_blank" rel="noopener noreferrer">Open report in a new tab</a>

This approach reduces risk and prevents unexpected browser behavior.

8. Limitations and Edge Cases

Some links may not work as expected if the destination path is wrong, missing, or blocked by server routing.
Fragment links like #section only work when the target element has a matching id.
Browser behavior for downloading files, opening apps, or handling special URL schemes can vary by platform.
Links inside text should still have enough spacing and contrast to be usable on touch devices.
Opening a new tab does not guarantee the user will keep it open; avoid relying on that behavior for critical workflows.

A common “not working” report is an anchor jump that seems to do nothing. In many cases the target element is missing the matching id, or the page layout is using fixed headers that cover the scrolled-to section.

9. Practical Mini Project

Below is a small, realistic example of a help page with navigation links, external references, and a skip link. It shows how anchors fit together in a complete page.

<a href="#main-content">Skip to main content</a>

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li><a href="https://example.com/support" target="_blank" rel="noopener noreferrer">Support</a></li>
  </ul>
</nav>

<main id="main-content">
  <h1>Help Center</h1>
  <p>Use these links to find guides, contact support, or jump straight to the main content.</p>
  <p><a href="#troubleshooting">Go to troubleshooting</a></p>
  <h2 id="troubleshooting">Troubleshooting</h2>
</main>

This example combines accessible navigation with internal and external links. It shows the core patterns you will use in real pages.

10. Key Points

The a element creates HTML links.
href is required for a real destination.
Use relative URLs for internal pages and absolute URLs for external sites.
Use target="_blank" only when needed, and pair it with rel="noopener noreferrer".
Write clear, descriptive link text for accessibility and usability.
Use anchors for navigation, not for actions that should be buttons.

11. Practice Exercise

Create a small footer with three links: one internal page, one external site that opens in a new tab, and one email link.

Use descriptive link text.
Add rel="noopener noreferrer" where appropriate.
Make sure the internal link uses a relative path.

Expected output: A footer that contains clear, accessible links for site navigation, an external resource, and contact.

Hint: Remember that only the external link needs target="_blank".

Solution:

<footer>
  <p>
    <a href="/privacy">Privacy policy</a>
    <a href="https://example.com" target="_blank" rel="noopener noreferrer">Partner site</a>
    <a href="mailto:[email protected]">Email us</a>
  </p>
</footer>

12. Final Summary

HTML links are built with the a element and the href attribute. They are the foundation of navigation on the web, whether you are linking to another page, jumping within the current page, or opening an external resource.

Good links are more than just clickable text. They should be descriptive, accessible, and chosen for the right purpose. Use target carefully, especially when opening a new tab, and remember that links should navigate while buttons should perform actions.

If you want to go further, next learn about HTML navigation patterns, relative versus absolute URLs, and accessibility best practices for menus and skip links.