How to Create a Link in HTML

The basic HTML link uses the anchor tag with an href attribute

A link in HTML is created with the <a> tag, short for "anchor". The tag wraps the text you want to be clickable, and the href attribute tells the browser where to send the reader when they click it. The simplest link looks like this:

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

When a browser displays this, the reader sees "Click here" as blue underlined text. When they click it, the browser navigates to https://example.com. The href can point to another website, a page on your own site, a file to download, or an email address.

Key Takeaways

Every link needs an opening <a> tag with an href attribute and a closing </a> tag around the clickable text.
Links to other websites must include the full web address starting with http:// or https://.
Links to pages on your own site can use just the filename or folder path, like href="about.html" or href="pages/contact.html".
You can link to a specific part of a page using a hash symbol and an anchor name, like href="#section2".
Email links use href="mailto:name@example.com" and will open the reader's default email program.

Links to external websites

When you link to a website you do not own, always include the full web address in the href. Start with https:// (the secure version) or http://. Without it, the browser will treat the text as a relative path on your own site and the link will break.

This works:

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

This breaks:

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

The second example will look for a folder called "www.wikipedia.org" on your own server instead of going to the actual website.

Links to pages on your own site

For pages within your own website, you can use a relative path instead of the full web address. This is shorter and means your links will still work if you move your entire site to a different domain.

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 file is in a subfolder called "pages", use a forward slash:

<a href="pages/contact.html">Contact</a>

If you need to go up one level to a parent folder, use two dots and a forward slash:

Linking to a specific section within a page

You can link directly to a specific part of a page using an anchor. First, give the section an id attribute:

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

Then link to it using a hash symbol followed by the id name:

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

You can also link to a section on another page by combining the filename with the anchor:

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

This is useful for creating a table of contents at the top of a long page, or for linking from one page to a specific section on another.

Email links and phone numbers

To create a link that opens the reader's email program, use mailto: in the href:

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

You can also add a subject line that will appear in the new email:

<a href="mailto:contact@example.com?subject=Question about your service">Email us</a>

For phone numbers, use tel: followed by the number. This is especially useful on mobile devices, where clicking it will open the phone dialer:

Opening links in a new tab or window

By default, a link opens in the same tab or window. To open it in a new tab instead, add the target="_blank" attribute:

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

This is useful when you link to external sites and want the reader to stay on your page. However, use it sparingly — many readers find it annoying when links open unexpectedly in new tabs.

Common mistakes to avoid

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

Another common mistake is mixing up the href attribute with other attributes. The href is what makes the link work — it is the only required attribute on an anchor tag. Other attributes like target, title, and class are optional and add extra behavior or styling.

Broken links happen when the path or filename is wrong. If you link to "about.html" but the file is actually named "aboutus.html", the link will break. File names are case-sensitive on most web servers, so "About.html" and "about.html" are different files.

Frequently Asked Questions

Can I put an image inside a link tag?

Yes. Put the <img> tag inside the <a> tag instead of text: <a href="home.html"><img src="logo.png"></a>. When the reader clicks the image, they will navigate to the href. This is how clickable logos usually work.

What is the difference between href and src?

href is used in anchor tags (<a>) to link to another page or resource. src is used in image tags (<img>) and script tags (<script>) to load a file. They serve different purposes and are not interchangeable.

How do I make a link look different from the default blue and underlined?

Use CSS to style links. In your stylesheet, target the <a> tag and change the color, text-decoration, or other properties. You can also use the :hover selector to change how a link looks when the reader hovers over it with their mouse.

Can I link to a PDF or other file type?

Yes. Use the full filename in the href, just as you would for an HTML page: <a href="document.pdf">Download PDF</a>. Most browsers will open the file in a new tab or prompt the reader to download it, depending on their settings.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.