How to Make a Link Clickable in HTML

HTML anchor element turning text into a clickable link

To make a link clickable in HTML, place the destination in an anchor element and put the visible link text between its opening and closing tags. The anchor works for page URLs, email addresses, and phone numbers; only the href value changes.

This basic pattern shows how to make a link clickable:

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

How to Make a Link Clickable in HTML

The opening tag identifies the element as an anchor. Its href attribute holds the destination. In this example, the href value is https://example.com, while Visit Example is the clickable link text. The closing tag ends the anchor. When a visitor activates it, the browser requests the address in href.

Use quotation marks around every href value, and keep the opening and closing tags paired. An anchor can wrap text or another inline element, so the destination remains attached to the content users activate.

HTML does not make a URL clickable merely because it appears as visible text. The URL must be assigned to href, and the words or element users select must appear between the anchor tags. An anchor without href is not a working navigation link.

How to Create a Clickable Link With Absolute and Relative URLs

An absolute URL contains the full protocol and domain, such as https://www.example.com/pricing. It identifies the same destination from any page on the web. Use an absolute URL for an external website or when you need an explicit address that can be copied and shared.

A relative path leaves out the protocol and domain because the browser resolves it from the current site. A root-relative path begins with a slash, as in:

<a href=”/pricing”>Pricing</a>

This points to the pricing page at the site’s root. A document-relative path names a location based on the current folder, as in:

<a href=”contact.html”>Contact us</a>

Relative paths are useful for links between pages in the same website, but they depend on the site’s folder structure. If the current page is inside a subfolder, a path such as ../contact.html moves up one folder before looking for the file. Check the deployed URL structure rather than assuming it matches your local files.

How to Hyperlink a Website, Email Address, or Phone Number

Website navigation uses the same anchor syntax. An absolute URL is usually safest when linking to another domain, while a relative path suits another page within your own site:

<a href=”https://www.example.com”>Example website</a>

For an email address, use a mailto: destination instead of a page URL:

<a href=”mailto:[email protected]”>Email us</a>

Clicking a mailto link typically opens the visitor’s default email application with the address ready in the To field. This is an email action, not ordinary page navigation. A subject can be added with a query value, such as mailto:[email protected]?subject=Project%20enquiry.

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

<a href=”tel:+15551234567″>Call +1 555 123 4567</a>

On a compatible device, clicking it opens the phone app or prompts the visitor to call. A tel link does not load a website page.

How to Check Link Text and Destination Values

Check both sides of the link before publishing. The text should describe the destination, and the destination should match what the text promises. “Read the pricing guide” is more useful than “click here” when the link leads to pricing information.

  • Confirm that href contains the complete intended URL or the correct relative path.
  • Check the protocol, domain spelling, slashes, and quotation marks.
  • Test the link from the page where it appears, especially when using a relative path.
  • For mailto and tel links, verify the email address or phone number separately.
  • Use descriptive link text so visitors understand the destination before activating it.

If the browser displays the words but clicking does nothing, look for a missing href, malformed quotes, a misspelled protocol, or an incorrect relative path. If the link opens the wrong page, compare the path with the site’s folder structure and check slash placement. A correctly paired anchor, valid href value, and accurate link text produce a working clickable link.