Lesson 6: HTML Links
What are HTML Links?
HTML links (also called hyperlinks) allow users to click and navigate from one page to another. Links are found in nearly all web pages and are what makes the web a "web"!
Key Points:
- Links are created using the <a> (anchor) tag
- The href attribute specifies the destination
- Links can point to web pages, files, email addresses, or locations on the same page
- The link text is what users see and click on
Basic Link Syntax
HTML Code:
<a href="https://www.example.com">Visit Example</a>
Types of Links
1. External Links
Links to other websites (use full URL):
<a href="https://www.google.com">Go to Google</a>
2. Internal Links
Links to other pages on your own website:
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
3. Anchor Links (Jump Links)
Links to a specific section on the same page:
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>
4. Email Links
Links that open the user's email program:
<a href="mailto:someone@example.com">Send Email</a>
Link Attributes
The target Attribute
Specifies where to open the linked document:
HTML Code:
<a href="https://www.example.com" target="_blank">
Open in New Tab
</a>
| Target Value |
Description |
| _blank |
Opens in a new window or tab |
| _self |
Opens in the same frame (default) |
| _parent |
Opens in the parent frame |
| _top |
Opens in the full body of the window |
The title Attribute
Adds a tooltip that appears when you hover over the link:
HTML Code:
<a href="page.html" title="Go to our main page">
Home
</a>
Output:
Home
(Hover over the link to see the tooltip)
Link with Image
You can use an image as a link by placing an <img> tag inside an <a> tag:
<a href="home.html">
<img src="logo.png" alt="Home" width="100">
</a>
Link to Download Files
Use the download attribute to download a file instead of navigating to it:
<a href="document.pdf" download>Download PDF</a>
Button-Style Links
You can style links to look like buttons using CSS:
HTML Code:
<a href="signup.html" style="background-color: #667eea; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">
Sign Up Now
</a>
💡 Best Practices:
- Use descriptive link text (avoid "click here")
- Make link text meaningful and tell users where they'll go
- Use target="_blank" carefully - let users decide how to open links
- Test all your links to make sure they work
- Use relative URLs for internal pages and absolute URLs for external sites
Link States and Styling
Links can have different states:
- a:link - Normal, unvisited link (usually blue)
- a:visited - Link that user has visited (usually purple)
- a:hover - Link when user hovers over it
- a:active - Link at the moment it is clicked
Practice Exercise
Try This:
Create a simple navigation menu with:
- 5 internal links (Home, About, Services, Blog, Contact)
- At least one external link that opens in a new tab
- An email link
- A jump link to a section lower on the same page
- Add title attributes to all links