Nearby lessons
10 of 24🔗 HTML Links
📌 What are HTML Links?
HTML links, made using the <a> tag, are used to move between pages, sections, websites, or trigger actions like opening an email app or a phone dialer. 📲
1️⃣ Basic Link to Another Page
This link takes you to another document or website using the href attribute. 🌐
Example02
2️⃣ Open Link in a New Tab (Target Attribute)
Use target="_blank" to open links in a new tab. Add rel="noopener noreferrer" for better security. 🔐
Example03
3️⃣ Named Anchor (Jump to a Section on the Same Page)
Use id to mark a section, and link to it using href="#id". 🔗
Example04
4️⃣ Link to a Named Anchor in Another Document
You can also link to an anchor in a different file like about.html#team. 📁
Example05
5️⃣ Email Link (Opens Mail App)
This opens the user's default email client with the mailto: attribute. ✉️
Example06
6️⃣ Use an Image as a Link
Wrap an <img> tag inside an <a> tag to make the image clickable. 🖼️➡️
Example07
📌 Types of Links Summary
- 🌍 Absolute URL: Full address (e.g.,
https://example.com) - 📂 Relative URL: File within the same site (e.g.,
/about.html) - 📎 Anchor: Jump to sections using
#id - ✉️ Email: Use
mailto:example@example.com - 📞 Phone: Use
tel:+1234567890 - 📥 Download: Use
downloadto force file download - 🖼️ Image Links: Use image inside a link
✅ Link Best Practices
- ✔️ Use clear link text (avoid 'click here')
- 🎯 Use
target="_blank"withrel="noopener noreferrer"for new tabs - 🧭 Use descriptive
titlefor extra info - 🌗 Ensure good color contrast for visibility
- 🔗 Use relative paths for internal links
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5