The anchor tag makes a clickable link

A 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.

The basic structure is: <a href="https://example.com">Click here</a>. The text between the opening and closing tags is what appears on the page. The href value is the destination — it can be another website, a page on your own site, or even an email address.

When a reader sees "Click here" on the page, it will be underlined and usually blue. Clicking it takes them to the URL in the href.

Key Takeaways

  • Every link uses <a href="URL">text</a>, where the URL goes in quotes after href= and the clickable text goes between the tags.
  • External links to other websites must start with http:// or https://, or the browser will treat them as relative paths on your own site.
  • Links to pages on your own site use relative paths like href="about.html" or href="pages/contact.html" instead of full URLs.
  • You can link to a specific section of a page using an anchor ID: <a href="page.html#section-name"> jumps to the element with id="section-name".

External links to other websites

When you link to a website you do not own, the href must include the full address starting with https://. This tells the browser to leave your site and go to an external domain.

Example: <a href="https://www.wikipedia.org">Learn more on Wikipedia</a>. Without the https://, the browser will look for a file called www.wikipedia.org on your own server and fail.

You can link to any publicly available web page. The destination site does not need to give you permission, and you do not need to notify them.

Links to pages on your own site

For pages that live on your own website, use a relative path instead of a full URL. This is shorter and means your links still work if you move your site to a different domain.

If you have a file called about.html in the same folder as your current page, link to it with: <a href="about.html">About us</a>. If about.html is in a subfolder called pages, use: <a href="pages/about.html">About us</a>.

To link to a page in a parent folder, use ../. For example, <a href="../index.html">Home</a> goes up one level and opens index.html.

Jumping to a specific section on a page

You can link directly to a heading or section within a page by using an anchor ID. First, add an id attribute to the element you want to link to: <h2 id="contact-section">Contact Us</h2>.

Then link to it using a hash symbol: <a href="#contact-section">Jump to contact</a>. This link will scroll the page to that heading when clicked.

You can also link to a section on a different page: <a href="about.html#team">See our team</a> will open about.html and jump to the element with id="team".

Email links and phone numbers

To create a link that opens the reader's email program, use mailto: in the href: <a href="mailto:contact@example.com">Email us</a>. Clicking this link opens the default email client with the address already filled in.

You can add a subject line: <a href="mailto:contact@example.com?subject=Website%20Inquiry">Email us</a>. The %20 represents a space in the URL.

For phone numbers, use tel:: <a href="tel:+1-555-123-4567">Call us</a>. On mobile devices, this will open the phone dialer.

Opening links in a new tab or window

By default, clicking a link replaces the current page. To open the link in a new tab instead, add the target attribute: <a href="https://example.com" target="_blank">Visit example</a>.

The value _blank tells the browser to open a new tab. This is useful when linking to external sites so readers do not lose their place on your page.

For security reasons, add rel="noopener noreferrer" when using target="_blank": <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit example</a>. This prevents the new page from accessing information about your site.

Common mistakes and how to fix them

The most frequent error is forgetting https:// on external links. If you write <a href="example.com">, the browser treats it as a relative path and looks for a folder called example.com on your server. Always include the protocol.

Another mistake is using spaces or special characters in file names and anchor IDs. Use hyphens or underscores instead: id="contact-section" instead of id="contact section". Spaces break the link.

Forgetting the closing </a> tag will make everything after the opening tag clickable until the browser encounters another tag. Always close your anchor tags.

Frequently Asked Questions

Can I put an image inside a link tag?

Yes. Wrap the image tag with the anchor tag: <a href="page.html"><img src="image.jpg" alt="description"></a>. The entire image becomes clickable.

What is the difference between href and src?

href is used in anchor tags to link to another page or resource. src is used in image and script tags to load a file directly into the current page. They serve different purposes.

Do I need to add www to the beginning of a URL?

No. Most modern websites work with or without www. https://example.com and https://www.example.com usually go to the same place. Use whichever form the website displays.

How do I style a link with CSS?

Use the a selector in your CSS file: a { color: blue; text-decoration: none; }. You can also target different states: a:hover for when the mouse is over it, and a:visited for links the reader has already clicked.