How to Turn Text Into a Clickable Link in HTML

The basic HTML tag for a hyperlink

To make text clickable, you wrap it in an <a> tag and add an href attribute that points to the destination. The href is where the link goes when someone clicks it.

Here is the simplest example:

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

When a visitor clicks the words "Click here", their browser opens https://www.example.com. The text between the opening <a> and closing </a> tags is what appears on the page — that is the clickable part.

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 visitors see and click on the page.
External links (to other websites) need the full web address starting with http:// or https://.
Internal links (to pages on your own site) can use just the file name or relative path without the domain.
You can link to email addresses, phone numbers, and files by changing what goes in the href attribute.

External links to other websites

When you link to a website you do not own, always include the full web address in the href. Start with https:// (the secure version) or http://.

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

If you leave off the https:// part, the browser will treat it as a link to a page on your own site, and the link will break. This is one of the most common mistakes — the page exists, but your link points to the wrong place.

Internal links to pages on your own site

When you link to another page on your own website, you do not need the full web address. You can use just the file name or the path from your current page to the target page.

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

If the page you are linking to is in a folder called pages, use a forward slash to show the path:

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

If you need to go up one level (out of the current folder), use two dots and a forward slash:

The advantage of internal links is that they keep working even if you move your entire site to a different domain — the relative paths stay the same.

Links to email addresses and phone numbers

You can create a link that opens the visitor's email program or phone dialer by using special prefixes in the href.

For email, use mailto: followed by the address:

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

For phone numbers, use tel: followed by the number with no spaces or dashes:

On a phone or tablet, clicking a tel: link will dial the number. On a desktop computer, it usually does nothing unless the visitor has a calling program installed. Email links work on any device that has an email program set up.

Links that open in a new tab

By default, a link opens in the same tab or window. If you want it to open in a new tab instead, add the target attribute with the value _blank:

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

This is useful when you are linking to an external site and you want visitors to stay on your page. Many sites use this for links to social media or partner websites.

You can combine target with any of the other link types — external links, internal links, email links, and phone links all work with target="_blank".

Links to specific sections within a page

You can link directly to a heading or section within a page by using an anchor. First, add an id attribute to the heading or element you want to link to:

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

Then, in your link, use a hash symbol followed by that id:

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

If you are linking to a section on a different page, combine the file name with the anchor:

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

This is common in long pages with a table of contents at the top — each item in the table of contents links to a section below.

Common mistakes and how to fix them

The most frequent problem is forgetting https:// on external links. If you write <a href="example.com"> instead of <a href="https://example.com">, the browser treats it as an internal link and looks for a file called example.com on your server. The link will not work.

Another common error is mismatched tags. Every opening <a> needs a closing </a>. If you forget the closing tag, everything after the link becomes clickable until the browser finds a closing tag somewhere else on the page.

A third mistake is putting a space or line break inside the href value. The address must be continuous with no spaces: <a href="https://www.example.com"> works, but <a href="https://www.example.com " (with a space before the closing quote) will break the link.

Frequently Asked Questions

Can I put an image inside an <a> tag to make it clickable?

Yes. Put the <img> tag inside the <a> tag instead of text: <a href="https://example.com"><img src="logo.png"></a>. The image becomes clickable and behaves exactly like a text link.

What is the difference between href and src?

href is used in links (<a> tags) and tells the browser where to go when clicked. src is used in images and scripts and tells the browser what file to load and display on the page. They serve different purposes and are not interchangeable.

Do I need to add anything to make a link look different from regular text?

Browsers automatically style links — usually blue and underlined. You can change this appearance with CSS if you want, but the link works without any styling. The <a> tag and href attribute are all you need for functionality.

Can I link to a PDF or Word document the same way I link to a web page?

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

What does the hash symbol (#) do in a link?

The hash symbol tells the browser to jump to a specific section on a page using an anchor. #pricing means "find the element with id='pricing' and scroll to it." The hash and anchor name are not sent to the server — they work entirely in the browser.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.