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