Links Within a Page, Email and Phone Links
An id marks a spot on a page and a link to the hash sign and that id jumps straight to it, while mailto and tel links start an email or a phone call.
Apprentice · HTML · Updated
After this lesson you can
- Link to a spot on a page with an id and a fragment link, on the same page or on another page
- Write email and phone links with mailto and tel
Key takeaways
- Give an element an id, and a link whose href is the hash sign followed by that id jumps straight to it.
- Put a page's path in front of the hash sign to jump to a spot on another page.
- A back-to-top link points at an id on the element at the top of the page.
- A mailto link opens a new email to an address, and a tel link starts a phone call on a phone.
- Show the email address or phone number in the link text too, so people on a computer can copy it.
A long page is quicker to use when it has a row of links at the top that jump straight to each section: an FAQ, a one-page site for a band, a recipe with a "Jump to recipe" link. And on almost every business's site, there's an email address or a phone number you can tap. This lesson shows both: links to a spot on a page, and links that start an email or a call.
Mark the spot with an id
A ribbon bookmark marks a page in a book so you can open it right there. On a web page, the mark is an id: the attribute that gives one element a name of its own (see Attributes). Put it on the element you want to jump to, usually a section's heading:
<h2 id="tour">Tour Dates</h2>
An id has three rules: it's used only once on the page, it has no spaces (use hyphens: tour-dates), and capital letters count, so Tour and tour are different ids.
Jump to it with the hash sign
A link to that spot is a hash sign, # (read "hash"), followed by the id. Read href="#tour" as "hash tour":
<p>
Jump to:
<a href="#about">About</a> |
<a href="#albums">Albums</a> |
<a href="#tour">Tour Dates</a>
</p>
Each link needs an element with that id, such as <h2 id="albums">Albums</h2>. Click one and the page scrolls to it, and the address bar ends in #tour. That last part of an address, after the #, is the fragment identifier, or fragment for short: it names a spot inside the page. The Back button takes the visitor back up to where they were.
A row of links like this is really a list, and Module 2 shows the element for lists. A paragraph works for now.
Back to top, and a spot on another page
A back-to-top link at the end of a long section points at an id at the top of the page:
<h1 id="top">The Neon Lanterns</h1>
...
<p><a href="#top">Back to top</a></p>
Browsers scroll to the top for #top even when no element has that id, but give the element the id anyway: the link then says exactly where it goes, and checks such as this chapter's exercise can confirm it.
To jump to a spot on another page, put the page's path in front of the hash sign. From albums/paper-moon.html, this goes up to the home page and straight to its tour dates:
<p>See the band live: <a href="../index.html#tour">tour dates</a>.</p>
It works for other sites too, with an absolute URL in front of the hash sign, as long as that page has the id.
Email links: mailto
A link whose href starts with mailto: (read "mail to") opens a new email to that address in the visitor's email app:
<p>Booking: <a href="mailto:booking@neonlanterns.example">booking@neonlanterns.example</a></p>
You can fill in the subject too, after a ?. A URL can't hold spaces, so each space is written %20: mailto:booking@neonlanterns.example?subject=Booking%20request.
Not everyone has an email app set up, so put the address itself in the link text, where anyone can copy it. And know that a page full of email addresses attracts spam, because programs collect them; a contact form, which Module 3 teaches, keeps the address off the page.
Phone links: tel
A link whose href starts with tel: (read "tel", for telephone) starts a call when it's tapped on a phone. Write the number with a plus sign, the country code (1 for the US and Canada) and digits only, and show it the usual way in the link text:
<p>Box office: <a href="tel:+15555550142">(555) 555-0142</a></p>
On a computer, a tel: link may offer to call with an app, or do nothing, so the number in the link text matters here too. Numbers from 555-0100 to 555-0199 are set aside for examples, so this one never rings anyone.
Try it. In your neon-lanterns folder, give each <h2> on index.html an id, and add a Jump to paragraph under the <h1> with a link to each one. Add a back-to-top link at the bottom, and a booking email link and a box office phone link with made-up details like the ones above. On albums/paper-moon.html, add a link that jumps to the home page's tour dates.
Check yourself
2 questions to try on the lesson page.
So what
An id and a hash sign let people jump to the part they came for, and mailto: and tel: links turn an address or a number into one tap. Small links, big help on a long page or a phone.