Episode 10 of 17
HTML Links
Master the anchor tag to create links to other pages, sections, emails, and external websites.
HTML Links
Links are what make the web a web — they connect pages together. The <a> (anchor) tag creates clickable links.
Basic Syntax
<a href="https://notearc.info">Visit NoteArc</a>
The href attribute specifies the destination URL.
Types of Links
1. External Links
Link to other websites using the full URL:
<a href="https://www.google.com">Go to Google</a>
2. Internal Links (Same Website)
Link to other pages on your own site using relative paths:
<a href="about.html">About Us</a>
<a href="pages/contact.html">Contact</a>
<a href="../index.html">Home</a>
3. Anchor Links (Same Page)
Link to a specific section on the same page using an ID:
<a href="#section2">Jump to Section 2</a>
<!-- Further down the page -->
<h2 id="section2">Section 2</h2>
4. Email Links
<a href="mailto:hello@notearc.info">Send Email</a>
5. Phone Links
<a href="tel:+1234567890">Call Us</a>
The target Attribute
| Value | Behavior |
|---|---|
_self | Opens in the same tab (default) |
_blank | Opens in a new tab |
<a href="https://google.com" target="_blank">Google (new tab)</a>
The title Attribute
Shows a tooltip when the user hovers over the link:
<a href="about.html" title="Learn more about us">About</a>
Linking an Image
You can wrap an image inside a link to make it clickable:
<a href="https://notearc.info">
<img src="logo.png" alt="NoteArc Logo">
</a>
Key Takeaways
- Use
<a href="...">to create links - Use full URLs for external links, relative paths for internal links
- Use
#idfor anchor links within the same page - Use
target="_blank"to open links in a new tab - Images can be wrapped in
<a>tags to make them clickable