How to Add a Hyperlink in HTML and on Web Pages

The basic HTML syntax for a hyperlink

A hyperlink is created with the anchor tag, written as <a> in HTML. The tag wraps around the text you want to be clickable, and the href attribute tells the browser where to go when someone clicks it.

The simplest hyperlink looks like this:

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

When a browser displays this, the reader sees the words "Click here" as a clickable link. The href attribute contains the destination — in this case, https://www.example.com. You can replace that URL with any web address, file path, or email address you want the link to point to.

Key Takeaways

• Every hyperlink uses the anchor tag <a> with an href attribute that contains the destination URL.
• The text between the opening and closing tags is what appears clickable on the page — make it descriptive so readers know where the link goes.
• Links to other websites must include the full URL starting with http:// or https://.
• Links to files or pages on your own site can use relative paths like href="about.html" instead of the full web address.
• The target="_blank" attribute opens a link in a new tab instead of replacing the current page.

Linking to external websites

When you want to link to a page on a different website, use the full URL including the protocol. The protocol is the https:// or http:// part at the beginning. Without it, the browser will treat the link as a relative path on your own site and the link will break.

For example, to link to Wikipedia's article on hyperlinks, you would write:

<a href="https://en.wikipedia.org/wiki/Hyperlink">Learn about hyperlinks on Wikipedia</a>

Notice that the link text — "Learn about hyperlinks on Wikipedia" — tells the reader where they are going. This is better than link text that just says "click here" or "link", because it helps both readers and search engines understand what the destination contains.

Linking to pages on your own website

If you are linking to another page on the same website, you do not need to include the full URL. Instead, you can use a relative path, which is just the filename or folder structure relative to the current page.

If your site has a file called about.html in the same folder as the current page, the link would be:

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

If the file is in a subfolder called pages, use:

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

Relative paths make it easier to move your entire site to a different location without breaking all your internal links. They also load slightly faster because the browser does not have to look up a domain name.

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</a>

This is useful when you are linking to an external site and want readers to stay on your page. However, use it sparingly — many readers find it annoying when links open new tabs without warning. If you do use it, consider adding a note in the link text or nearby text so readers know what to expect.

Linking to email addresses

To create a link that opens the reader's email program, use mailto: followed by the email address:

<a href="mailto:contact@example.com">Send us an email</a>

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

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

Keep in mind that publishing an email address as a clickable link on a public website makes it visible to spam bots. If you want to reduce spam, consider using a contact form instead.

Linking to a specific section on a page

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

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

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

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

If you want to link to a section on a different page, combine the page URL with the anchor:

<a href="https://www.example.com/services.html#pricing">See our pricing</a>

This is helpful for long pages where you want to let readers jump directly to the information they need.

Common mistakes to avoid

The most frequent error is forgetting the https:// when linking to external sites. Without it, the browser treats the link as a relative path on your own site, and the link will not work.

Another common mistake is using vague link text like "click here" or "read more". Search engines and screen readers use link text to understand what a page contains, so descriptive text helps both users and search visibility. Instead of "click here to learn about our services", write "Learn about our services".

A third mistake is opening external links in new tabs without warning. If you use target="_blank", let readers know in the link text or nearby text so they are not surprised.

Frequently Asked Questions

Do I need to include http:// or https:// when linking to external sites?

Yes. Without the protocol, the browser treats the link as a relative path on your own site. Always include https:// (or http:// for older sites that do not support HTTPS) at the beginning of external URLs.

What is the difference between target="_blank" and target="_self"?

target="_blank" opens the link in a new tab. target="_self" opens it in the current tab, which is the default behavior. You rarely need to write target="_self" because that is what happens without the attribute.

Can I link to a PDF or other file types?

Yes. Use the file path in the href attribute just as you would for an HTML page: <a href="documents/guide.pdf">Download our guide</a>. The browser will either open the file or prompt the user to download it, depending on their settings.

How do I make a link that does not go anywhere?

Use href="#" or href="javascript:void(0)". However, this is usually a sign that you should use a button element instead of a link. Links should navigate somewhere; buttons should trigger an action on the current page.

Should I use relative or absolute paths for internal links?

Relative paths are generally better for internal links because they work if you move your entire site to a different domain. Use absolute paths (full URLs) only when you need to link to your site from an external source or when you are writing documentation.