The Basic Link Tag

A link in HTML uses the <a> tag, which stands for "anchor". 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. Here is the simplest working example:

<a href="https://www.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 is the destination — it can be a full web address, a file on your own site, or an email address. The text between the opening <a> and closing </a> is what the reader sees and clicks on.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute and a closing </a> tag around the clickable text.
  • The href can point to a full web address (https://example.com), a page on your own site (about.html), or an email address (mailto:name@example.com).
  • The text between the tags is what readers see; the href is invisible and determines where the click goes.
  • Links to other websites should use the full address starting with https://, while links to your own pages can use just the filename.
  • The target attribute with value "_blank" opens the link in a new tab instead of replacing the current page.

Linking to External Websites

When you want to send readers to another website, use the full web address in the href, starting with https:// or http://. The browser needs the complete address to find the site.

<a href="https://www.wikipedia.org">Learn more on Wikipedia</a>

Without the https:// part, the browser treats it as a file on your own site and the link breaks. Always include the protocol (https:// or http://) when pointing outside your website. The text "Learn more on Wikipedia" is what appears clickable to the reader — you can use any text you want, as long as it makes sense for where the link goes.

Linking to Pages on Your Own Site

When you link to another page within your own website, you do not need the full web address. You can use just the filename or the relative path from your current page.

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

If the about.html file is in the same folder as the current page, this works. If it is in a subfolder called "pages", you would write:

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

This approach is faster than typing the full address and makes your site easier to move or test locally. The browser figures out the complete path based on where the current page is located.

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 attribute with the value "_blank":

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

The reader's current page stays open in their original tab, and the link destination opens in a new one. This is useful when linking to external sites so readers do not lose their place on your page. The underscore before "blank" is required — it is part of the HTML syntax.

Creating Email Links

You can create a link that opens the reader's email program and starts a new message. Use mailto: followed by the email address in the href:

<a href="mailto:contact@example.com">Send us an email</a>

When someone clicks this link, their default email program opens with a blank message addressed to contact@example.com. You can also add a subject line by including ?subject= after the email address:

<a href="mailto:contact@example.com?subject=Website Inquiry">Send us an email</a>

The subject line appears automatically in the email draft. This is useful for contact forms or feedback links where you want to direct messages to a specific inbox.

Linking to a Specific Section on a Page

You can link directly to a heading or section within a page using an id attribute and a hash symbol (#). First, add an id to the element you want to link to:

<h2 id="pricing">Pricing</h2>

Then create a link that points to that id:

<a href="#pricing">Jump to Pricing</a>

When someone clicks this link, the page scrolls to the heading with id="pricing". You can also link to a section on another page by combining the filename with the id:

<a href="services.html#pricing">See our pricing</a>

This is helpful for long pages where you want readers to jump directly to relevant content, or for table-of-contents links at the top of a page.

Common Mistakes and How to Fix Them

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

Another common mistake is using spaces or special characters in filenames. If your file is called "about page.html" (with a space), the link breaks. Use hyphens or underscores instead: "about-page.html" or "about_page.html". Browsers handle these correctly, but spaces cause problems.

Forgetting https:// on external links is also common. The browser interprets "www.example.com" as a local file path, not a website address. Always include the protocol when linking outside your site. If you are unsure whether a link works, test it in your browser before publishing the page.

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 behaves exactly like a text link.

What is the difference between href and src?

href is used in <a> tags to specify where a link goes. src is used in <img> tags to specify where an image file is located. They serve different purposes — href is for navigation, 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 the link. You can also remove the underline with text-decoration: none; if you want a custom appearance.

Can I link to a PDF or other file type?

Yes. Use the filename in the href just like you would for an HTML page: <a href="document.pdf">read PDF</a>. The browser either opens the file or prompts the reader to read it, depending on their settings.

What does the rel attribute do?

The rel attribute tells the browser the relationship between your page and the linked page. Common values are rel="noopener noreferrer" (used with target="_blank" for security) and rel="nofollow" (tells search engines not to count this as a vote for the linked site).