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 text or images, and the href attribute tells the browser where to go when someone clicks. The simplest link looks like this:

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

The text between the opening and closing tags is what appears on the page. The href value is the destination — a full web address, a file path, or an anchor point within the same page. When a visitor clicks the visible text, the browser navigates to that destination.

Key Takeaways

  • The anchor tag <a> with an href attribute creates a clickable link, and the text between the tags is what visitors see.
  • External links use the full web address starting with http:// or https://, while internal links use relative paths like /pages/about.html.
  • The target="_blank" attribute opens a link in a new browser tab instead of replacing the current page.
  • Links can wrap images, buttons, or other HTML elements, not just text.
  • Anchor links with the # symbol let you jump to a specific section within the same page or another page.

External links versus internal links

An external link points to a website outside your own domain. It must include the full web address, starting with http:// or https://. For example:

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

An internal link points to another page on your own website. You can use a relative path, which is shorter and easier to maintain if you move your site. For example, if you have a file called about.html in a folder called pages, the link would be:

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

Relative paths start with a forward slash if they point from the root of your site, or with no slash if they point to a file in the same folder. Using relative paths means your links still work if you move your entire site to a different server.

Opening links in a new tab with target="_blank"

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

<a href="https://example.com" target="_blank">Open in new tab</a>

This is useful when linking to external sites, so visitors do not lose their place on your page. However, use it sparingly — many users expect links to behave predictably, and opening new tabs without warning can feel intrusive. Reserve target="_blank" for links that truly benefit from opening separately, like downloadable files or reference material.

Linking to images and other elements

Links do not have to wrap text. You can wrap an image to make it clickable:

<a href="/gallery.html"><img src="thumbnail.jpg" alt="Gallery"></a>

You can also wrap buttons, divs, or other HTML elements. The entire element becomes clickable. This is common in navigation menus, where a link wraps a button or icon. Just remember that wrapping certain elements — like form inputs or other interactive elements — can cause unexpected behavior, so test your links in a browser after you create them.

Anchor links that jump to sections on the same page

An anchor link jumps to a specific section within a page using the # symbol. First, give the target section an id attribute:

<h2 id="contact">Contact Us</h2>

Then create a link that points to that id:

<a href="#contact">Jump to Contact</a>

When someone clicks the link, the page scrolls to the section with id="contact". You can also link to an anchor on another page by combining the file path and the anchor:

<a href="/pages/about.html#team">See our team</a>

This is useful for long pages with multiple sections, or for linking to a specific part of another page without forcing the visitor to scroll.

Common link attributes and best practices

Beyond href and target, several other attributes control how links behave. The title attribute adds a tooltip that appears when someone hovers over the link:

<a href="https://example.com" title="Visit our partner site">Partner</a>

The rel attribute tells search engines about the relationship between pages. Use rel="nofollow" for links you do not endorse, like user-generated content or paid links:

<a href="https://example.com" rel="nofollow">External site</a>

Always make link text descriptive. Instead of "Click here", use text that explains where the link goes, like "Read our privacy policy" or "Download the PDF". This helps both visitors and search engines understand your page structure. Avoid opening external links in new tabs by default — let users decide whether they want a new tab. Use target="_blank" only when there is a clear reason.

Frequently Asked Questions

What is the difference between href and src?

href is used in anchor tags to link to another page or resource. src is used in image and script tags to load a file. They serve different purposes: href navigates, while src embeds or loads content into the current page.

Can I style a link with CSS?

Yes. Links have built-in styles by default — usually blue and underlined — but you can change them with CSS. You can style the link itself, or use pseudo-classes like :hover to change appearance when someone hovers over it, or :visited to style links the user has already clicked.

How do I link to an email address?

Use the mailto: protocol in the href attribute: <a href="mailto:contact@example.com">Email us</a>. When clicked, this opens the user's default email client with the address pre-filled. You can also add a subject line: <a href="mailto:contact@example.com?subject=Hello">Email us</a>.

What does rel="noopener noreferrer" do?

When you use target="_blank", add rel="noopener noreferrer" for security. This prevents the new page from accessing the window object of the original page, which protects your visitors' privacy and security. Use it whenever you open external links in a new tab.