🔗 HTML Foundations

Links

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can create links to other pages and sites, jump to a section on the same page, and open links in a new tab safely.

The 'HT' in HTML stands for HyperText — and links are what make it 'hyper'. A link, or anchor, is what turns a pile of pages into a connected web. It is one of the most important elements you will ever write.

1The anchor element

A link is an <a> element with an href attribute pointing to a destination. The text between the tags is what the user clicks:

<a href="https://vidaara.org">Visit Vidaara</a>

There are two kinds of destination:

  • Absolute — a full address starting with https://. Use it to link to other websites.
  • Relative — a path on your own site, like /about or contact.html. Use it to link between your own pages.
Write link text that makes sense on its own. "Read our refund policy" is far better than "click here" — search engines and screen-reader users rely on the link text to know where it leads.
Make a working link
HTML
CSS
Live preview
What's happening: The text inside the <a> tags is what shows and what the user clicks; the href decides where it goes. Good link text describes the destination.
Key points
  • A link is <a href="…">text</a>.
  • Absolute URLs (https://…) link to other sites; relative paths (/about) link within your own.
  • Write descriptive link text — never "click here".

2New tabs, jumps and email links

A few common variations you will reach for often:

Open in a new tab — safely

Add target="_blank" to open a link in a new tab. When you do, always add rel="noopener noreferrer" too — it closes a small security and performance hole:

<a href="https://example.com"
   target="_blank" rel="noopener noreferrer">External site</a>

Jump to a section on the same page

If an element has an id, you can link to it with # plus that id — handy for a table of contents: <a href="#faq">Jump to FAQ</a> jumps to <section id="faq">.

Email and phone links

<a href="mailto:hi@vidaara.org">Email us</a> opens the visitor's email app; tel: works the same for phone numbers on mobiles.

Key points
  • target="_blank" opens a new tab — always pair it with rel="noopener noreferrer".
  • Link to a section with href="#id" matching an element's id.
  • mailto: and tel: links open the email or phone app.

★ Practical: a tiny link hub

In any playground, create a short page with:

  1. A link to an external website (absolute URL) that opens in a new tab safely.
  2. A relative link to a made-up page on your own site, e.g. /about.
  3. An email link using mailto:.
  4. Make sure each link's text describes where it goes.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Lists
Next →
Images