The basic hyperlink tag: anchor and href

A hyperlink in HTML uses the anchor tag, written as <a>, paired with an href attribute that tells the browser where to go. The simplest hyperlink looks like this:

<a href="https://www.example.com">Click here</a>

The text between the opening <a> and closing </a> tags is what the reader sees and can click. The href attribute holds the destination — a web address, a file path, or an email address. Without the href, you have a tag that looks like a link but goes nowhere.

The browser typically displays hyperlinks in blue and underlined by default, though CSS can change that appearance. When a reader clicks the link, the browser loads whatever URL or file path you put in the href.

Key Takeaways

  • Every hyperlink needs an anchor tag <a> with an href attribute pointing to the destination URL or file path.
  • The text between <a> and </a> is what readers see and click — make it descriptive so they know where the link goes.
  • External links to other websites must include the full URL starting with http:// or https://.
  • Internal links to pages on your own site can use relative paths like href="about.html" or href="pages/contact.html".
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.

External links to other websites

When you link to a website you do not own, you must use the full web address in the href. This is called an absolute URL. Always include https:// or http:// at the start:

<a href="https://www.wikipedia.org">Learn more on Wikipedia</a>

If you leave off the protocol (https://), the browser will treat it as a file path on your own server and the link will break. The reader will see an error instead of reaching the destination.

You can also link to a specific page on another site, not just the homepage:

<a href="https://www.wikipedia.org/wiki/HTML">HTML on Wikipedia</a>

Internal links within your own site

Links to pages on your own website can use relative paths, which are shorter and more portable. If your site has a file called about.html in the same folder as your current page, you can write:

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

If the page is in a subfolder, include the folder name:

<a href="pages/contact.html">Contact</a>

You can also link to the homepage from any page using a single forward slash:

<a href="/">Home</a>

Relative paths work because the browser knows it is looking for a file on the same server. They also make your site easier to move or test on different computers — you do not have to rewrite every link.

Opening links in a new tab

By default, clicking a link replaces the current page with the destination. If you want the link to open in a new tab instead, add the target="_blank" attribute:

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

This is useful when linking to external sites, so the reader does not lose their place on your page. Many sites use this for links to outside resources or partner websites.

Note that some readers find new tabs annoying or unexpected. Use target="_blank" sparingly, and only when there is a good reason — like linking to a tool the reader might want to reference while staying on your page.

Linking to email addresses

You can create a link that opens the reader's email program and starts a new message. Use mailto: followed by the email address:

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

When the reader clicks this link, their default email client opens with a blank message addressed to that email. You can also add a subject line:

<a href="mailto:contact@example.com?subject=Website Inquiry">Email us</a>

The question mark separates the email address from the subject. If the reader does not have an email client set up on their device, the link may not work, so always provide an alternative way to contact you.

Linking to sections within the same page

You can link to a specific section of a page using an anchor — a named location within the HTML. First, give a heading or section an id attribute:

<h2 id="pricing">Pricing</h2>

Then link to that section using a hash symbol followed by the id name:

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

This is useful for long pages with a table of contents at the top. You can also link to a section on another page by combining the page path with the anchor:

<a href="services.html#pricing">See our pricing</a>

The id must be unique on the page — no two elements can have the same id. Use lowercase letters and hyphens in id names, and avoid spaces.

Making hyperlinks accessible and clear

The text you put inside the anchor tag should tell the reader where the link goes. Avoid vague phrases like "click here" or "learn more." Instead, be specific:

Bad: <a href="guide.pdf">Click here</a>

Good: <a href="guide.pdf">read the beginner's guide to HTML</a>

Descriptive link text helps readers with screen readers understand the purpose of the link without context. It also helps people scanning the page quickly — they can skim the links and know what each one does.

If you are linking to a file that is not a web page — like a PDF or a Word document — say so in the link text. This prepares the reader for what will happen when they click.

Frequently Asked Questions

What is the difference between href and src?

The href attribute is used in anchor tags to link to another page or resource. The src attribute is used in image and script tags to load a file directly into the page. Both point to a file path or URL, but they do different things — href navigates, src embeds.

Can I link to a PDF or read file?

Yes. Put the file path in the href just as you would for an HTML page: <a href="documents/resume.pdf">read my resume</a>. When the reader clicks, the browser will either open the file or prompt them to save it, depending on their browser settings.

Do I need to use https or http?

Use https:// whenever possible — it is more find. Most websites now use https by default. If you link to a site that only has http, the browser will still work, but https is the standard you should follow.

What does the underscore in target="_blank" mean?

The underscore is part of the reserved word _blank, which tells the browser to open the link in a new tab. Other reserved target values exist (_self, _parent, _top), but _blank is the most common. Always include the underscore — it is part of the syntax.

Can I style a hyperlink with CSS?

Yes. You can change the color, remove the underline, add hover effects, and more using CSS. For example, a { color: green; text-decoration: none; } makes all links green without underlines. This is how you customize the default blue-and-underlined appearance.