16. Hyperlinks and File Paths (Links & File Paths)
href, target, mailto, tel and Relative vs Absolute Paths
Real-life analogy
A link is like a magic doorway (Portal): the moment you step on it, you land in another room (web page).
Explanation
1. Main types of the anchor tag <a>:
target="_blank": To open the link in a new browser tab.href="#section-id": Bookmark link! To jump straight to a particular part of the same page.mailto:email@test.com: To open the email software directly.tel:+919876543210: To open the phone dialler directly on mobile.
2. Absolute vs Relative file paths:
- Absolute Path: The full internet web address (for example
https://google.com/logo.png). - Relative Path: The address of a folder within your own website (for example
images/pic.jpg).
Golden rules
- Never give a local computer's hard-disk path (such as C:\Users...); always use a relative path.
Common mistake
Forgetting to add https:// in a link to an external website, so the link is treated as a local file and gives an error.
Example code
<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
<p><a href="https://wikipedia.org" target="_blank" style="color: #2563eb; font-weight: bold;">Wikipedia (in a new tab)</a></p>
<p><a href="mailto:parthkhurana@dailyspark.in" style="color: #059669;">Send email: parthkhurana@dailyspark.in</a></p>
<p><a href="tel:+919876543210" style="color: #d97706;">Call: +91 98765 43210</a></p>
</body>
</html>Quick quiz
What is put in href to open the phone dialler on a mobile the moment a link is clicked?
- call:
- phone:
- tel:
- dial:
Show answer
Answer: tel:
The tel: protocol opens the phone dialler, as in href='tel:+919876543210'.