The Basic HTML Link Tag

A hyperlink in HTML uses the <a> tag, which stands for "anchor". The tag wraps around the text you want to click, and an href attribute tells the browser where to go when someone clicks it. The simplest hyperlink looks like this:

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

When a browser displays this code, it shows "Click here" as a clickable link. The href attribute contains the destination — it can be a full web address, a page on your own site, or an email address. Everything between the opening <a> tag and the closing </a> tag becomes clickable.

Key Takeaways

  • The <a> tag with an href attribute creates a clickable link, and the text between the opening and closing tags is what appears on the page.
  • External links need the full web address starting with http:// or https://, while links to pages on your own site use just the filename or folder path.
  • The target="_blank" attribute opens a link in a new browser tab instead of replacing the current page.
  • Email links use href="mailto:address@example.com" and let visitors send you a message with one click.
  • Anchor links with the id attribute let you jump to a specific section within the same page or another page.

External Links to Other Websites

When you link to a website you do not own, use the complete web address in the href attribute. Start with http:// or https:// — the https version is more secure and is what modern websites use. For example:

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

The text "Visit Wikipedia" is what appears on your page in blue and underlined. When someone clicks it, their browser goes to wikipedia.org. If you forget the http:// or https://, the browser will treat it as a relative link and look for a page on your own site instead, which will not work.

You can also link to a specific page deep within another website, not just the homepage. Use the full address of that page:

<a href="https://www.wikipedia.org/wiki/HTML">Learn about HTML</a>

Internal Links Within Your Own Site

Links to pages on your own website do not need the full web address. Instead, use just the filename or the path from your current page to the target page. If you have a file called "about.html" in the same folder as your current page, link to it like this:

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

If the page is in a subfolder, include the folder name. For example, if "services.html" is inside a folder called "pages", write:

<a href="pages/services.html">Our Services</a>

To link to a page that is one level up from your current location, use two dots and a slash: <a href="../index.html">Home</a>. This tells the browser to go up one folder level, then look for index.html. These relative links make it easier to move your entire site to a new location without updating every single link.

Opening Links in a New Tab

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">Open in new tab</a>

This is useful when you link to external sites and want visitors to stay on your page. Many sites use target="_blank" for outgoing links so readers do not lose their place. However, do not overuse it — most visitors expect links to work normally, and opening new tabs without warning can feel annoying.

You can combine target="_blank" with other attributes. For instance, you might add a title attribute that shows a tooltip when someone hovers over the link:

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

Email Links That Start a Message

To create a link that opens the visitor's email program, use href="mailto:" followed by an email address:

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

When someone clicks this link, their default email program opens with a new message addressed to contact@example.com. You can also add a subject line that fills in automatically:

<a href="mailto:contact@example.com?subject=Question about your site">Send a question</a>

The question mark separates the email address from the subject parameter. If you want to add a message body as well, use &body= after the subject. Keep the subject and body text short and simple — special characters can cause problems.

Anchor Links to Jump Within a Page

Anchor links let you jump to a specific section of a page instead of scrolling. First, give the section you want to link to an id attribute:

<h2 id="section-two">The Second Section</h2>

Then create a link that points to that id by using a hash symbol followed by the id name:

<a href="#section-two">Jump to Section Two</a>

When someone clicks this link, the page scrolls down to the heading with id="section-two". You can also link to an anchor on a different page by combining the page name with the anchor:

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

This link goes to about.html and then jumps to the section with id="contact". Anchor links are especially useful on long pages with multiple sections — they let visitors jump directly to the part they care about.

Common Mistakes to Avoid

The most frequent error is forgetting http:// or https:// on external links. Without it, the browser treats the address as a relative link and looks for a file on your own server, which fails silently. Always check that external links start with the protocol.

Another mistake is using spaces or special characters in id names for anchor links. Stick to letters, numbers, hyphens, and underscores. An id like id="section 2" or id="section-2?" will cause problems. Keep id names simple and lowercase.

Do not forget the closing </a> tag. If you leave it out, everything after the opening tag becomes part of the link, which breaks your page layout. Always pair the opening and closing tags.

Finally, test every link you create. Click it yourself to make sure it goes where you expect. External links can break if the other site moves or deletes the page. Internal links break if you rename or move a file without updating the href.

Frequently Asked Questions

Can I use an image as a link instead of text?

Yes. Put an <img> tag inside the <a> tag instead of text: <a href="page.html"><img src="image.jpg" alt="description"></a>. The image becomes clickable and acts as the link. Always include an alt attribute on the image so screen readers can describe what the link does.

What is the difference between href and src?

The href attribute is used in <a> tags to specify where a link goes. The src attribute is used in <img> tags to specify the location of an image file. They serve different purposes — href is for links, src is for embedding content.

How do I style a link with CSS?

Use CSS selectors like a { color: blue; } to change link colors, or a:hover { color: red; } to change the color when someone hovers over it. You can also remove the underline with text-decoration: none; or add a background color. CSS gives you full control over how links look.

Can I link to a PDF or other file types?

Yes. Use the href attribute with the filename just like you would for an HTML page: <a href="document.pdf">Download PDF</a>. When someone clicks it, the browser either opens the file or prompts them to download it, depending on their browser settings and the file type.

What does rel="noopener noreferrer" do?

This attribute improves security and privacy when you use target="_blank". It prevents the new page from accessing information about your site and stops certain types of attacks. Add it like this: <a href="https://example.com" target="_blank" rel="noopener noreferrer">Link</a>. It is a good practice for external links that open in new tabs.