Contact list

List contact info with an unordered list and mailto/tel links.

Add a contact list

The page has your name and title. Now you'll add a contact list so visitors can reach you.

The list is a <ul> with two <li> items: an email link (mailto:) and a phone link (tel:). Clicking opens the visitor's email or phone app. The card becomes a working digital contact.

mailto and tel schemes

A link's href value can start with different schemes, not just a web address:

mailto: — opens the email app. Example: mailto:alex@yorkstudio.com
tel: — opens the phone app. Example: tel:+15551234567
https:// — goes to an external website

Starting the phone number with a country code (e.g. +1) prevents errors in international calls.

Exercise Add the contact list

Take the body with name and title from the previous step. After <h2>, add a <ul>. Inside it, put two <li> items: one with a mailto: <a> (e.g. alex.york@yorkstudio.com), the other with a tel: <a> (e.g. +15551234567).

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alex York - Business card</title>
  </head>
  <body>
    <h1>Alex York</h1>
    <h2>Front-end developer</h2>
    <ul>
      <li><a href="mailto:alex.york@yorkstudio.com">Email</a></li>
      <li><a href="tel:+15551234567">Phone</a></li>
    </ul>
  </body>
</html>

Test yourself

What should the href value start with for an email link?
- email:
- mailto:
- post:
- send:
Show answer

mailto: — Correct. The mailto scheme opens the email app.

Complete the phone link

<a href="____">Phone</a>

Show answer

<a href="tel:+15551234567">Phone</a>

Match each scheme to its example

mailto:

Email link
tel:

Phone link
https://

External website
#

In-page anchor

Next lesson: Skills and links

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies