The Basic HTML Link Tag

A clickable link in HTML uses the anchor tag, written as <a>. The tag wraps around the text you want to be clickable, and the href attribute tells the browser where to send the reader when they click it.

Here is the simplest working example:

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

When a browser displays this, the text "Click here" appears as a clickable link (usually blue and underlined). The href value can be a full web address like https://example.com, a relative path to another page on your site like about.html, or even an email address like mailto:person@example.com.

Key Takeaways

  • Every clickable link needs an <a> tag with an href attribute that contains the destination URL or file path.
  • The text between the opening and closing <a> tags is what appears clickable to the reader.
  • Links to pages on your own site use relative paths like contact.html, while links to other websites use full URLs starting with http:// or https://.
  • You can open a link in a new tab by adding target="_blank" to the anchor tag.
  • Email links use href="mailto:address@example.com" and phone links use href="tel:+1234567890".

Links to Other Websites

When you want to link to a page on a different website, use the full web address in the href attribute. This address must start with http:// or https:// (the s means the connection is encrypted).

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

By default, clicking this 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.wikipedia.org" target="_blank">Visit Wikipedia</a>

Always use https:// when the website supports it. If you use http:// on a site that requires https://, the browser will usually redirect automatically, but starting with the right protocol is cleaner.

Links to Pages on Your Own Site

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

If your site has this structure:

  • index.html
  • about.html
  • pages/contact.html

From index.html, you would link to about.html like this:

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

To link to a file in a subfolder, include the folder name:

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

To link upward to a parent folder, use ../. If contact.html needs to link back to index.html, it would be:

<a href="../index.html">Home</a>

Email and Phone Links

You can create links that open the reader's email client or phone dialer by using special href values. An email link uses mailto: followed by the address:

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

When clicked, this opens the reader's default email program with the address already filled in. You can also add a subject line:

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

For phone links, use tel: followed by the number with a plus sign and country code:

<a href="tel:+14155552671">Call us</a>

On mobile devices, this opens the phone dialer. On desktop, the behavior depends on what software the user has installed.

Styling Links with CSS

By default, browsers display links in blue with an underline. You can change this appearance using CSS. The most common approach is to target the <a> tag directly:

a { color: green; text-decoration: none; }

This removes the underline and makes all links green. You can also style links differently depending on whether they have been visited. The :visited selector targets links the reader has already clicked:

a:visited { color: purple; }

The :hover selector changes the appearance when the reader's mouse is over the link:

a:hover { color: red; text-decoration: underline; }

This is useful for giving readers visual feedback that the link is clickable. You can also use :active to style the moment the link is being clicked.

Common Mistakes That Break Links

The most frequent error is forgetting the href attribute entirely. A tag without href is not a link — it is just styled text:

<a>This is not clickable</a>

Another common mistake is using a relative path when you mean to link to an external site, or vice versa. If you write <a href="example.com"> without https://, the browser treats it as a relative path and looks for a file named "example.com" on your server.

Forgetting to close the <a> tag with </a> will make everything after it clickable until the browser encounters another closing tag, which breaks your layout. Always check that every opening tag has a matching closing tag.

If a link does not work, open your browser's developer tools (usually F12 or right-click and select "Inspect") and check the HTML. Look for typos in the href value, missing quotes, or a missing closing tag.

Frequently Asked Questions

Can I make an image clickable?

Yes. Wrap the <img> tag inside an <a> tag: <a href="page.html"><img src="image.jpg"></a>. When clicked, the image acts as a link to the destination in the href attribute.

What is the difference between href and src?

href is used in anchor tags to specify where a link goes. src is used in image and script tags to specify where to load a file from. They serve different purposes and are not interchangeable.

How do I link to a specific part of a page?

Use a hash symbol followed by an ID. First, add an ID to the element you want to link to: <h2 id="section2">Section 2</h2>. Then link to it with <a href="#section2">Jump to Section 2</a>. You can also link to a section on another page: <a href="page.html#section2">.

Should I use http or https?

Always use https:// when available. It encrypts the connection between the reader and the website, protecting their data. Most modern websites require it, and browsers may warn users if you link to an unencrypted http:// site.