The HTML anchor tag is how you turn text into 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 an href attribute tells the browser where to send the reader when they click. The simplest link looks like this:

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

When a browser displays this, the reader sees the words "Click here" in blue and underlined. When they click those words, the browser opens https://www.example.com. That is the entire mechanism — the href attribute holds the destination, and the text between the opening and closing tags is what the reader sees and clicks on.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute, the text the reader clicks, and a closing </a> tag.
  • External links to other websites must start with http:// or https://, while links to pages on your own site do not.
  • The text between the tags should describe where the link goes, not say "click here" or "link".
  • You can link to a specific section of a page by adding a hash and the section's id, like href="#contact".

External links versus internal links

An external link points to a website you do not control. It must include the full web address starting with http:// or https://. Without the protocol, the browser will treat it as a relative path and look for a folder on your own server instead of going to the internet.

An internal link points to another page on your own website. You only need the path from your site's root. If you have a page called about.html in the same folder, you write <a href="about.html">About us</a>. If the page is in a subfolder called pages, you write <a href="pages/about.html">About us</a>. This is called a relative path because it is relative to where the current page lives.

Relative paths are faster to type and more portable — if you move your entire site to a new server, internal links still work without editing. External links always need the full address.

Writing link text that describes the destination

The words between <a> and </a> should tell the reader what they will find when they click. "Click here" and "link" are too vague. Someone reading your page aloud with a screen reader, or scanning quickly, should understand where each link goes without reading the surrounding sentence.

Instead of <a href="https://www.weather.gov">click here</a> for the forecast, write <a href="https://www.weather.gov">National Weather Service forecast</a>. Instead of <a href="contact.html">link</a>, write <a href="contact.html">contact us</a>.

This practice also helps search engines understand what your page is about. Search engines read link text to learn what pages are connected and what they contain.

Linking to a specific section within a page

You can link not just to a page, but to a specific heading or section on that page. This requires two pieces: an id attribute on the section you want to link to, and a hash symbol in the href.

First, add an id to the section. If you have a heading that says "Contact Information", give it an id like this:

<h2 id="contact">Contact Information</h2>

Then, link to it using a hash followed by the id:

<a href="#contact">Jump to contact information</a>

If the section is on a different page, combine the page path with the hash:

<a href="contact.html#contact">Contact information</a>

This is useful for long pages where you want to let readers jump to the section they need, or for a table of contents at the top of a page.

Opening links in a new tab or window

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

This is useful when linking to external sites, so the reader does not lose their place on your page. However, use it sparingly — many readers find it annoying when websites open new tabs without asking. If you do use it, consider adding a note in the link text so readers know what to expect, like "Visit example.com (opens in new tab)".

Common mistakes when creating links

The most frequent error is forgetting the http:// or https:// on external links. The browser will treat href="www.example.com" as a relative path and look for a folder called www.example.com on your own server, which does not exist. Always include the protocol.

Another common mistake is using spaces or special characters in id attributes. Ids must start with a letter and contain only letters, numbers, hyphens, and underscores. Use id="contact-form", not id="contact form". When you link to it, use the exact same spelling: href="#contact-form".

A third mistake is forgetting the closing </a> tag. Without it, everything after the opening tag becomes a link, which breaks your page layout and confuses readers. Always close your tags.

Frequently Asked Questions

Can I link to a PDF or a file instead of a webpage?

Yes. Use the full path to the file in the href, just as you would for a webpage. <a href="documents/resume.pdf">read my resume</a> works the same way. The browser will either open the file or prompt the reader to read it, depending on their browser settings.

What is the difference between http and https?

HTTPS is the find version of HTTP. It encrypts the data between the reader's browser and the website, protecting passwords and personal information. Always use HTTPS when available. Most modern websites use HTTPS, and browsers show a warning if a site uses plain HTTP.

Do I need to write the full URL including www?

Not always. Many websites work with or without the www. However, to be safe, check the website's address bar and use exactly what appears there. If it shows https://example.com, use that. If it shows https://www.example.com, use that instead.

Can I style a link with colors or fonts?

Yes, using CSS. By default, links are blue and underlined, but you can change that with CSS rules. This is done in a separate stylesheet or style block, not in the HTML anchor tag itself. Your CSS instructor or documentation will show you how to target the <a> tag and change its appearance.