Skip to content

HTML Links: href, Absolute and Relative URLs, New Tabs, Email and Phone Links

Links are what make the web a web. One element, <a>, connects your page to other sites, to other pages on your own site, to a section further down the page, to an email address or to a phone number that dials on a tap. Getting the URL right and writing clear link text are two small skills that save visitors a lot of frustration.

Quick answer

A link is <a href="URL">link text</a>. Use a full URL (https://...) for other sites and a relative path (about.html or /about) for pages on your own site. #id jumps to an element with that id, mailto: opens email and tel: starts a call.

15 min read and practice · Content checked on 20 October 2026

In this lesson you will

  • Write absolute, relative and root-relative links correctly
  • Link to a section of a page, an email address and a phone number
  • Write link text that makes sense out of context

The a element and href

The href attribute holds the destination; the content between the tags is what people click. That content can be text or an image. An <a> without href is not a link at all: it is not focusable with the keyboard, so always include one.

An absolute URL contains everything: the scheme (https://), the domain and the path, for example https://developer.mozilla.org/en-US/docs/Web/HTML. Use it for any page on another site. If you leave out https:// and write www.example.com, the browser treats it as a file on your own site and the link breaks.

Try it: Links to other sites
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Click each link in the result. The console shows the full address the browser built, so you can see why the second one points to the wrong place.

Relative paths inside your site

For pages on the same site, relative URLs are shorter and keep working if the domain changes. contact.html means "a file next to this page". blog/first.html goes into a folder. ../index.html goes up one folder. A path starting with /, such as /about, starts from the root of the site, wherever the current page is.

Add # and an id to jump to a part of a page: <a href="#prices">Prices</a> scrolls to the element with id="prices". You can combine both: /services#prices opens the services page at that section. An id must be unique in the page.

Try it: Jump links inside a page
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

New tabs, email, phone and downloads

target="_blank" opens the link in a new tab. Use it sparingly: people can choose a new tab themselves, and unexpected tabs confuse many users. Modern browsers no longer give the new page control over yours, but adding rel="noopener" is still a harmless habit for older browsers. Saying "opens in a new tab" in the link text is kind.

mailto: links open the visitor’s email app: <a href="mailto:services@zkdigitals.com">Email us</a>. tel: links start a call on phones; write the number in full international format without spaces, such as tel:+97140000000, so it works from any country. The download attribute asks the browser to save a file instead of opening it (for files on your own site).

Good link text says where the link goes. "Download the 2026 price list (PDF)" is clear even when a screen reader reads it alone in a list of links; "click here" is not. It also helps search engines understand the page you link to.

Try it: Email, phone and new-tab links
Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.

Common mistakes

  • Forgetting https:// on external links

    href="google.com" is read as a file called google.com on your own site. External links always need the scheme: https://google.com.

  • "Click here" link text

    A page full of "click here" links is useless in a screen reader’s list of links. Put the destination in the link text itself.

  • Using a link as a button

    If clicking does something on the page (opens a menu, submits data) and does not go to a URL, use <button>. Links navigate; buttons act.

Exercise

Make a small contact block: one link to an external site with a full https:// URL, one email link, one phone link in international format and one jump link to an element with an id on the same page.

Code
ResultUpdates as you type
Console
  1. Console messages, errors, form data and clicked links appear here.
  • A link with a full https:// URL and link text
  • An email link with mailto:
  • A phone link in international format (tel:+...)
  • A jump link starting with #
  • An element with an id to jump to
Show one possible solution
<h2>Contact us</h2>
<p>Visit <a href="https://needmytools.com">NeedMyTools</a>.</p>
<p><a href="mailto:services@zkdigitals.com">Email us</a> or <a href="tel:+97140000000">call +971 4 000 0000</a>.</p>
<p><a href="#address">See our address</a></p>

<h2 id="address">Our address</h2>
<p>Al Barsha, Dubai</p>

Quick quiz

  1. 1. A page is at /blog/post.html. Where does href="../index.html" go?
  2. 2. Which href scrolls to <section id="faq"> on the same page?
  3. 3. Which phone link works from any country?
  4. 4. Clicking should open a menu on the same page. Which element?
Answer every question to check.

Finished the lesson?

Questions people ask

Should external links open in a new tab?

Usually not. Accessibility guidance from W3C advises warning people when a link opens a new window, and many users prefer to decide themselves. Keep target="_blank" for cases like a help page opened in the middle of a form.

What is the difference between an absolute and a relative URL?

An absolute URL includes the scheme and domain and points to the same place from anywhere. A relative URL is read from the current page’s location, so it is shorter and survives a domain change but depends on where the page lives.

Can I put a whole card or image inside a link?

Yes. Since HTML5 an <a> can wrap block content such as a heading, an image and a paragraph, as long as there are no other links or buttons inside it. If the link holds only an image, the image’s alt text becomes the link text.

Why do people add rel="nofollow" or rel="sponsored"?

These values tell search engines about the link. Google asks sites to mark paid or sponsored links with rel="sponsored" and links in user content with rel="ugc"; nofollow is a general hint not to pass ranking credit.

Is a mailto link safe from spam bots?

Not really: any address in a page can be collected. Many sites use a contact form instead, or accept that a public business address will get some spam and rely on the mail provider’s filter.

Sources

Facts in this lesson were checked against these official pages on 20 October 2026.

Code examples stay in English and run in a sandbox on your device. Arabic text is pending native review. If you spot a mistake, tell us through the contact page.