0
0
HTMLmarkup~15 mins

Email and phone links in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Email and Phone Links
📖 Scenario: You are creating a simple contact section for a website. Visitors should be able to click on an email address to open their email app and click on a phone number to call directly from their phone or device.
🎯 Goal: Build a contact section with clickable email and phone links using proper HTML anchor tags.
📋 What You'll Learn
Use an anchor tag with href starting with mailto: for the email link
Use an anchor tag with href starting with tel: for the phone link
Include accessible text inside the links
Use semantic HTML with a section element for the contact area
💡 Why This Matters
🌍 Real World
Contact sections on websites often use email and phone links so visitors can easily reach out.
💼 Career
Web developers must know how to create accessible and functional contact links for user interaction.
Progress0 / 4 steps
1
Create the contact section skeleton
Create a section element with the id attribute set to contact. Inside it, add a heading <h2> with the text Contact Us.
HTML
Need a hint?

Use a section tag with id="contact" and add a heading inside it.

2
Add the email link
Inside the section with id="contact", add an anchor tag <a> with the href attribute set to mailto:support@example.com. The link text should be support@example.com.
HTML
Need a hint?

Use href="mailto:support@example.com" in the anchor tag to create an email link.

3
Add the phone link
Below the email link inside the section, add another anchor tag <a> with the href attribute set to tel:+1234567890. The link text should be +1 234 567 890.
HTML
Need a hint?

Use href="tel:+1234567890" in the anchor tag to create a phone link.

4
Add spacing and accessibility
Add a aria-label attribute to the email link with the value Send email to support@example.com. Add a space or line break between the email and phone links for better readability.
HTML
Need a hint?

Add aria-label to the email link and use a <br> tag between links for spacing.