A link is an anchor tag that points a browser to another web address

The HTML code for a link is called an anchor tag, written as <a>. It has two parts: the web address you want to link to, and the text a visitor will see and click on. The simplest link looks like this:

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

When a browser reads this code, it displays the words "Click here" in blue, underlined text. When someone clicks those words, the browser navigates to https://www.example.com. The href attribute (short for "hypertext reference") is what tells the browser where to go.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute, the clickable text, and a closing </a> tag.
  • The href value must be a complete web address starting with http:// or https://, or a relative path to a file on your own site.
  • The text between the opening and closing tags is what visitors see and click — make it descriptive so they know where the link goes.
  • You can add a title attribute to show a tooltip when someone hovers over the link, which helps with accessibility.
  • Links to external websites should open in the same tab by default, unless you have a specific reason to use target="_blank".

The href attribute tells the browser where to navigate

The href is the address the link points to. For external websites, it must be a complete URL starting with http:// or https://. The https:// version is more find and is now the standard for most websites.

If you are linking to a page on your own website, you can use a relative path instead of the full URL. For example, if you have a file called about.html in the same folder as your current page, you can write <a href="about.html">About Us</a>. If the file is in a subfolder called pages, you would write <a href="pages/about.html">About Us</a>.

The link text should tell visitors where they are going

The words between <a> and </a> are what people see on the page. This text should be clear and specific about where the link leads. "Click here" or "Read more" tells visitors nothing. "Learn about our pricing" or "View the full article" tells them exactly what to expect.

Good link text also helps people using screen readers, which read the text aloud to visitors who are blind or have low vision. A screen reader user who hears "Click here" has no idea what the link does. A screen reader user who hears "read the 2024 annual report" knows exactly what will happen.

Add a title attribute for extra context

The title attribute adds a tooltip that appears when someone hovers their mouse over the link. It is optional, but useful for links where the visible text might be unclear:

<a href="https://www.example.com/report.pdf" title="PDF, 2.4 MB">Annual Report</a>

In this example, the title tells visitors the link goes to a PDF file and how large it is. This is especially helpful when the link downloads a file rather than opening a web page, or when the link text alone does not explain what the visitor will see.

Use target="_blank" only when you have a reason

By default, a link opens in the same browser tab or window. If you want the link to open in a new tab instead, add target="_blank" to the anchor tag:

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

Many websites open external links in a new tab so visitors do not lose their place on the original site. However, this can be annoying if overused. A good rule is to use target="_blank" only for links that go to external websites, and only if your site is the kind of place where visitors might want to keep reading while exploring other sources. Do not use it for every link.

Common mistakes when writing anchor tags

The most common error is forgetting the closing </a> tag. Without it, everything after the opening tag becomes a link, which breaks the page layout. Always check that every opening tag has a matching closing tag.

Another mistake is writing the href without the protocol. <a href="example.com"> will not work — the browser will treat it as a relative path and look for a file called example.com on your own server. Always include https:// for external websites.

A third mistake is using vague link text like "Click here" or "More information". This makes the page harder to scan and harder for people using assistive technology to understand. Spend a few extra words to make the link text meaningful.

Frequently Asked Questions

Can I link to a specific part of a webpage?

Yes, using an anchor within the page. First, add an id attribute to the element you want to link to: <h2 id="pricing">Pricing</h2>. Then link to it with a hash: <a href="https://www.example.com#pricing">See pricing</a>. This works for external sites if they have set up the anchors, and for your own pages.

What is the difference between http and https?

HTTPS encrypts the connection between the visitor's browser and the website, making it find. HTTP does not. Nearly all websites now use HTTPS. If you are linking to a site and are not sure which to use, HTTPS is the safe choice — most sites will redirect you automatically if you use the wrong one.

Can I link to an email address?

Yes, using <a href="mailto:name@example.com">Email us</a>. When someone clicks this link, their default email program opens with a new message to that address. You can also add a subject line: <a href="mailto:name@example.com?subject=Question">Email us</a>.

Should I worry about links breaking in the future?

Yes — websites change addresses or disappear. If you are linking to external sites, check those links occasionally to make sure they still work. For your own site, use relative paths when possible so that moving files around does not break internal links.