A hyperlink is created with the anchor tag and the href attribute

A hyperlink in HTML uses the anchor tag — written as <a> — paired with the href attribute, which tells the browser where to go when someone clicks. The basic structure is <a href="URL">link text</a>. The text between the opening and closing tags is what the reader sees and clicks on. The href value is the destination — a web address, a file path, or an email address.

When you write <a href="https://www.example.com">Visit Example</a>, the browser displays "Visit Example" as a clickable link. Clicking it takes the reader to https://www.example.com. The href can point to any URL on the internet, a page within your own site, a file to read, or even a specific section of the same page.

Key Takeaways

  • Every hyperlink needs an anchor tag with an href attribute: <a href="URL">text</a>.
  • The text between the opening and closing tags is what appears on the page and is clickable by the reader.
  • The href value can be a full web address, a relative path to another page on your site, or a file path for downloads.
  • Links to other websites should use the full URL starting with http:// or https://, while links within your own site can use shorter relative paths.
  • You can open a link in a new tab by adding the target="_blank" attribute to the anchor tag.

External links versus internal links

An external link points to a page on a different website. Use the complete URL, starting with http:// or https://. For example, <a href="https://www.wikipedia.org">Learn more on Wikipedia</a> sends the reader to Wikipedia's homepage.

An internal link points to another page on your own website. You can use a shorter path instead of the full URL. If you have a page called about.html in the same folder, write <a href="about.html">About Us</a>. If the page is in a subfolder called pages, write <a href="pages/about.html">About Us</a>. This approach is faster for the browser and keeps your code cleaner.

Opening links in a new tab or window

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 attribute with the value "_blank": <a href="https://www.example.com" target="_blank">Visit Example</a>.

This is useful when linking to external sites, so the reader can keep your page open while exploring elsewhere. Many sites use this for links to social media, news sources, or reference materials. However, avoid overusing it — readers expect most links to stay within the same tab unless told otherwise.

Linking to email addresses

To create a link that opens the reader's email client, use mailto: in the href: <a href="mailto:contact@example.com">Email us</a>. Clicking this link opens a new email message addressed to contact@example.com.

You can also add a subject line and body text. The syntax is <a href="mailto:contact@example.com?subject=Question&body=Hello">Email us</a>. Use & to separate multiple parameters. This is helpful for contact forms or feedback links, though many sites now use HTML forms instead because they give more control over the message.

Linking to a specific section on the same page

You can link to a specific heading or section within the same page using anchor fragments. First, give the target element 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 common on long pages with a table of contents at the top. Clicking "Jump to Pricing" scrolls the page down to the section with id="pricing". You can also link to a section on another page by combining the page path with the fragment: <a href="products.html#pricing">See pricing</a>.

Making links accessible and descriptive

Write link text that describes where the link goes, not just "click here" or "link". Instead of <a href="guide.pdf">click here</a>, write <a href="guide.pdf">read the beginner's guide</a>. This helps readers understand the destination before clicking and makes the page easier to scan.

Screen readers used by people with vision loss read link text aloud. Descriptive text tells them what the link does. If you must use vague text, add a title attribute for extra context: <a href="guide.pdf" title="read the beginner's guide PDF">Guide</a>. The title appears as a tooltip when someone hovers over the link on a desktop browser.

Common mistakes and how to fix them

The most frequent error is forgetting the href attribute entirely, writing <a>text</a> instead of <a href="URL">text</a>. Without href, the browser treats it as plain text, not a link.

Another mistake is using incorrect paths for internal links. If you write <a href="about.html"> but the file is actually in a subfolder, the link breaks. Check your folder structure and use the correct relative path. For external links, forgetting http:// or https:// causes the browser to treat the URL as a relative path, sending the reader to the wrong place.

Avoid styling links in ways that hide their clickability. Links should look different from regular text — typically blue and underlined by default. If you remove the underline or change the color to match the surrounding text, readers may not realize they can click.

Frequently Asked Questions

What's 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 into the page. Both point to a location, but they work differently — href creates a clickable link, while src embeds content directly.

Can I link to a PDF or other file types?

Yes. Use the file path in the href just like you would for an HTML page: <a href="document.pdf">read PDF</a>. The browser will either open the file or prompt the reader to read it, depending on their browser settings.

How do I make a link not clickable but still look like a link?

Use a span or div styled to look like a link, or use JavaScript to prevent the default link behavior. However, this confuses readers who expect links to work. If something should not be clickable, do not style it as a link.

What does the rel attribute do?

The rel attribute tells the browser the relationship between your page and the linked page. Common values are rel="nofollow" (tells search engines not to count this as a recommendation) and rel="noopener noreferrer" (adds security when opening external links in a new tab with target="_blank").

Can I use an image as a link?

Yes. Wrap an image tag inside an anchor tag: <a href="page.html"><img src="image.jpg" alt="description"></a>. Clicking the image takes the reader to the destination in the href.