Challenge · easy
HTML Contact Card: address, mailto, tel and time
Goal: Mark up a bakery's contact details with address, mailto, tel and time.
Learn
HTML has its own elements for contact details. <address> holds the contact information of whoever owns the page or article, such as a street address, an email and a phone number. The HTML standard's address section (opens in a new tab) defines exactly what belongs there.
Links turn those details into something people can tap. href="mailto:..." opens a new email, and on a phone href="tel:..." starts a call. In the href, write the number with its country code and no spaces, like tel:+15550123456. That format comes from RFC 3966, the tel URI scheme (opens in a new tab).
Times and dates go in the time element. Visitors read the text (8 am). Computers read the exact value in datetime, like 08:00.
The short version
<address>is for the contact details of whoever owns the page or article.- Email and phone links use
mailto:andtel:. - Inside the href, a phone number has its country code and no spaces.
<time>marks a time, anddatetimegives the machine-readable value.
Example
<address>
Ana Lopez<br>
<a href="mailto:[email protected]">[email protected]</a>
</address>
<p>Lunch at <time datetime="12:30">half past twelve</time>.</p>Your task
Sunny Bakery needs a contact card under its heading:
- Add an
<address>element containing the street address, 12 Market Street. - In the address, add a
mailto:email link to[email protected]. - Also in the address, add a
tel:phone link, for exampletel:+15550123456. - Under the address, give the opening hours (8 am to 6 pm) using two
<time>elements, each with adatetimesuch as08:00and18:00.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Frequently asked questions
How do I make a clickable phone number in HTML?
Link it with the tel: scheme: <a href="tel:+15550123456">+1 555 012 3456</a>. The href holds the full international number, starting with a plus and the country code, with no spaces. That is the E.164 numbering format (opens in a new tab). Format the visible text any way you like. A tap on a phone opens the dialler, and a computer may hand it to a calling app.
What is the address tag used for in HTML?
Contact details for the person or organization behind the page, or behind the nearest article. That means a postal address, an email, a phone number or social links. A venue mentioned in a news story is a different case. Put that in an ordinary paragraph, because <address> does not cover every address in the text.