The Basic Hyperlink Syntax

A hyperlink in HTML uses the anchor tag, written as <a>. The tag wraps around the text you want to click, and the href attribute tells the browser where to go when someone clicks it. The simplest hyperlink looks like this:

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

When a browser displays this, the text "Click here" appears as a clickable link, usually in blue and underlined. The href value is the destination — it can be a full web address, a page on your own site, or a file to download.

Key Takeaways

  • Every hyperlink starts with <a href="destination"> and ends with </a>, with the clickable text in between.
  • Use full web addresses like https://www.example.com for external sites, and relative paths like about.html for pages in your own folder.
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.
  • You can link to a specific section of a page using a hash symbol and an id, like href="#section2".
  • Anchor tags can wrap images, buttons, or any other HTML element, not just text.

External Links vs. Internal Links

An external link points to a website outside your own domain. Always use the full web address, starting with https:// or http://. For example: <a href="https://www.wikipedia.org">Wikipedia</a>. Without the protocol, the browser will treat it as a relative path and look for a folder called "www.wikipedia.org" on your own server.

An internal link points to another page on your own website. If your page and the target file are in the same folder, use just the filename: <a href="about.html">About Us</a>. If the target is in a subfolder, include the path: <a href="pages/contact.html">Contact</a>. If you need to go up one level, use ../: <a href="../index.html">Home</a>.

Opening Links in a New Tab

By default, clicking a link replaces the current page with the destination. To open the link in a new tab instead, add the target="_blank" attribute:

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

This is useful when you want the reader to stay on your page while also viewing the linked content. Many sites use this for external links so visitors do not leave accidentally. Note that target="_blank" has a security consideration: the new page can access some information about your page. To prevent this, add rel="noopener noreferrer" as well: <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Link</a>.

Linking to a Specific Section on a Page

You can link directly to a heading or section within a page using a fragment identifier — a hash symbol followed by an id. First, give the target element an id attribute. For example, if you have a heading like <h2 id="pricing">Pricing</h2>, you can link to it with <a href="#pricing">Jump to pricing</a>.

To link to a section on a different page, combine the page path with the fragment: <a href="services.html#faq">See our FAQ</a>. This works for external sites too, though you can only link to sections the other site has explicitly marked with id attributes. The id must be unique on the page — no two elements can have the same id.

Wrapping Images and Other Elements in Links

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

<a href="product.html"><img src="product.jpg" alt="Our product"></a>

You can also wrap buttons, divs, or any other HTML element. This is common in navigation menus where each menu item might be a link wrapping an icon and text together. Just remember that the entire wrapped element becomes clickable, so make sure the visual design makes that clear to the reader.

Email Links and Phone Numbers

To create a link that opens the user's email program, use mailto: in the href: <a href="mailto:contact@example.com">Email us</a>. You can also add a subject line: <a href="mailto:contact@example.com?subject=Question about pricing">Email us</a>.

For phone numbers, use tel:: <a href="tel:+1-555-123-4567">Call us</a>. On mobile devices, this opens the phone dialer. On desktop, it may do nothing unless the user has a calling app installed, so phone links work best on mobile-focused sites. Always include the country code (the plus sign and digits before the number) for international compatibility.

Common Mistakes to Avoid

The most frequent error is forgetting the https:// on external links. Without it, the browser treats the address as a relative path and looks for a folder on your server. Another mistake is using spaces or special characters in file names for internal links — stick to letters, numbers, hyphens, and underscores.

Do not use href="#" as a placeholder. This links to the top of the current page and can confuse users. If you are building a link that does not have a destination yet, leave it out of the HTML until you have a real target, or use JavaScript to handle the click separately. Also avoid linking the same text multiple times in a row — it makes the page harder to scan and can confuse screen readers.

Frequently Asked Questions

What is the difference between href and src?

The href attribute is used in anchor tags (<a>) and tells the browser where to navigate. The src attribute is used in image tags (<img>) and tells the browser where to load a file from. They serve different purposes and are not interchangeable.

Can I style a hyperlink with CSS?

Yes. You can change the color, remove the underline, add hover effects, and more using CSS selectors like a, a:hover, and a:visited. For example, a { color: green; text-decoration: none; } makes all links green without an underline. The :hover pseudo-class lets you style what happens when the mouse moves over the link.

How do I link to a PDF or downloadable file?

Use the same syntax as any other link: <a href="document.pdf">Download PDF</a>. The href points to the file path. Most browsers will open the PDF in a new tab, but some will download it directly depending on browser settings. If you want to force a download instead of opening in the browser, add the download attribute: <a href="document.pdf" download>Download PDF</a>.

What does rel="noopener noreferrer" do?

When you open a link in a new tab with target="_blank", the new page can access the window.opener object and potentially redirect your original page. Adding rel="noopener noreferrer" blocks this access. It is a security best practice for external links, especially if you do not control the destination site.