Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!
HTML Link Fundamentals
Links are the foundation of the web - they connect pages together, creating the 'web' of the World Wide Web. The HTML anchor element <a> is the tag that creates hyperlinks. Its most important attribute is href (Hypertext REFerence), which specifies the destination URL. Without links, the internet would be a collection of isolated documents with no way to navigate between them. This topic covers all types of links: external links, internal links, email links, phone links, download links, and same-page anchor links.
The Anchor Tag (<a>)
The <a> tag is the most important interactive element in HTML. It creates a clickable hyperlink that navigates the user to another location.
Basic syntax: <a href="destination">Link Text</a>
The href attribute determines WHERE the link goes. The link text (between opening and closing tags) is what the user sees and clicks.
Types of links you can create:
1. External links - Navigate to a different website:
<a href="https://google.com">Visit Google</a>
2. Internal links - Navigate within your website:
<a href="/about.html">About Page</a>
3. Email links - Open the user's email client:
<a href="mailto:hello@example.com">Email Us</a>
4. Phone links - Trigger a phone call (mobile):
<a href="tel:+919876543210">Call Us</a>
5. Download links - Download a file instead of navigating:
<a href="resume.pdf" download>Download Resume</a>
6. Anchor links - Jump to a section on the same page:
<a href="#contact">Go to Contact</a>
Link text matters for accessibility and SEO. Screen readers read link text aloud, so descriptive text like 'Read our privacy policy' is far better than generic 'Click here'. Google also uses link text to understand page relationships.
Hyperlinks support web pages, file downloads, email, and phone calls
Link Types Reference
- External link: <a href="https://google.com">Google</a> - Full URL with protocol.
- Internal link: <a href="/about.html">About</a> - Relative path within your own website.
- Email link: <a href="mailto:name@domain.com">Email</a> - Opens default email client.
- Phone link: <a href="tel:+919876543210">Call</a> - On mobile, initiates a phone call.
- Download link: <a href="file.pdf" download>Download</a> - Forces download instead of opening.
- Anchor link: <a href="#section-id">Jump</a> - Scrolls to the element with matching id.
Tip
Never use 'Click here' or 'Read more' as link text. Screen readers often list all links on a page — hearing 'Click here' repeatedly is useless. Use descriptive text like 'Read our privacy policy'.
Links Example
<!DOCTYPE html>
<html>
<body>
<h1>HTML Link Types</h1>
<p><a href="https://google.com" target="_blank" rel="noopener noreferrer">Visit Google ↗</a></p>
<p><a href="mailto:hello@priygop.com">Email Us</a></p>
<p><a href="tel:+919876543210">Call Us</a></p>
<p><a href="resume.pdf" download="my-resume.pdf">Download Resume</a></p>
<p><a href="#footer">Jump to Footer</a></p>
<div id="footer" style="background:#333;color:white;padding:20px">
<p>Footer section</p>
<p><a href="#" style="color:#4CAF50">Back to Top</a></p>
</div>
</body>
</html>Try It Yourself: Links
Quick Quiz
Key Takeaways
- Links are the foundation of the web - they connect pages together, creating the 'web' of the World Wide Web.
- External link: <a href="https://google.com">Google</a> - Full URL with protocol.
- Internal link: <a href="/about.html">About</a> - Relative path within your own website.
- Email link: <a href="mailto:name@domain.com">Email</a> - Opens default email client.