The basic HTML tag that makes a link
A clickable link in HTML uses the anchor tag, written as <a>. The tag wraps around the text you want to be clickable, and an 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 — "Click here" in this example — is what the reader sees on the page. The href value is the destination URL, which stays hidden until someone clicks.
When you save this code and open it in a browser, "Click here" appears as blue underlined text. Clicking it takes the reader to example.com.
Key Takeaways
- Every link needs an opening <a> tag with an href attribute, the text you want clickable, and a closing </a> tag.
- The href value must be a complete URL starting with http:// or https://, or a relative path to another file on your own site.
- The text between the tags is what readers see and click — make it descriptive so they know where the link goes.
- Use target="_blank" inside the opening tag if you want the link to open in a new browser tab instead of replacing the current page.
Writing the href attribute correctly
The href attribute is where you put the destination. If you are linking to another website, use the full URL including the protocol: <a href="https://www.google.com">Search Google</a>. Always use https:// rather than http:// when the destination supports it — most modern sites do.
If you are linking to another page on your own website, you can use a relative path instead of a full URL. If you have a file called about.html in the same folder as your current page, write <a href="about.html">About Us</a>. If the file is in a subfolder called pages, write <a href="pages/about.html">About Us</a>.
A common mistake is forgetting the protocol. Writing <a href="google.com"> without https:// tells the browser to look for a file called google.com on your own server, not on the internet. The browser will fail to find it and show an error.
Making links open in a new tab
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, add target="_blank" to the opening tag: <a href="https://example.com" target="_blank">Visit Example</a>.
This is useful when you are linking to an external website and want the reader to stay on your page. Many sites use this for links to social media, news articles, or other resources that are not part of their own content.
A security best practice: when you use target="_blank", also add rel="noopener noreferrer" to the tag. Write it like this: <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>. This prevents the destination page from accessing certain information about your site.
Choosing link text that describes the destination
The text between the opening and closing tags should tell the reader where the link goes. "Click here" and "Read more" are vague — a reader scanning the page cannot tell what they will find. "Our privacy policy" and "read the user guide" are specific and useful.
Screen readers, which people with vision loss use to navigate the web, read link text aloud. If your link says "Click here", a screen reader user hears only that — they have no idea what the link does. Descriptive text helps everyone understand your page faster.
Compare these two: <a href="contact.html">Click here</a> versus <a href="contact.html">Contact our support team</a>. The second one tells the reader what to expect.
Linking to a specific section within a page
You can link directly to a heading or section on another page using an anchor. First, add an id attribute to the heading you want to link to: <h2 id="pricing">Pricing</h2>. Then link to it by adding a hash and the id to the URL: <a href="https://example.com#pricing">See our pricing</a>.
This works on the same page too. If you have a heading with id="faq" further down your page, you can write <a href="#faq">Jump to FAQ</a> at the top. Clicking it scrolls the reader down to that section when ready.
The id value must match exactly — if the heading has id="pricing", the link must say #pricing, not #Pricing or #price. Spaces in ids are usually replaced with hyphens, so a section called "Frequently Asked Questions" would have id="frequently-asked-questions".
Common mistakes to avoid
Forgetting the closing tag is the most frequent error. Every opening <a> needs a matching </a>, or the browser will not know where the link ends. If you forget it, everything after the opening tag becomes clickable until the browser encounters another closing tag.
Putting a URL in the wrong place also breaks links. The destination goes in the href attribute, not in the text: write <a href="https://example.com">Example</a>, not <a>https://example.com</a>. The second version makes the URL itself clickable but does not actually link anywhere.
Nesting links inside each other causes problems. You cannot write <a href="page1.html">Click <a href="page2.html">here</a></a>. Browsers do not know how to handle overlapping links, and the result is unpredictable. Each link must be separate and complete.
Testing your links in the browser
After you write a link in your HTML, save the file and open it in a browser to test it. The link should appear as blue underlined text (unless you have changed the styling with CSS). Hover your mouse over it — the cursor should change to a pointing hand, and the destination URL should appear in the bottom left corner of the browser window.
Click the link and verify that it takes you to the correct destination. If it does not work, check three things: the href value is spelled correctly, the URL includes https:// or http://, and the closing tag is present. If you are linking to a file on your own site, make sure the file path is correct and the file actually exists in that location.
If a link to an external site works in your browser but you want to verify it will work for others, try opening it in a different browser or on a different device. This catches issues that only show up in certain environments.
Frequently Asked Questions
Can I make an image clickable instead of text?
Yes. Put an <img> tag inside the anchor tag instead of text: <a href="page.html"><img src="image.jpg" alt="Description"></a>. The image becomes clickable and behaves exactly like a text link.
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 tags to specify which image file to display. They serve different purposes — href is for navigation, src is for embedding content.
Do I need to add anything to a link for search engines to find it?
No. Search engines read standard anchor tags automatically. You do not need special code for links to be indexed. Descriptive link text helps search engines understand what the destination page is about, so use clear text instead of "click here".
Can I link to a PDF or other file type?
Yes. Use the file path in the href just as you would for an HTML page: <a href="document.pdf">read PDF</a>. When someone clicks it, the browser either opens the file or prompts them to read it, depending on their browser settings.
How do I make a link open in the same tab but look different after someone clicks it?
That is handled by CSS, not HTML. HTML creates the link; CSS styles it. You can use the :visited pseudo-class in CSS to change the color of links the reader has already clicked. That is a browser feature, not something you control directly in the HTML tag.