Fragments, email, and phone links

Not every link goes to a new page. Some jump to a section on the same page, and some trigger an action on the visitor’s device.

A fragment link points to an element in a document. First, give the target an ID:

<h2 id="pricing">Pricing</h2>

Then link to it with # followed by that ID:

<a href="#pricing">Skip to pricing</a>

Click the link and the browser scrolls straight to that heading. The address bar updates to include #pricing at the end. You can also combine a path with a fragment to jump to a section on another page:

<a href="/guide/#pricing">Read about pricing</a>

IDs must be unique on the page. If two headings share id="pricing", the browser cannot know which one you meant. The link may jump to the wrong place or nowhere useful.

The mailto: scheme opens the visitor’s email application with a new message:

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

The tel: scheme offers to dial a number on devices that support phone calls:

<a href="tel:+4532123456">Call +45 32 12 34 56</a>

These links trigger an action rather than loading a normal web page. Make that clear in the link text. “Email us” and “Call +45 32 12 34 56” set the right expectation. A vague “Contact” link leaves people guessing what will happen when they activate it.

On your my-page project, add id attributes to each major section and a small set of jump links at the top. Open the page, click “Skip to projects,” and confirm the browser lands on the right heading. That is the same fragment pattern used on long documentation pages every day.

For mailto: and tel: links, test on a real device if you can. Desktop browsers handle them differently from phones, and the link text should still make sense in both cases.

Quick check

Start quiz

Result

You got of right.

Try again