HTML Links (Anchors)
Learn how to create and use various types of links in HTML.
What are HTML Links?
HTML links allow users to navigate to different pages, jump to sections within the same page, download files, send emails, or even make phone calls. All links are created using the <a> (anchor) tag with the href attribute.
<a>Anchor Tag
The <a> tag is used to create clickable links. The destination is defined by the href attribute.
- Basic structure:
<a href='URL'>Link Text</a> - Links can point to external pages, internal pages, sections, files, emails, or phone numbers
- Essential for website navigation
Basic Link Example
A simple external link.
<a href="https://www.google.com" target="_blank">Visit Google</a>Absolute URLs
An absolute URL specifies the full web address including protocol and domain. Useful for external sites.
- Always includes the protocol (http:// or https://)
- Best used with target='_blank' for external links
- Example: https://developer.mozilla.org
Absolute URL Example
External website link.
<a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>
<p>(This opens in a new tab to avoid frame blocking)</p>Relative URLs
In real projects, relative URLs link to other files. In our compiler, we'll demonstrate using a section ID.
- Starts with / or ./ or ../
- Points to files within the same structure
- Click the link below and observe the scroll jump!
Relative Link Demo
Demonstrates internal site navigation.
<a href="#about-section">Go to About Section (Relative Link Demo)</a>
<div style="height: 1200px; padding: 20px; background-color: #f3f4f6; margin-top: 20px;">
<p>Scroll down or click the link above!</p>
</div>
<div style="padding: 20px; border: 4px solid purple;" id="about-section">
<h2>Success!</h2>
<p>This is the "About" location. You used a relative anchor link to jump here!</p>
</div>Anchor Links
Anchor links jump to a specific 'id' within the same document.
- Uses #followed by the target id
- Critical for 'Table of Contents' and long pages
- Instantly scrolls the preview to the target element
Anchor Link Example
Standard in-page navigation.
<a href="#contact-us">Jump directly to Contact Us Section</a>
<div style="height: 1000px; padding: 10px; border-left: 2px dashed #ccc; margin: 20px 0;">
<p>(Content section to create scroll space...)</p>
</div>
<section id="contact-us" style="padding: 30px; background-color: #fff7ed; border: 2px solid orange;">
<h2>Contact Us Section</h2>
<p>Email: support@devora-learn.com</p>
<p>Phone: +1 234 567 890</p>
</section>targetAttribute
Defines where the link opens.
_self: Same tab (default)_blank: New tab
Target Attribute Example
Opens the link in a new tab.
<a href="https://example.com" target="_blank">Open in New Tab</a>download
Forces the file to download.
- Uses a Data URL for this demo
- Verify in preview by clicking
Download Attribute Example
Forces a download when clicked.
<a href="data:text/plain,Hello" download="demo.txt">Download Demo File</a>mailto:Email Links
Launch email client.
- mailto:email@address.com
- Can include ?subject=...
Email Link Example
Opens default email client.
<a href="mailto:support@devora.learn">Send Email</a>tel:Phone Links
Call numbers on mobile.
- tel:+123456789
- Highly useful for contact pages
Phone Link Example
Triggers call on mobile devices.
<a href="tel:+1234567890">Call Support</a>Link States
Style links based on user interaction.
- :link, :visited, :hover, :active
- Try hovering over links in the preview!
CSS State Example
Visual feedback for users.
a {
color: #2563eb;
transition: color 0.3s;
}
a:hover {
color: #dc2626;
text-decoration: underline;
}Bookmark Links
Navigate large documents easily.
- Combines # with element IDs
- Ideal for Tables of Contents
Bookmark Link Example
Navigate using bookmarks.
<a href="#toc">Go back to Table of Contents</a>
<section id="toc" style="margin-top: 500px; border: 1px dashed blue;">
<h2>Table of Contents</h2>
<p>Section 1...</p>
</section>Knowledge Check
1. Which attribute opens a link in a new browser tab?
2. Which prefix is used for email links?
3. What does the download attribute do?
4. Which link type jumps to a section within the same page?