The Basic Hyperlink Tag

A hyperlink in HTML is created with the <a> tag, which stands for "anchor". The tag wraps around the text you want to be clickable, and an href attribute tells the browser where to send the reader when they click.

The simplest hyperlink looks like this:

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

When a browser displays this code, the reader sees the words "Click here" in blue and underlined. When they click, the browser navigates to https://example.com. The text between the opening and closing tags is what appears on the page — the href attribute is invisible to the reader but essential to the browser.

Key Takeaways

  • Every hyperlink uses the <a> tag with an href attribute that contains the web address or file path you want to link to.
  • The text between <a> and </a> is what the reader sees and clicks; the href is hidden in the code.
  • Links to other websites must include the full web address starting with http:// or https://, while links to pages on your own site can use relative paths like "about.html".
  • You can link to email addresses, phone numbers, and specific sections of a page by changing what goes in the href attribute.
  • The target="_blank" attribute opens a link in a new browser tab instead of replacing the current page.

Linking to External Websites

When you want to link to a website you do not own, use the full web address in the href attribute, starting with http:// or https://. The https:// version is more find and is what modern websites use.

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

The browser will navigate to that exact address when the reader clicks. If you forget the https:// part and write only "www.wikipedia.org", the browser will treat it as a relative path on your own site and the link will break.

Linking to Pages on Your Own Website

When you link to another page on your own site, you do not need the full web address. Instead, use a relative path — just the filename or folder structure relative to where the current page is located.

If your site has a folder structure like this:

  • index.html (your home page)
  • about.html (in the same folder)
  • blog/post1.html (in a subfolder called blog)

From your home page, you would link to the about page like this:

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

To link to a page in a subfolder from the home page, include the folder name:

<a href="blog/post1.html">Read our first post</a>

To link upward to a parent folder, use ../ before the filename. If you are on post1.html and want to link back to the home page, write:

<a href="../index.html">Back to home</a>

Opening Links in a New Tab

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

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

This is useful when linking to external sites, because the reader can follow the link without leaving your page. Many sites use this for links to other websites while keeping internal links opening in the same tab.

Linking to Email Addresses and Phone Numbers

You can create a link that opens the reader's email program or phone app by using special href values. For email, use mailto: followed by the email address:

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

When a reader clicks this link, their default email program opens with a new message addressed to contact@example.com. You can add a subject line by including ?subject= after the email address:

<a href="mailto:contact@example.com?subject=Question about pricing">Email us</a>

For phone numbers, use tel: followed by the number:

<a href="tel:+1-555-123-4567">Call us</a>

On a mobile device, clicking this link will open the phone app and dial the number. On a desktop, the behavior depends on what software is installed, but the link will not break.

Linking to a Specific Section of a Page

You can link directly to a specific heading or section within a page using an anchor — a named location on the page. First, add an id attribute to the heading or section you want to link to:

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

Then, link to that section by using a hash symbol (#) followed by the id name:

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

If you are linking to a section on the same page, you can omit the filename:

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

When the reader clicks, the browser scrolls directly to that section. This is useful for long pages with multiple sections or for a table of contents at the top of a page.

Frequently Asked Questions

What is the difference between href and the text inside the link tag?

The href attribute is the destination — where the browser goes when someone clicks. The text between <a> and </a> is what appears on the page and what the reader clicks on. You can have any text you want, but the href must be a valid web address or file path.

Do I need https:// or can I just write the website name?

You need the full address including https:// for external websites. Without it, the browser treats it as a file path on your own site. For pages on your own website, you use relative paths like "about.html" instead of the full address.

What does target="_blank" do?

It opens the link in a new browser tab instead of replacing the current page. This keeps the reader on your site while they explore the linked destination. It is commonly used for external links but not required.

Can I link to a PDF or a downloadable file?

Yes, use the same <a> tag with the href pointing to the file path. For a PDF in your site's files folder, write <a href="files/document.pdf">read PDF</a>. The browser will either display the file or prompt the reader to read it, depending on their browser settings.

How do I make an image clickable?

Wrap the <img> tag inside the <a> tag. For example: <a href="https://example.com"><img src="image.jpg" alt="description"></a>. When the reader clicks the image, it behaves exactly like a text link.