The anchor tag makes a clickable link

A link in HTML uses the anchor tag, written as <a>. The tag wraps around the text you want to be clickable, and the href attribute tells the browser where to send the reader 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 is what appears on the page. The href (which stands for "hypertext reference") is where the link goes.

When a reader clicks "Click here", their browser opens the URL in the href. That URL can point to another website, a page on your own site, a file to read, or even 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.
  • The href value can be a full web address like https://example.com, a relative path like about.html, or a special address like mailto:name@example.com.
  • You can make images, buttons, or any HTML element clickable by wrapping it in an anchor tag instead of just text.
  • The target="_blank" attribute opens the link in a new tab instead of replacing the current page.

Links to other websites

When you link to a website you do not own, use the full web address starting with https://. This is called an absolute URL. The browser needs the complete address to find the page.

Example: <a href="https://www.wikipedia.org">Visit Wikipedia</a>. When someone clicks "Visit Wikipedia", they leave your site and go to Wikipedia's home page.

If you want the link to open in a new tab instead of replacing the current page, add target="_blank": <a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>. This is useful when you are linking to a source you want readers to check without leaving your page.

Links to pages on your own site

When you link to another page on your own website, you do not need the full web address. Use a relative URL — just the filename or folder path. This makes your links work whether your site is on your computer, a test server, or a live 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 about.html is in a subfolder called pages, use <a href="pages/about.html">About Us</a>.

To link to a page in a parent folder, use ../: <a href="../index.html">Home</a>. Each ../ moves up one folder level. Relative links are easier to maintain because you can move your entire site to a different server and all the internal links still work.

Links to a specific section on a page

You can link directly to a heading or section on a page using an anchor — a named location within the HTML. First, add an id attribute to the heading or element you want to link to: <h2 id="contact">Contact Us</h2>.

Then link to that section by adding a hash and the id name to the URL: <a href="about.html#contact">Go to Contact</a>. If you are linking to a section on the same page, just use the hash: <a href="#contact">Jump to Contact</a>. When someone clicks the link, the browser scrolls to that section automatically.

Making images and buttons into links

You can wrap any HTML element in an anchor tag to make it clickable. To make an image a link, put the <img> tag inside the <a> tag: <a href="gallery.html"><img src="thumbnail.jpg" alt="Gallery"></a>. Now clicking the image goes to the gallery page.

The same works for buttons. Wrap a <button> tag in an anchor: <a href="signup.html"><button>Sign Up</button></a>. This creates a clickable button that navigates to another page. Some developers use CSS to style regular links to look like buttons instead, which gives more control over appearance.

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>. When someone clicks this link, their default email client opens with the address already filled in.

You can add a subject line and message body too: <a href="mailto:contact@example.com?subject=Question&body=Hello">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 does nothing unless the computer has a calling app installed.

Common mistakes to avoid

Forgetting the href attribute is the most common mistake. <a>Click here</a> without an href creates text that looks like a link but does not go anywhere. Always include href with a value.

Using spaces or special characters in filenames breaks relative links. If your file is named about page.html (with a space), the link <a href="about page.html"> will not work in most browsers. Use hyphens or underscores instead: about-page.html.

Forgetting the closing </a> tag leaves everything after the opening tag as a link, which breaks your layout. Always close the tag. If you are linking to a file that does not exist, the link will not produce an error — it just goes to a broken page. Test your links in the browser to make sure they work.

Frequently Asked Questions

What is the difference between href and src?

href is used in anchor tags to link to a page or resource. src is used in image and script tags to load a file directly into the page. href creates a clickable link; src embeds content.

Can I link to a PDF or read a file?

Yes. Use the filename 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 user to read it, depending on the file type and browser settings.

How do I open a link in a new window instead of a new tab?

You cannot reliably control whether a link opens in a new tab or new window — that is up to the browser and the user's settings. target="_blank" opens a new tab in modern browsers. Older code sometimes used target="_blank" onclick="window.open(...)", but this is outdated and often blocked by browsers.

What does the # symbol do in a URL?

The # symbol marks an anchor — a specific location on a page. https://example.com/about.html#contact goes to the about page and scrolls to the section with id="contact". The browser does not send the part after the # to the server.

Is it bad to use "Click here" as link text?

It is not forbidden, but descriptive text is better. "Click here" tells the reader nothing about where the link goes. "Learn about our pricing" or "read the guide" is clearer and helps with search engines and screen readers that read links out of context.