This content originally appeared on DEV Community and was authored by CodeWithDhanian
Welcome to Day 7 of the 180 Days of Frontend Development Challenge. Today, we'll dive into one of HTML's most powerful features - the anchor tag (<a>). You'll learn how to create hyperlinks that connect web pages, jump to specific content sections, and even trigger email clients or phone calls.
Understanding Anchor Tags
Anchor tags create clickable hyperlinks using the <a> element with these key attributes:
-
href: Specifies the link destination (required) -
target: Controls where the link opens -
rel: Defines the relationship between documents
Basic Syntax:
<a href="url">Link Text</a>
Types of Links
1. External Links (Absolute URLs)
Link to other websites using full URLs:
<a href="https://www.google.com" target="_blank">Visit Google</a>
-
target="_blank"opens in new tab (addrel="noopener"for security)
2. Internal Links (Relative URLs)
Link between pages in your website:
<a href="about.html">About Us</a> <!-- Same directory -->
<a href="contact/index.html">Contact</a> <!-- Subdirectory -->
<a href="../blog.html">Blog</a> <!-- Parent directory -->
3. Page Section Links (Anchor Links)
Jump to specific sections on a page:
<!-- Link to the section -->
<a href="#features">View Features</a>
<!-- Target section -->
<section id="features">
<h2>Our Features</h2>
...
</section>
4. Special Protocol Links
Create email and phone links:
<a href="mailto:contact@example.com">Email Us</a>
<a href="tel:+15551234567">Call Us</a>
<a href="sms:+15551234567">Text Us</a>
5. Download Links
Force file downloads:
<a href="files/report.pdf" download>Download Report</a>
Link Best Practices
Descriptive Link Text
❌ "Click here"
✅ "Download the user guide"Security for External Links
Always includerel="noopener noreferrer"when usingtarget="_blank"Visual Feedback
Style different states with CSS:
a { color: blue; } /* Unvisited */
a:visited { color: purple; } /* Visited */
a:hover { text-decoration: underline; }
a:active { color: red; } /* Being clicked */
-
Accessibility
- Ensure sufficient color contrast
- Avoid using only color to indicate links
- Add ARIA labels when helpful
Practical Navigation Example
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Exercise
- Create a navigation bar with 4 internal links
- Add an external link that opens in new tab
- Implement a "Back to top" anchor link
- Create an email contact link
(For additional practice, refer to the Learn Frontend Development in 180 Days ebook.)
Tip: Test all your links to ensure they work correctly before publishing your page!
This content originally appeared on DEV Community and was authored by CodeWithDhanian
CodeWithDhanian | Sciencx (2025-06-13T17:17:58+00:00) Day 7/180 of Frontend Dev: Anchor Tags and Linking Between Pages in HTML. Retrieved from https://www.scien.cx/2025/06/13/day-7-180-of-frontend-dev-anchor-tags-and-linking-between-pages-in-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.