Links and Navigation
🎯 🔗 The Power of Links
Links are what make the web a web! Without links, every website would be an isolated island. Links are literally the technology that connects the entire internet together.
Fun fact: The first-ever website, created in 1991, was just a simple page with links. Today, Google processes over 8.5 billion searches per day, all built on the power of links connecting information.
- How many links do you click in a typical day online?
- What makes a good link versus a frustrating one?
- Why do some links open in new tabs while others replace the current page?
In this tutorial, you'll learn to create the connections that make the web work—one of the most fundamental and powerful tools in web development.
Learning Objectives
By the end of this lesson, you'll be able to:
- ✓ Create Create internal links to navigate within your website
- ✓ Link to external websites and resources properly
- ✓ Understand Understand and apply relative vs absolute paths correctly
- ✓ Build accessible navigation menus
- ✓ Create Create anchor links to specific page sections
- ✓ Write accessible and meaningful link text
- ✓ Implement email and phone links
- ✓ Apply Apply best practices for opening links in new tabs
Why This Matters:
Links are the glue of the internet. Understanding how to create proper, accessible links is essential for building user-friendly websites that work for everyone and rank well in search engines.
Links are what make the World Wide Web truly a "web". They allow us to connect pages and resources together, creating an interconnected network of information. Without links, each webpage would be isolated - like islands without bridges.
Did you know? The term "hypertext" in HTML refers to text that contains links to other texts, creating a network of connected information. This was one of Tim Berners-Lee's core ideas when creating the World Wide Web.
Understanding Links
HTML links (anchor tags) allow users to navigate between pages and resources. Here's the anatomy of a link:
Link Parts Explained:
<a>- The anchor elementhref- Hypertext Reference (the destination)target- How the link should openrel- Relationship to the destination- Link text - What users see and click
Types of Links
1. Internal Page Links
Used for navigation within your website. Points to other pages or files in your site.
2. External Links
Links to other websites. Best practice is to use target="_blank" and rel="external".
3. Email Links
Opens the user's default email client with the specified address.
4. Phone Links
Initiates a phone call on mobile devices. Use international format for better compatibility.
5. Section Links (Fragment Identifiers)
Jumps to a specific section within the same page. The # symbol indicates an ID reference.
Accessible Links
Making links accessible ensures all users can navigate your website effectively.
Writing Descriptive Link Text
❌ Poor Link Text
<p>To learn about quokkas,
<a href="quokkas.html">click here</a>.
</p>
<a href="map.pdf">Read more...</a>
<a href="contact.html">Here</a>✅ Good Link Text
Accessibility Guidelines
- Be Descriptive: Link text should make sense out of context
- Avoid Generic Text: No "click here" or "read more"
- Indicate External Links: Let users know when links open in new tabs
- Maintain Focus Visibility: Never remove focus outline without replacement
- Consider Screen Readers: Use aria-label when needed
Screen Reader Considerations
Link States and Styling
Links have different states that help users understand interactivity:
HTML
CSS
Important State Guidelines
- :link - Unvisited links should be clearly distinguishable
- :visited - Show users which pages they've already seen
- :hover - Provide clear feedback for mouse interaction
- :focus - Must be visible for keyboard navigation
- :active - Shows the link is being clicked
Color Contrast Requirements
- Link text must have a 4.5:1 contrast ratio with background
- Links within text need to be distinguishable beyond just color
- Hover and focus states should be clearly visible
- Consider users with color blindness when choosing link colors
Link Types and Attributes
Essential Link Attributes
| Attribute | Purpose | Example | Accessibility Impact |
|---|---|---|---|
href | Specifies the link destination | <a href="about.html"> | Required for the link to be recognized by assistive technology |
target | Controls how the link opens | <a target="_blank"> | Must warn users when opening in new window |
rel | Relationship between pages | <a rel="noopener"> | Improves security for external links |
aria-label | Provides accessible name | <a aria-label="Learn more about services"> | Essential for descriptive link purposes |
Link Types
Internal Navigation
External Links
Accessibility Requirements
- Descriptive Link Text: Avoid "click here" or "read more"
- New Window Warning: Alert users when links open in new tabs
- Visual Indicators: Links should be visually distinct from regular text
- Focus States: Links must have visible focus indicators
- Skip Links: Provide skip navigation for keyboard users
Special Link Types
Email Links
Phone Links
Best Practices for Link Accessibility
Navigation Structures
A well-organized navigation structure is crucial for website usability. Here are common navigation patterns:
Primary Navigation
Secondary Navigation
Sidebar Navigation
Footer Navigation
Navigation Best Practices
- Use Semantic HTML: Always wrap navigation in
<nav>elements - ARIA Labels: Add descriptive
aria-labelto distinguish multiple navigation sections - Current Page: Indicate the current page using
aria-current="page" - List Structure: Use
<ul>and<li>for navigation items - Skip Links: Provide skip navigation for keyboard users
Breadcrumb Navigation
Note: Navigation structures will be styled with CSS later. Focus on creating semantic, accessible HTML structure now.
Your Task
Create a navigation section for a restaurant website using different types of links.
Include:
- Internal page links (Menu, About, Contact)
- Reservation link (external booking system)
- Contact information (phone and email)
- Social media links (external sites)
Further Reading
For more detailed information about HTML links, check out these resources:
What's Next?
Now that you can create links, let's learn how to add images to make your pages more engaging!
⏸️ ⏸️ Pause & Check: Links & Navigation
Test your understanding of HTML links:
- What's the difference between relative and absolute URLs?
- When should you use target="_blank" and what should you include with it?
- How do you create an email link?
- What makes a link accessible?
Check Your Answers
- Relative URLs are paths relative to the current page (e.g., about.html, ../images/pic.jpg). Absolute URLs include the full address (https://example.com/page.html).
- Use target="_blank" for external sites or documents. Always include rel="noopener noreferrer" for security and add aria-label to warn users the link opens in a new tab.
- Use mailto: in the href: <a href="mailto:email@example.com">Contact</a>
- Descriptive text (not "click here"), proper color contrast, keyboard navigable, clear indication when focused, and ARIA labels when needed.
How confident are you with this concept?
😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!
Lesson checkpoint
Test Your Knowledge
Strengthen your understanding of Html Links by answering the quiz below.
Html Links Quiz
Test your understanding of Html Links concepts.
🏁 Lesson Complete: You've Connected the Web!
Key Takeaways:
- Links are what make the web a web—they connect pages and create navigation
- Use relative URLs for internal links and absolute URLs for external resources
- The href attribute is required; target, rel, and aria attributes enhance functionality and accessibility
- Accessible link text describes the destination, not the action (avoid "click here")
- Navigation menus, breadcrumbs, and internal links create a connected user experience
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- ✅ Create hyperlinks with proper href attributes Check!
- ✅ Use relative and absolute URLs appropriately Got it!
- ✅ Implement accessible and user-friendly link text Can explain it!
- ✅ Build navigation systems with lists and links Could teach this!
- ✅ Apply target and rel attributes for external links Check!
If you can confidently answer "yes" to most of these, you're ready to move on!
Think & Reflect:
🧭check Navigation Thinking
- Look at the navigation menu on any major website. How is it structured with HTML?
- Why do you think breadcrumb navigation (Home > Products > Shoes) is helpful for users?
♿️ Accessibility Impact
Try navigating a website using only your keyboard (Tab key to move between links, Enter to click). This is how many users experience the web. Notice how important clear focus indicators and logical link order are!
🤔 Real-World Test:
Every website navigation menu, every "Read More" button, every table of contents—they're all built with the link techniques you learned today. You now understand the fundamental connection mechanism of the entire World Wide Web!
🎯 Looking Ahead:
In the next lesson, Working with Images, you'll learn how to add visual content to your pages with the img element, alt text, and responsive images!
Recommended Next Steps
Continue Learning
Ready to move forward? Continue with the next tutorial in this series:
Working with ImagesRelated Topics
Explore these related tutorials to expand your knowledge:
Practice Projects
Apply what you've learned with these hands-on projects:
Additional Resources
Deepen your understanding with these helpful resources:
- MDN: Creating hyperlinks - Guide to creating effective links
Progress tracking is disabled. Enable it in to track your completed tutorials.
Cookie Settings