How to Add a Link in HTML
To add a link in HTML, wrap the clickable text in an <a> tag and put the address in its href attribute: <a href="https://example.com">Visit Example</a>. To open the link in a new tab, add target="_blank". The same tag links to other pages, sections, email addresses and phone numbers.
Last updated: October 4, 2026
Quick answer
Step 1: Create a basic link
A link has two parts: the address it goes to and the text people click.
- Type
<a href="">and put the address between the quotes. - After it, write the link text: the words people will see and click.
- Close it with
</a>.
Links can sit inside a sentence, like this link to our tutorials, or stand on their own. Edit the example: change an address or a link text.
Step 2: Absolute vs relative addresses
The href can be a full address or a short path relative to the current page:
| Link to | href |
|---|---|
| Another website | https://example.com/page/ (absolute: always include https://) |
| A page in the same folder | about.html |
| A page in a subfolder | blog/first-post.html |
| A page one folder up | ../index.html |
| From the root of your site | /contact/ (on a web server) |
| A section on the same page | #faq |
Use relative or root paths for your own pages, so links keep working if you move the site to another domain. Always write the https:// for other websites: href="example.com" without it is treated as a file in your own folder.
Step 3: Open a link in a new tab
Add target="_blank" to open the link in a new browser tab. Browsers now automatically protect against the page you open being able to control yours, but adding rel="noopener" is still a good habit, and some older browsers need it.
Use new tabs sparingly. Opening a new tab takes control away from the visitor (they can always choose it themselves with a middle-click or long-press), and it can confuse screen reader and mobile users. Good reasons: links that would interrupt a task, such as a help page linked from a half-filled form, or a PDF. When you do use it, say so in the link text or with an icon, for example “(opens in a new tab)”.
Step 4: Link to a section on the same page
To jump to a specific part of a page, such as a table of contents does:
- Give the target element an
id:<h2 id="pricing">Pricing</h2>. - Link to it with a
#and the id:<a href="#pricing">See pricing</a>. - To link to a section on another page, add the id after its address:
href="/plans/#pricing".
Add html { scroll-behavior: smooth; } in CSS for a smooth scrolling animation instead of a jump.
Step 5: Email, phone and download links
- Email:
<a href="mailto:hello@example.com">Email us</a>opens the visitor’s email app with a new message. Add a subject with?subject=Hello. - Phone:
<a href="tel:+15551234567">Call us</a>starts a call on phones. Write the number in international format, without spaces. - Download: add the
downloadattribute to make the browser save the file instead of opening it:<a href="guide.pdf" download>Download the guide</a>. It only works for files on your own site.
Email addresses in links can be collected by spam bots. A contact form (see how to make a contact form that sends emails) avoids publishing the address at all.
Step 6: Make an image or button-style link
Anything inline can go inside <a>. Put an <img> inside it for a clickable image (its alt text becomes the link text, so describe the destination). Give the link a class and some padding to make it look like a button. It’s still a link, which is right for anything that goes to another page.
Style links with CSS
Links have four states you can style, and the order of the rules matters (remember “LoVe HAte”): a:link (not yet visited), a:visited, a:hover (mouse over it) and a:active (being clicked). Add a:focus-visible for keyboard users. Keep links recognisable: a different color and an underline (or another visual cue besides color) inside paragraphs, because some people can’t tell colors apart.
Make links accessible
- Write link text that makes sense on its own. Screen readers can list every link on a page, so “Read more” five times tells nobody anything. “Read more about pricing” does.
- Keep the focus outline. Keyboard users press Tab to move from link to link and rely on the outline to see where they are. Restyle it with
:focus-visibleinstead of removing it. - Add a “skip to content” link as the very first link on the page (
<a href="#main" class="skip-link">Skip to content</a>), visually hidden until focused. Keyboard users can then jump past the menu on every page. - Warn about surprises. Say when a link opens a new tab or downloads a file, for example “Annual report (PDF, 2 MB)”.
Useful <a> attributes
| Attribute | What it does |
|---|---|
href | The destination (required for a real link) |
target="_blank" | Opens in a new tab or window |
rel="noopener" | Stops the new page from controlling yours |
rel="nofollow" / "sponsored" | Tells search engines not to pass ranking credit (use sponsored for paid or affiliate links) |
download | Downloads the file instead of opening it |
title | Tooltip text; don’t rely on it for important information |
Common link mistakes
- “Click here” as link text. Screen reader users often browse a list of links, and search engines use link text too. Describe the destination: “read the pricing guide”.
- Forgetting
https://.href="google.com"looks for a file named google.com on your own site. - Links that look like normal text. Give links a distinct color and an underline or other cue.
- Opening every link in a new tab. Let visitors decide; use
target="_blank"only when there’s a good reason, and say so. - Using a link as a button.
<a href="#">that only runs JavaScript should be a<button>. - Broken links. Check your links after moving or renaming pages; a 404 page frustrates visitors and wastes search engine visits.