Skip to content

Beginner · HTML basics · topic 7 of 64 · 25 min

Links: connecting pages

Explanation

The <a> element makes a link, and its href attribute says where the link goes. Links can point to another site, another page of your own site, a section of the same page, an email address or a phone number. Good link text tells people where they will land.

The anchor element

A link is made with the <a> element (a for anchor). The href attribute (hypertext reference) holds the address. The text between the tags is what people see and tap.

html
<a href="https://www.w3.org/">World Wide Web Consortium</a>
<a href="about.html">About our shop</a>
<a href="#timings">Shop timings</a>
A link to another site, to another page, and to a section
Think of it like this: Think of signboards at a railway station. The board text is the link text: "Platform 3, Chennai Express". The href is the real path the board points to. A board that only says "Go here" helps nobody.

Absolute and relative paths

An absolute URL is the full address with protocol and domain, such as https://www.w3.org/. Use it for other websites. A relative path is measured from the file you are in. Use it for pages of your own site, so links keep working when the site moves to a new domain.

hrefWhere it goes (from /courses/html.html)
about.html or ./about.htmlSame folder: /courses/about.html
../index.htmlOne folder up: /index.html
images/logo.pngThe images folder inside this folder: /courses/images/logo.png
/contact.htmlFrom the root (top) of the site: /contact.html
https://www.w3.org/Another website
output
my-site/
  index.html
  contact.html
  courses/
    html.html     <- you are here
    about.html
    images/
      logo.png
The folder tree used in the table above

Jumping to a section

Give the target element an id, then link to it with a # sign: href="#timings". You can also jump to a section of another page: href="menu.html#sweets". An id must be unique on the page and must not contain spaces.

Email, phone and downloads

html
<a href="mailto:orders@annapurna-tiffin.example">Email your order</a>
<a href="tel:+919876543210">Call +91 98765 43210</a>
<a href="/files/menu-2026.pdf" download>Download the menu (PDF, 200 KB)</a>
mailto opens the email app, tel opens the phone dialler, download saves the file

On a phone, a tel: link opens the dialler with the number ready, which is very useful for shops and services. Write the number with the country code (+91) and no spaces in the href. The download attribute asks the browser to save the file instead of opening it; it works for files on your own site.

Opening in a new tab

target="_blank" opens the link in a new tab. Add rel="noopener" with it, so the new page cannot control your page. Modern browsers now do this by default, but writing it is harmless and makes your intent clear. Use new tabs only when there is a reason, such as an outside site while a form is half filled, and say so in the text.

Good link text

Link text must make sense on its own. Screen reader users often pull up a list of all the links on a page. Five links that all say "click here" tell them nothing. Write where the link goes: "Download the 2026 exam timetable (PDF)".

Careful: Links go somewhere; buttons do something. "Add to cart" or "Pay now" should be a <button>, not an <a>. Using the right element keeps keyboard and screen reader use working.
Tip: Before you publish, tap every link once. A wrong relative path is the most common reason for a 404 page.

Watch the lesson

Links: connecting pages · 1/6

<a href="...">text</a>

Links are what make the web a web. Every link is an a element with an href.

Prefer a video by a teacher? Find free videos on “html links anchor tag href relative absolute path tutorial” on YouTube ↗

In real life: A tiffin service contact section

A home tiffin service puts a menu at the top with relative links (index.html, menu.html, contact.html) and a "#timings" link that jumps down the same page. The contact section has a tel:+91 link so customers can call with one tap, a mailto: link for bulk orders, and a link to the shop on a map site that opens in a new tab with rel="noopener". Every link says where it goes, not "click here".

Practice (0/3 done)

Task 1 · Code · HTML

Fill in the links of this tiffin service page. In the <nav>, link Home to index.html, Menu to menu.html and Contact to contact.html. Make "See our timings" jump to the timings section: give the section id="timings" and link to it with href="#timings".

Task 2 · Code · HTML

Fix the contact links. Make the email link a mailto: link, make the phone link a tel: link starting with +91, and make the map link point to a full https:// address that opens in a new tab with target="_blank" and rel="noopener". Replace every "click here" with text that says where the link goes.

Task 3 · Practice

Open a website you use often and look only at its links. Find two links with unclear text (like "click here" or "more") and rewrite them. Also find one relative link and one absolute link by right-clicking and copying the link address.

Quick quiz

Question 1

1.Which attribute holds the address of a link?

Question 2

2.You are in /shop/sweets.html. Where does href="../index.html" go?

Question 3

3.How do you link to the element <section id="fees"> on the same page?

Question 4

4.Which link text is best?

Question 5

5.What should you add along with target="_blank"?

Read more (free)

Pass the quiz (60% or more) or mark this topic as done when you are ready.

Your progress is saved on this device only.

Next: Images, video and audio →

← Previous: Headings, paragraphs and text