← Back to Curriculum

Links and Navigation

📚 Lesson 4 of 20 ⏱️ 20 min

Links and Navigation

20 min

The HTML <a> (anchor) tag is the foundation of web navigation, creating hyperlinks that connect web pages and resources. Links are what make the web a web—they transform isolated documents into an interconnected network of information. Understanding how to create effective, accessible links is fundamental to web development.

The `href` attribute specifies the destination URL, which can be absolute (full URL like `https://example.com/page`), relative (like `../page.html` or `/page.html`), or a fragment identifier (like `#section` for same-page navigation). Absolute URLs point to external resources, relative URLs point to resources relative to the current page, and fragment identifiers link to specific sections within the same document.

The `target` attribute controls where the linked document opens. `target="_blank"` opens the link in a new tab or window, which is useful for external links but should be used judiciously as it can disrupt user experience. When using `target="_blank"`, always include `rel="noopener noreferrer"` for security—this prevents the new page from accessing the `window.opener` property and improves privacy by not sending the referrer.

Link text is crucial for accessibility and SEO. Screen readers often navigate by listing all links on a page, so descriptive link text like "Read our privacy policy" is much better than generic text like "click here" or "read more". Descriptive link text helps users understand where links lead without needing surrounding context, and it improves SEO as search engines use link text to understand page relationships.

Links can point to various resources: other HTML pages, downloadable files (PDFs, images, etc.), email addresses (using `mailto:`), phone numbers (using `tel:`), and even JavaScript functions (though this should be used sparingly). The `download` attribute can force a file download instead of navigation, and the `title` attribute can provide additional context via tooltips.

Best practices include using descriptive link text, providing visual indicators for external links, ensuring sufficient color contrast for accessibility, using `rel="noopener noreferrer"` with `target="_blank"`, and organizing navigation logically. Links should be keyboard accessible and clearly indicate their purpose to all users.

Key Concepts

  • The <a> tag creates hyperlinks with the href attribute.
  • href can be absolute, relative, or a fragment identifier.
  • target="_blank" opens links in new tabs (use with rel="noopener noreferrer").
  • Descriptive link text improves accessibility and SEO.
  • Links can point to pages, files, emails, or phone numbers.

Learning Objectives

Master

  • Creating links with absolute, relative, and fragment URLs
  • Using target and rel attributes for external links
  • Writing descriptive, accessible link text
  • Understanding different link types (mailto, tel, download)

Develop

  • Web navigation and information architecture thinking
  • Understanding accessibility in link design
  • Creating user-friendly navigation patterns

Tips

  • Always use descriptive link text—avoid 'click here' or 'read more'.
  • Include rel="noopener noreferrer" when using target="_blank" for security.
  • Use relative URLs for internal links to improve maintainability.
  • Provide visual indicators (like icons) for external links.

Common Pitfalls

  • Using generic link text like 'click here', making links meaningless out of context.
  • Forgetting rel="noopener noreferrer" with target="_blank", creating security risks.
  • Creating links that aren't keyboard accessible.
  • Using JavaScript in href instead of proper URLs, breaking browser features.

Summary

  • Links connect web pages and create the interconnected web.
  • The href attribute specifies the destination URL.
  • Descriptive link text is essential for accessibility and SEO.
  • Use target="_blank" with rel="noopener noreferrer" for external links.
  • Links should be clear, accessible, and keyboard navigable.

Exercise

Create a link to an external website that opens in a new tab.

<a href="https://www.w3schools.com" target="_blank" rel="noopener noreferrer">Visit W3Schools!</a>

Exercise Tips

  • Try creating links to different types of resources (pages, emails, phone numbers).
  • Experiment with relative URLs for internal navigation.
  • Use fragment identifiers (#section) for same-page navigation.
  • Test your links with keyboard navigation for accessibility.

Code Editor

Output