Programming

Creating hyperlinks

The a element, relative and absolute URLs, email links.

All lessons · HTML lessons: learn from scratch

The a element

A link is made with the <a> element and the destination goes in the href attribute. Link text should describe the target: not “click here” but “open the price list”.

<a href="https://example.com/prices">Open the price list</a>
<a href="https://example.com" target="_blank" rel="noopener">New tab</a>

target="_blank" opens the link in a new tab; add rel="noopener" for safety.

Absolute and relative URLs

An absolute URL starts with https:// and leads to other sites. A relative URL points to a file on your own site relative to the current page: about.html in the same folder, ../index.html one level up, docs/guide.html in a subfolder.

<a href="about.html">About</a>
<a href="../index.html">Home</a>
<a href="docs/guide.html">Guide</a>

Fragment, email and phone links

To jump within a page give the element an id and link with #id. mailto: opens the email app and tel: opens the phone dialer.

<a href="#contact">Go to contact</a>
...
<h2 id="contact">Contact</h2>
<a href="mailto:hello@example.com">Write to us</a>
<a href="tel:+994120000000">Call us</a>
  • Say in the text when a link opens another kind of file (PDF).

Author: Nibras Code