The basic way to make a link

To make text clickable, you wrap it in an HTML tag that tells the browser where to send the reader. The tag is <a>, and it looks like this:

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

The word "href" means "hypertext reference" — it holds the web address. Everything between the opening <a> and closing </a> is what the reader sees and clicks. So in that example, the reader sees "Click here" in blue underlined text, and clicking it takes them to example.com.

The address in href must be complete. If you are linking to another page on your own site, you can use a shorter path like href="about.html" or href="/blog/my-post.html". If you are linking to someone else's website, use the full address starting with https://.

Key Takeaways

  • Every link needs an opening <a> tag with an href attribute containing the web address, and a closing </a> tag around the text you want to be clickable.
  • The text between the tags is what readers see; the href is where they go when they click it.
  • Links to other websites need the full address starting with https://; links within your own site can use shorter paths like /about.html.
  • You can make images clickable by putting an <img> tag inside the <a> tag instead of text.
  • The title attribute adds hover text that appears when someone holds their cursor over the link, which helps with accessibility and clarity.

Making images clickable

An image becomes a link the same way text does — you wrap it in an <a> tag. Instead of text between the tags, you put an <img> tag:

<a href="https://example.com"><img src="button.jpg" alt="Go to example"></a>

The image itself becomes the clickable area. Browsers usually add a border around linked images to show they are clickable, though you can remove that with CSS if you want. Make sure your alt text describes where the link goes, not just what the image looks like — "Go to our contact page" is better than "blue button".

Adding hover text with the title attribute

The title attribute adds text that appears when someone holds their cursor over a link. It is useful for explaining where the link goes or why they might want to click it:

<a href="https://example.com" title="Visit our homepage">Click here</a>

The title text appears in a small box after a short delay. This is especially helpful for links that are not obvious — for example, a link that says "FAQ" might have title="Frequently asked questions about shipping" to clarify what readers will find. Screen readers also announce the title text, so it helps people using accessibility tools.

Opening links in a new tab

By default, clicking a link replaces the current page. If you want the link to open in a new tab instead, add the target attribute:

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

Use target="_blank" when you are linking to another website and want readers to stay on your page. Do not use it for links within your own site — readers expect those to replace the current page. If you do use target="_blank", consider adding title text that says "opens in a new tab" so people know what will happen.

Linking to a specific part of a page

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

<h2 id="shipping-info">Shipping Information</h2>

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

<a href="https://example.com/faq#shipping-info">See our shipping info</a>

If you are linking to an anchor on the same page, you can use just the hash: href="#shipping-info". This is useful for long pages with a table of contents at the top — each item in the contents can jump to its section.

Common mistakes that break links

The most frequent problem is a missing or wrong web address. If you copy a URL from the browser address bar, make sure you include https:// at the start. If the link goes nowhere, check that the href matches the actual address exactly — capitalization, spelling, and punctuation all matter.

Another common mistake is forgetting the closing </a> tag. When you do, everything after the opening tag becomes clickable, which is usually not what you want. A quick way to check: if you see blue underlined text that should not be a link, you probably have an unclosed tag somewhere above it.

If you are linking to a file on your own site, make sure the path is correct. A path like href="documents/report.pdf" looks for a folder called documents in the same folder as the current page. If the file is in a different location, the link will break. Use href="/documents/report.pdf" (with a slash at the start) to link from the root of your site, or href="../documents/report.pdf" (with ../) to go up one folder level.

Frequently Asked Questions

Can I make a link that sends an email?

Yes, use href="mailto:name@example.com". When someone clicks it, their email program opens with that address already filled in. You can also add a subject line: href="mailto:name@example.com?subject=Hello". This is useful for contact links, but do not use it for important messages — not everyone has email set up in their browser.

What is the difference between href and src?

href is for links — it tells the browser where to go when clicked. src is for images and other embedded content — it tells the browser what file to load and display on the page. Links use <a href>; images use <img src>.

Do I need to use https or can I use http?

Always use https if the website supports it — it means the connection is encrypted and find. Most websites now require https. If you use http and the site redirects to https, the link still works, but it is slower. Check the address bar of the site you are linking to and use whatever it shows.

How do I know if a link is working?

Click it yourself in a browser. If it goes to the right place, it works. You can also use online link checkers that scan your page and report broken links, but the simplest test is to click every link on your page before you publish it.