The Basic HTML Tag for Links

A hyperlink is created with 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. Here is the simplest version:

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

When a browser displays this, the reader sees "Click here" as blue underlined text. Clicking it takes them to example.com. The href value must be a complete web address, starting with http:// or https://. Without the protocol, the browser will not know it is a web address.

Key Takeaways

  • Every hyperlink uses the <a> tag with an href attribute that contains the full web address, including https://
  • The text between the opening and closing <a> tags is what the reader sees and clicks on.
  • Links to pages on your own website can use relative paths like href="about.html" instead of the full address.
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.
  • Descriptive link text like "read our privacy policy" is better for both users and search engines than generic text like "click here".

Writing the Href Attribute Correctly

The href attribute is where you put the destination. It must be enclosed in quotes. If you are linking to a website on the internet, use the full address: https://www.wikipedia.org, not just wikipedia.org. The https:// part is required, even though browsers often hide it in the address bar.

If you are linking to a page on your own website, you have two choices. You can use the full address (https://yoursite.com/about.html), or you can use a relative path, which is shorter. A relative path describes where the file is compared to the current page. If both pages are in the same folder, you write just the filename: href="about.html". If the page is in a subfolder called "pages", you write href="pages/about.html".

Relative paths are useful during development because they keep working if you move your entire site to a different server. Full addresses are clearer and safer for links that point outside your site.

Choosing Text That Readers Will Click

The text between <a> and </a> is what appears on the page. This text should tell the reader what they will find if they click. "Read our privacy policy" is better than "click here" because it explains the destination. Someone scanning the page can understand what each link does without clicking.

Good link text also helps search engines understand your site. When Google indexes your pages, it reads the link text to figure out what the destination page is about. If many pages link to your privacy policy with the words "privacy policy", search engines learn that page is about privacy.

Keep link text concise — usually two to five words. Avoid repeating the same text for different destinations, and do not make entire paragraphs into links when only a few words need to be clickable.

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

This is useful when you are linking to another website and want the reader to stay on your page. It is less useful for links within your own site, because it creates extra tabs that clutter the browser.

When you use target="_blank", consider adding a note that tells the reader the link opens in a new tab. Some people find surprise new tabs frustrating. You can add this with text ("opens in a new tab") or with an icon next to the link.

Linking to Specific Sections Within a Page

You can link directly to a heading or section on a page using an anchor. First, give the section an id attribute:

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

Then link to it by adding a hash and the id name to the href:

<a href="https://www.example.com#pricing">See our pricing</a>

If you are linking to a section on the same page, you can use just the hash: href="#pricing". This is helpful for long pages with a table of contents at the top — readers can jump directly to the section they want without scrolling.

Common Mistakes to Avoid

The most common mistake is forgetting https:// in the href. If you write href="example.com", the browser treats it as a relative path and looks for a file called example.com on your server. The link will break.

Another mistake is putting the link text outside the <a> tag. The text must be between the opening <a href="..."> and the closing </a>. If you write <a href="..."> Click here </a>, the space before "Click" will not be clickable.

Do not use spaces or special characters in the href unless they are properly encoded. If you need to link to a page with spaces in the filename, replace each space with %20. Better yet, avoid spaces in filenames altogether and use hyphens instead: my-page.html instead of my page.html.

Testing Your Links

After you write a link, test it by clicking it in your browser. Make sure it goes to the right place. If you used a relative path, test the page from different locations — open it from a subfolder and from the root folder to make sure the path works everywhere.

Check that external links (links to other websites) still work after a few weeks. Websites move and pages disappear. A link that worked when you wrote it might be broken six months later. Some developers use link-checking tools to scan their site and report broken links automatically.

If a link is not working, open your browser's developer tools (usually F12 or right-click and select "Inspect") and look at the HTML. Verify that the href attribute has the correct address and that the tag is properly closed.

Frequently Asked Questions

Can I make an image into a link?

Yes. Put the <img> tag inside the <a> tag instead of text: <a href="https://example.com"><img src="image.jpg"></a>. When someone clicks the image, they go to the destination in the href. Make sure the image has an alt attribute describing it for accessibility.

What is the difference between http and https?

https is the secure version of http. It encrypts data sent between the browser and the server, which protects passwords and payment information. Always use https for links, especially to sites where people log in or enter sensitive data. Most websites now use https by default.

How do I link to an email address?

Use href="mailto:name@example.com". When someone clicks it, their email program opens with a new message addressed to that email. You can also add a subject line: href="mailto:name@example.com?subject=Hello". Replace spaces with %20.

Can I style a link with CSS?

Yes. Links are styled like any other element. You can change the color, remove the underline, add a background, or change the appearance when someone hovers over it. Use the a selector in CSS: a { color: blue; } or a:hover { color: red; } to style the link when the mouse is over it.

What does rel="nofollow" do?

Adding rel="nofollow" to a link tells search engines not to count it as a vote for the destination page. Use this for links you do not fully endorse, like user comments or sponsored content. It does not prevent the link from working — it just tells search engines to ignore it.