HTML Page Anchors: Jump Links, Email (mailto) and Phone (tel) Links

Links do not only go to other pages. They can jump to a section of the current page, open an email app, or start a phone call.

Jumping to a section#

Two steps:

1. Give the target element an id.
2. Link to it with # followed by the id.

<nav>
  <a href="#ingredients">Ingredients</a> |
  <a href="#method">Method</a>
</nav>

<h2 id="ingredients">Ingredients</h2>
<p>Rice, water, salt.</p>
<p style="height: 300px">(Long content here.)</p>

<h2 id="method">Method</h2>
<p>Wash the rice, then cook it in the water.</p>
<p><a href="#">Back to top</a></p>

Click "Method" in the result: the frame scrolls to the heading with id="method". "Back to top" scrolls back up. The part after # is called the fragment. href="#" on its own goes to the top of the page.

Ids must be unique on a page and are case-sensitive: #Method does not match id="method".

Fragment links are also how a table of contents works, like the "On this page" list beside this lesson.

Linking to a section of another page#

Add the fragment to the end of the page's URL:

<a href="recipes.html#method">See the method</a>
<a href="https://en.wikipedia.org/wiki/HTML#History">History of HTML on Wikipedia</a>

The browser loads the page and then scrolls to the element with that id.

Email links: mailto#

A mailto: link opens the visitor's email app with a new message:

<a href="mailto:hello@example.com">Email us</a>

You can pre-fill the subject and body. Encode spaces as %20:

<a href="mailto:hello@example.com?subject=Course%20question&body=Hi%20there">Ask a question</a>

Keep in mind:

• It only works if the visitor has an email app set up. Show the address as text too, so people can copy it.
• Email addresses in page source can be collected by spam bots. For a business, a contact form is often a better choice.

Phone links: tel#

A tel: link starts a call on phones (and may offer to call through an app on computers):

<a href="tel:+919876543210">Call +91 98765 43210</a>

Write the number in the href in international format: +, the country code, then the number with no spaces. The link text can be formatted however is easiest to read.

Practice#

<p>
  <a href="#refunds">Can I get a refund?</a><br>
  <a href="#certificate">Do I get a certificate?</a>
</p>

<h2 id="refunds">Can I get a refund?</h2>
<p>Yes, within 7 days of purchase.</p>

<h2 id="certificate">Do I get a certificate?</h2>
<p>Yes, after you finish every lesson.</p>

<p>
  Still stuck? Email <a href="mailto:support@example.com">support@example.com</a>
  or call <a href="tel:+914012345678">+91 40 1234 5678</a>.
</p>

Key takeaway#