# 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 October 31, 2026

## 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:

```html
<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":

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.

## Key terms

- [Fragment identifier](https://www.ask-codey.com/glossary/fragment-identifier)
- [id](https://www.ask-codey.com/glossary/id)
- [Hyperlink](https://www.ask-codey.com/glossary/hyperlink)

## Cheat sheets

- [Links Within a Page, Email and Phone Links](https://www.ask-codey.com/cheat-sheets/html-links-within-a-page-cheat-sheet)

## Related

- [Links Between Your Own Pages](https://www.ask-codey.com/lessons/html-links-between-your-own-pages)
- [Headings and the Page Outline](https://www.ask-codey.com/lessons/html-headings-and-the-page-outline)

Source: https://www.ask-codey.com/lessons/html-links-within-a-page