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