What a link is and why you need the right syntax
A link in HTML is created with the anchor tag, written as <a>. The tag tells a browser "this text or image is clickable, and when someone clicks it, go to this address." Without the anchor tag, text is just text — a browser won't know it should be clickable.
The most important part of a link is the href attribute, which holds the web address you want the link to point to. The href goes inside the opening anchor tag, before the text that will appear clickable on the page. If you forget the href, or write it incorrectly, the link won't work — the browser will render the text but clicking it will do nothing.
Links are one of the oldest and most fundamental parts of the web. Every page you visit is connected to other pages through links. Learning to write them correctly means your pages can connect to other content, and other pages can link to yours.
Key Takeaways
- A basic link uses the anchor tag with an href attribute: <a href="https://example.com">Click here</a>
- The href can point to a full web address, a page on your own site, or an email address using mailto:
- The text between the opening and closing anchor tags is what appears clickable to the reader.
- Links to pages on your own site should use relative paths like href="about.html" rather than full web addresses.
- You can open a link in a new tab by adding target="_blank" to the anchor tag.
The basic link structure and what each part does
Every link has three main parts: the opening tag, the clickable text, and the closing tag. Here is the simplest possible link:
<a href="https://example.com">Click here</a>
Breaking this down: <a opens the anchor tag. href="https://example.com" is the attribute that holds the web address. The text Click here is what the reader sees on the page — this is the part they actually click. </a> closes the tag and tells the browser the link is finished.
When you write this in an HTML file and open it in a browser, the words "Click here" will appear in blue and underlined (the default link styling). Clicking those words will take the reader to https://example.com. If you want the clickable text to say something different — like "Visit our homepage" or "Read more" — change the text between the tags, but leave the href and the tag structure exactly the same.
Links to pages on your own website
When you link to another page on your own site, you do not need to write out the full web address. Instead, use a relative path — just the filename or folder structure relative to the current page.
If you have a file called about.html in the same folder as your current page, the link looks like this:
<a href="about.html">About Us</a>
If the about.html file is in a subfolder called pages, the link becomes:
<a href="pages/about.html">About Us</a>
Relative paths are shorter to write and they keep working even if you move your entire site to a different web address. If you had written the full address instead, you would have to update every single link when you moved the site. Relative paths handle that automatically.
Email links and links that open in a new tab
To create a link that opens someone's email program and starts a new message, use mailto: instead of https://:
<a href="mailto:contact@example.com">Email us</a>
When a reader clicks this link, their default email program opens with a new message addressed to contact@example.com. You can also add a subject line by including ?subject= after the email address:
<a href="mailto:contact@example.com?subject=Question about pricing">Email us</a>
To make any link open in a new browser tab instead of replacing the current page, add the target="_blank" attribute:
<a href="https://example.com" target="_blank">Visit example.com</a>
This is useful when you link to external sites and want readers to stay on your page. Use it sparingly — opening new tabs without warning can feel jarring to readers who expect a link to replace the current page.
Common mistakes that break links
The most frequent error is forgetting the href attribute entirely. A tag like <a>Click here</a> with no href will display the text but it will not be clickable. The browser has no address to send the reader to.
The second common mistake is mistyping the web address. If you write href="htps://example.com" (missing the second "t" in "https"), the link will appear clickable but clicking it will fail or go to the wrong place. Always double-check the full address, especially if you are copying it from somewhere else.
A third mistake is using backslashes instead of forward slashes in relative paths. Windows uses backslashes in file paths, but HTML always uses forward slashes. Write href="pages/about.html", never href="pages\about.html".
Finally, make sure your closing tag is actually there. If you write <a href="example.com">Click here and forget the </a>, the browser will treat everything after the opening tag as part of the link, which breaks the rest of your page layout.
Making links accessible and clear to readers
The text you put inside the anchor tag should tell readers where the link goes. Avoid vague phrases like "Click here" or "Read more" when you can be specific. Instead of "Click here for our pricing page," write "View our pricing." Instead of "Read more," write "Learn how our service works."
Screen readers (tools that read web pages aloud for people with vision loss) read only the link text, not the surrounding paragraph. If your link text is vague, someone using a screen reader will hear "Click here" with no context. Specific link text works for everyone.
You can also add a title attribute to provide extra information that appears when someone hovers over the link with their mouse:
<a href="pricing.html" title="See our current rates and plans">View pricing</a>
The title attribute is optional, but it is useful for links where the text alone might not be clear enough.
Linking to a specific section within a page
You can link directly to a specific heading or section on a page using an anchor — a marker placed on the target element. First, add an id attribute to the heading or section you want to link to:
<h2 id="pricing">Our Pricing</h2>
Then, in your link, use a hash symbol followed by that id:
<a href="pricing.html#pricing">Jump to pricing</a>
If you are linking to a section on the same page, you can skip the filename:
<a href="#pricing">Jump to pricing</a>
This is useful for long pages where you want to let readers jump directly to the section they care about. The id you choose can be any name you want, but it should be lowercase, use hyphens instead of spaces, and be descriptive enough that you remember what it refers to.
Frequently Asked Questions
What is the difference between href and src?
The href attribute is used in anchor tags to link to another page or resource. The src attribute is used in image tags and script tags to load a file directly into the page. You use href when you want the reader to click and navigate somewhere. You use src when you want to embed content (like an image) into the page itself.
Can I link to a PDF or a downloadable file?
Yes. Use the href attribute exactly as you would for a web page: <a href="document.pdf">Download our guide</a>. When someone clicks the link, the browser will either open the PDF in a new tab or prompt them to save it, depending on their browser settings. For files on your own site, use a relative path. For files hosted elsewhere, use the full web address.
Why does my link not work even though I wrote it correctly?
The most common reason is that the file or web address does not exist or is spelled differently than you typed it. Check that the filename matches exactly (including capitalization on some servers), and that the web address is complete and correct. If you are linking to a page on your own site, make sure the file is actually in the folder you specified.
Should I use target="_blank" for all external links?
No. Use it only when there is a good reason to keep your page open in the background — for example, if the link is to a reference or tool the reader might want to check while staying on your page. For most external links, let the reader decide whether to open a new tab. Many readers expect a link to replace the current page and find new tabs annoying.
Can I make an image into a link?
Yes. Put the image tag inside the anchor tag: <a href="about.html"><img src="image.jpg" alt="About us"></a>. When someone clicks the image, they will be taken to the page specified in the href. Always include an alt attribute on the image so screen readers know what the image is.