The basic HTML tag for creating a link

A link in HTML uses the anchor tag, written as <a>. The tag wraps around the text or image you want to be clickable, and the href attribute tells the browser where to send the user when they click.

The simplest link looks like this: <a href="https://example.com">Click here</a>. The text between the opening and closing tags — "Click here" in this case — is what appears on the page. The href value is the destination URL. When someone clicks the text, their browser navigates to that URL.

You can link to external websites, pages within your own site, email addresses, or files for read. The anchor tag is the only way to create a clickable link in HTML.

Key Takeaways

  • The anchor tag <a href="URL">text</a> wraps around text or images to make them clickable.
  • The href attribute holds the destination — a full web address, a relative path, an email, or a file.
  • Link text should describe where the link goes or what happens when clicked, not just say "click here".
  • You can open links in a new tab using target="_blank", which is useful for external sites.
  • Images become clickable by wrapping the <img> tag inside an anchor tag instead of wrapping text.

Linking to external websites

To link to another website, use the full URL in the href attribute, starting with https://. For example: <a href="https://www.mozilla.org">Mozilla</a> creates a link with the text "Mozilla" that points to Mozilla's website.

By default, clicking a link replaces the current page with the destination. If you want the link to open in a new browser tab instead — which is common for external sites — add target="_blank": <a href="https://www.mozilla.org" target="_blank">Mozilla</a>. This keeps your page open in the original tab while the new site loads in a fresh one.

Linking to pages within your own website

When linking to another page on your own site, you do not need the full URL. Instead, use a relative path — just the file name or folder structure relative to the current page.

If you have a page called about.html in the same folder as your current page, link to it with <a href="about.html">About Us</a>. If the page is in a subfolder called pages, use <a href="pages/about.html">About Us</a>. To go up one level to the parent folder, use <a href="../index.html">Home</a>. Relative paths are shorter and make your site easier to move or test locally.

Making images clickable

To turn an image into a link, wrap the <img> tag inside an anchor tag. The image itself becomes the clickable element:

<a href="https://example.com"><img src="logo.png" alt="Company Logo"></a>

When someone clicks the image, they navigate to the URL in the href. This is commonly used for logo links that take you to the home page, or for thumbnail images that open a larger version or a product page. The alt text on the image still matters for accessibility — screen readers will announce it to users who cannot see the image.

Linking to email addresses and phone numbers

You can create a link that opens the user's email client by using mailto: in the href: <a href="mailto:contact@example.com">Email us</a>. Clicking this link opens a new message window with the address already filled in.

Similarly, you can link to a phone number using tel:: <a href="tel:+1-555-123-4567">Call us</a>. On mobile devices, this typically opens the phone dialer with the number ready to call. On desktop, the behavior depends on what software the user has installed.

Linking to a specific section of a page

You can link directly to a heading or section within a page using an anchor — a named location on the page. First, give the section an id attribute: <h2 id="pricing">Pricing</h2>. Then link to it with a hash symbol: <a href="#pricing">Jump to Pricing</a>.

This is useful for long pages where you want to let users jump to a specific section without scrolling. You can also link to a section on another page: <a href="page.html#pricing">See pricing</a> takes the user to page.html and scrolls to the element with id="pricing".

Writing link text that makes sense

The text inside the anchor tag should describe where the link goes or what happens when clicked. "Click here" or "Read more" tells the user nothing until they hover over it. Instead, write something specific: <a href="pricing.html">View our pricing plans</a> or <a href="guide.pdf">read the user guide</a>.

This matters for two reasons. First, users scanning a page can understand links without reading surrounding text. Second, people using screen readers often navigate by jumping from link to link, so meaningful link text is essential for accessibility. Avoid generic phrases and describe the actual destination or action.

Frequently Asked Questions

What is the difference between href and src?

href is used in anchor tags to specify where a link goes. src is used in image and script tags to specify where a file is located. They serve different purposes: href creates navigation, while src loads content into the page.

Do I need https:// for external links?

Yes, external links should include the full URL with https:// (or http:// for older sites). Without it, the browser treats it as a relative path and looks for the address as a file on your own server, which will fail.

Can I style a link with CSS?

Yes. Links are styled like any other element using CSS selectors. You can change color, remove the underline, add hover effects, and more. Common selectors are a for all links, a:hover for when the mouse is over it, and a:visited for links the user has already clicked.

What does target="_blank" do?

It opens the link in a new browser tab instead of replacing the current page. This is useful for external links so users do not lose their place on your site. Use it sparingly — opening new tabs without warning can frustrate users.

How do I link to a PDF or downloadable file?

Use the same anchor tag with the file path in href: <a href="document.pdf">read PDF</a>. When clicked, the browser either downloads the file or opens it, depending on the file type and browser settings. Make the link text clear that it is a read.