Links are what make the web a web. The <a> element (short for anchor) turns text, or even an image, into something clickable that takes the visitor somewhere else.
Links connect your pages to each other and to the rest of the internet. They also guide search engines: crawlers discover new pages by following links, and the words inside a link tell them what the destination page is about.
In this lesson you'll learn how to write a link, how relative and absolute addresses differ, and how to make links that open email, start a phone call or jump to a section of the same page.
The parts of an HTML link
<a href="https://www.wikipedia.org">Visit Wikipedia</a>hrefis the destination, also called the URL.- The content between the tags is the link text, the part people click.
Write link text that makes sense on its own. "Download the menu (PDF)" is much more useful than "click here", both for visitors scanning the page and for screen-reader users who often browse a list of links without the surrounding sentences.
Absolute and relative URLs
- An absolute URL includes everything, starting with
https://, for examplehttps://www.example.com/about. Use it when linking to other websites. - A relative URL is a path from the current page, such as
about.html,images/cat.jpgor/contact. Use it for pages on your own site.
| href | Goes to |
|---|---|
contact.html | contact.html in the same folder |
blog/post.html | post.html inside the blog folder |
../index.html | index.html one folder up |
/pricing | /pricing from the root of the site |
Relative links keep working when you move your site to a new domain, which is one reason developers prefer them for internal pages.
Special kinds of links
- New tab: add
target="_blank". Use it sparingly, for example on an external link in the middle of a form the visitor shouldn't lose. - Jump to a section: give an element an
id, then link to#that-id. - Email:
href="mailto:hi@example.com"opens the visitor's email app. - Phone:
href="tel:+441234567890"starts a call on phones. - Download: the
downloadattribute asks the browser to save the file instead of opening it.
Links or buttons?
Links and buttons can look the same once styled, but they do different jobs:
- Use a link (
<a href>) when clicking takes the visitor to another page or another place on the same page. - Use a button (
<button>) when clicking performs an action on the current page, such as opening a menu, submitting a form or adding an item to a basket.
Choosing the right one matters for keyboard users and screen readers, which treat the two elements differently.
HTML Links Syntax
Link syntax
<a href="URL">link text</a>
<a href="URL" target="_blank" rel="noopener">opens in new tab</a>
<a href="#section-id">jump to section</a>HTML Links Summary
- The
<a>element creates a link, and itshrefattribute sets the destination. - Write link text that describes where the link goes.
- Use absolute URLs for other websites and relative URLs for your own pages.
#id,mailto:andtel:links jump to sections, open email and start calls.- Use links to go somewhere and buttons to do something.
HTML Links Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Different types of links
Click them in the result. (Navigation is disabled in previews, so the console tells you where each link would go.)
<h2>Useful links</h2>
<p><a href="https://developer.mozilla.org">MDN Web Docs</a>: the web's reference manual.</p>
<p><a href="https://www.w3.org" target="_blank" rel="noopener">W3C</a> opens in a new tab.</p>
<p>Questions? <a href="mailto:help@sproutbakery.com">Email the bakery</a>.</p>
<p>Call us: <a href="tel:+441179460000">0117 946 0000</a></p>Line-by-line explanation
- Line 2A normal absolute link.
- Line 3
target="_blank"opens a new tab;rel="noopener"is a safety habit. - Line 4
mailto:opens an email app with the address filled in. - Line 5
tel:lets phone users tap to call.
Jump links (table of contents)
Click "Toppings" in the result and the page jumps to that section.
<nav>
<a href="#dough">Dough</a> ·
<a href="#sauce">Sauce</a> ·
<a href="#toppings">Toppings</a>
</nav>
<h2 id="dough">Dough</h2>
<p>Flour, water, yeast, salt. Rest it overnight.</p>
<p style="height: 300px">(lots of dough wisdom…)</p>
<h2 id="sauce">Sauce</h2>
<p>Crushed tomatoes, garlic and basil.</p>
<p style="height: 300px">(sauce secrets…)</p>
<h2 id="toppings">Toppings</h2>
<p>Mozzarella. Always mozzarella.</p>Line-by-line explanation
- Lines 2 to 4Each link points to an
idwith a#in front. - Line 7
id="dough"is the target forhref="#dough". - Line 9Extra height so you can see the page actually jump.
An image as a link
Anything can go inside <a>, including an image.
<a href="https://www.nasa.gov">
<img src="https://picsum.photos/id/1043/240/140" alt="NASA website" width="240" height="140">
</a>Line-by-line explanation
- Lines 1 to 3The whole image is clickable. Its
alttext becomes the link's name for screen readers, so describe where it goes.
Common HTML Links Mistakes
Vague link text
<p>To see our menu, <a href="menu.pdf">click here</a>.</p><p>See our <a href="menu.pdf">lunch menu (PDF)</a>.</p>Screen-reader users often browse a list of links. Ten links all saying "click here" are useless. Descriptive text also helps SEO.
Forgetting https:// for other websites
<a href="www.example.com">Example</a><a href="https://www.example.com">Example</a>Without https://, the browser thinks www.example.com is a file in your own folder.
HTML Links in Real Projects
Internal links build your site
Navigation menus, "related articles", breadcrumbs and footers are all just lists of links. Search engines discover your pages by following links, so linking related pages together (like the "Related topics" at the bottom of this lesson) helps people and Google find everything.
HTML Links Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Make a link to https://www.bbc.co.uk that opens in a new tab.
<a ="https://www.bbc.co.uk" target="">BBC News</a>href sets the destination and target="_blank" opens it in a new tab.Which link jumps to <h2 id="faq"> on the same page?
# followed by the id targets an element on the page.Which link text is best?
This contact section is broken: the email link doesn't open an email app and the website link goes to a local file. Fix both.
<p><a href="team@greenfield.org">Email the team</a></p>
<p><a href="www.greenfield.org">Visit our website</a></p>- Email link uses mailto:
- Website link is absolute with https://
mailto: opens an email app, and https:// makes the URL absolute.HTML Links Quiz
4 questions to check what you learned.
What does the
ain<a>stand for?- address
- anchor
- action
- attribute
Which attribute opens a link in a new tab?
new="tab"href="_new"target="_blank"open="tab"
<a href="images/logo.png">is an example of…- an absolute URL
- an email link
- a broken link
- a relative URL
What does
href="../about.html"point to?- about.html in the parent folder
- about.html in a sub-folder
- about.html on another website
- The about section of the current page
HTML Links Challenge
Build a mini table of contents
Create a page with:
- A
<nav>containing two links: "Rules" →#rulesand "Prizes" →#prizes - An
<h2 id="rules">and an<h2 id="prizes">each followed by a paragraph - A paragraph at the end with a link to
mailto:quiz@example.com
<h1>Pub Quiz Night</h1>
- Nav links point to #rules and #prizes
- Targets exist with matching ids
- An email link to quiz@example.com
<a href="#rules"> and the target is <h2 id="rules">.