Links and attributes

Fragments, email, and phone links

Link to a specific part of a page and create email or telephone actions with fragment, mailto, and tel destinations.

6 minute lesson

~~~

A fragment link points to an element in a document.

Give the destination an ID:

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

Then link to it with #pricing:

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

The browser scrolls to the element and updates the URL. You can also add a fragment to another page:

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

IDs must be unique so the browser knows which element to find.

The mailto: scheme opens the visitor’s configured email application:

<a href="mailto:[email protected]">Email us</a>

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

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

These links trigger an action rather than navigating to an HTTP page. Make that action clear in the link text.

Quick check

Result

You got of right.

Lesson completed