Lesson 10: Working with Links

Learning Outcomes

By the end of this lesson, you will understand how to create different types of links using the anchor tag. You will be able to link to external websites, other pages within your own site, and specific sections within a page. You will learn how to write accessible link text, combine images with links, and style links with CSS to create effective navigation. You will also understand link states and how to provide visual feedback to users.

Prerequisites

You should be comfortable with basic HTML structure from Lesson 01 and have some familiarity with CSS from Lesson 03. Understanding file paths from Lesson 09 (Working with Images) will also be helpful, as the same concepts apply to linking between pages.

Why Links Matter on the Web

Links are what make the web "the web" - they connect pages together, creating the vast network of interconnected information that defines the internet. The word "hypertext" in HTML stands for text that contains links to other text, and this hyperlinking capability is the fundamental innovation that makes the web work.

Links Enable Navigation

Without links, each web page would exist in isolation. Links allow users to:

Navigate between pages on your website
Jump to specific sections within a long page
Access external resources and reference materials
Discover related content and explore topics in depth

Links Affect How Users Experience Your Site

The way you create and organize links has a significant impact on user experience:

Descriptive link text helps users understand where a link leads before clicking
Clear navigation helps users find what they're looking for quickly
Visual feedback through link styling confirms when links are clickable
Logical organization of links creates intuitive site structure

This lesson will teach you how to create effective links that enhance user experience and make your website easy to navigate.

The Anchor Tag and Basic Syntax

Links are created using the <a> tag, called the anchor tag. The anchor tag requires an href attribute (short for "hypertext reference") that specifies the destination of the link.

Basic Link Structure

A simple link looks like this:

<a href="https://www.example.com">Visit Example Website</a>

This link has three parts:

The opening tag with the href attribute: <a href="https://www.example.com">
The link text that users see and click: Visit Example Website
The closing tag: </a>

The href Attribute

The href attribute is required for links to function. It can contain:

Full URLs to external websites: href="https://www.example.com"
Relative paths to pages on your site: href="about.html"
Anchor links to sections on the same page: href="#contact"
Email addresses: href="mailto:email@example.com"
Phone numbers: href="tel:+1234567890"

What Happens When You Click a Link

When a user clicks a link, the browser navigates to the URL specified in the href attribute. This might:

Load a new page in the current browser tab
Open a new tab (if the link is configured to do so)
Scroll to a different section of the current page
Open the user's email client or phone dialer

Understanding how the href attribute works is fundamental to creating effective navigation throughout your website.

Creating External Links

External links point to pages on other websites. These links require a complete URL including the protocol (usually https://).

Basic External Link

<a href="https://www.mozilla.org">Mozilla Developer Network</a>

Opening Links in a New Tab

Often you want external links to open in a new tab so users don't leave your website. Use the target attribute:

<a href="https://www.mozilla.org" target="_blank">
    Mozilla Developer Network
</a>

The target="_blank" attribute tells the browser to open the link in a new tab or window.

Security Consideration: rel Attribute

When using target="_blank", you should also include rel="noopener noreferrer" for security reasons:

<a href="https://www.mozilla.org"
   target="_blank"
   rel="noopener noreferrer">
    Mozilla Developer Network
</a>

Why this matters:

noopener prevents the new page from accessing the window.opener property, which could be a security risk
noreferrer prevents the browser from sending the referring page's URL to the new page

This combination protects your users and is considered a best practice for all external links that open in new tabs.

When to Use External Links

External links are appropriate for:

Citations and sources - linking to original research or references
Resources - linking to tools, documentation, or helpful websites
Social media - linking to your profiles on other platforms
Partners or affiliates - linking to related organizations

Creating Internal Links

Internal links connect pages within your own website. These links use relative paths rather than full URLs, making your site portable and easier to maintain.

Linking to Pages in the Same Directory

If the page you're linking to is in the same folder as your current page, just use the filename:

<a href="about.html">About Us</a>

Linking to Pages in Subdirectories

If the page is in a subfolder, include the folder path:

<a href="pages/contact.html">Contact</a>

Linking to Parent Directories

To link to a page in a parent folder, use ../ to go up one level:

<a href="../index.html">Back to Home</a>

Understanding Relative Paths for Links

Relative paths work the same way for links as they do for images (covered in Lesson 09). Consider this folder structure:

my-website/
├── index.html
├── about.html
├── pages/
│   ├── services.html
│   └── portfolio.html
└── blog/
    └── first-post.html

From index.html:

<a href="about.html">About</a>
<a href="pages/services.html">Services</a>
<a href="blog/first-post.html">Blog</a>

From pages/services.html:

<a href="../index.html">Home</a>
<a href="../about.html">About</a>
<a href="portfolio.html">Portfolio</a>

Benefits of Relative Links

Using relative paths for internal links has several advantages:

Portability: Your site works locally and on any domain without changing links
Faster: No need for DNS lookup since the browser knows it's the same site
Easier maintenance: Moving your site to a new domain doesn't break internal links

Anchor Links Within a Page

Anchor links (also called "fragment identifiers" or "hash links") allow you to link to specific sections within the same page. This is particularly useful for long pages, creating table of contents navigation, or "back to top" links.

Creating an Anchor Point

First, add an id attribute to the element you want to link to:

<h2 id="introduction">Introduction</h2>

The id must be unique on the page - no two elements can have the same id.

Linking to the Anchor Point

Create a link using the id prefixed with a hash symbol (#):

<a href="#introduction">Jump to Introduction</a>

When users click this link, the browser will scroll to the element with id="introduction".

Creating a Table of Contents

Anchor links are perfect for creating navigable table of contents:

<nav>
    <h2>Table of Contents</h2>
    <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#methods">Methods</a></li>
        <li><a href="#results">Results</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
    </ul>
</nav>

<!-- Later in the page -->
<section id="introduction">
    <h2>Introduction</h2>
    <p>Content here...</p>
</section>

<section id="methods">
    <h2>Methods</h2>
    <p>Content here...</p>
</section>

Back to Top Links

You can create a "back to top" link that scrolls to the beginning of the page:

<!-- At the top of your page -->
<div id="top"></div>

<!-- Anywhere else on the page -->
<a href="#top">Back to Top</a>

Or use an empty hash to scroll to the page top:

<a href="#">Back to Top</a>

Combining with Page Links

You can also link to a specific section on a different page:

<a href="about.html#team">Meet Our Team</a>

This navigates to about.html and then scrolls to the element with id="team".

Writing Effective Link Text

The text you use for links (called "link text" or "anchor text") matters significantly for both usability and accessibility. Good link text helps users understand where a link leads before they click it.

Make Link Text Descriptive

Link text should describe the destination or action, not just say "click here" or "read more."

<!-- Not ideal -->
<p>To learn more about web accessibility, <a href="guide.html">click here</a>.</p>

<!-- Better -->
<p>Read our <a href="guide.html">web accessibility guide</a> to learn more.</p>

Why "Click Here" Is Problematic

Generic link text like "click here" creates several issues:

Screen reader users often navigate by jumping from link to link, and hearing "click here" repeatedly provides no context
Visual users scanning a page can't quickly identify where different links lead
Search engines use link text to understand page relationships and content

Link Text Best Practices

Be Specific

Describe what users will find when they click:

<!-- Not specific -->
<a href="downloads.html">Download</a>

<!-- Better -->
<a href="downloads.html">Download the 2024 Annual Report (PDF, 2.5MB)</a>

Keep It Concise

While descriptive, link text should still be reasonably brief:

<!-- Too verbose -->
<a href="tutorial.html">Click this link to visit our comprehensive beginner's tutorial about HTML basics</a>

<!-- Better -->
<a href="tutorial.html">HTML Basics Tutorial</a>

Make Links Distinguishable

If you have multiple links in close proximity, make sure each has unique, clear text:

<!-- Not ideal - multiple identical links -->
<ul>
    <li>HTML Tutorial <a href="html.html">Learn More</a></li>
    <li>CSS Tutorial <a href="css.html">Learn More</a></li>
</ul>

<!-- Better -->
<ul>
    <li><a href="html.html">HTML Tutorial</a></li>
    <li><a href="css.html">CSS Tutorial</a></li>
</ul>

Special Link Types

Email Links

<a href="mailto:contact@example.com">Email us</a>

You can also pre-fill subject and body:

<a href="mailto:contact@example.com?subject=Question%20about%20services">
    Ask about our services
</a>

Phone Links

<a href="tel:+1234567890">Call us: (123) 456-7890</a>

On mobile devices, this opens the phone dialer with the number ready to call.

Images as Links

Images can be made clickable by wrapping them in an anchor tag. This is commonly used for logo links, image galleries, and navigation buttons.

Basic Image Link

To make an image clickable, wrap the <img> tag with an <a> tag:

<a href="index.html">
    <img src="logo.png" alt="Company logo - return to homepage">
</a>

Important: When an image is a link, the alt text should describe the link's destination or purpose, not just the image content.

Alt Text for Linked Images

Compare these examples:

<!-- Not ideal - describes image, not function -->
<a href="index.html">
    <img src="home-icon.png" alt="Picture of a house">
</a>

<!-- Better - describes what clicking does -->
<a href="index.html">
    <img src="home-icon.png" alt="Return to homepage">
</a>

Removing the Default Border

Some older browsers add a border around linked images. Use CSS to remove it:

a img {
    border: none;
}

Image Link with Caption

For image links with captions, you can wrap the entire <figure> element:

<a href="portfolio/project1.html">
    <figure>
        <img src="project1-thumb.jpg" alt="View Project 1 details">
        <figcaption>Website Redesign Project</figcaption>
    </figure>
</a>

Thumbnail Links to Larger Images

A common pattern is linking a small thumbnail to a full-size version:

<a href="images/photo-large.jpg">
    <img src="images/photo-thumb.jpg" alt="View larger version">
</a>

Combining Text and Images in Links

You can include both text and images within a single link:

<a href="index.html" class="logo-link">
    <img src="logo.png" alt="">
    <span>Company Name</span>
</a>

Note that when you have both an image and text in a link, you can use an empty alt attribute (alt="") for the image since the text provides the description.

Styling Links with CSS

By default, browsers style links with blue text and an underline, and visited links appear purple. While functional, these default styles often don't match your design. CSS allows you to style links to fit your website's aesthetic while maintaining usability.

Basic Link Styling

You can change link colors, remove underlines, and add other styles:

a {
    color: #2563eb; /* Blue color */
    text-decoration: none; /* Remove underline */
}

a:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #1e40af; /* Darker blue on hover */
}

Important Accessibility Consideration

If you remove underlines from links, you must ensure links are still distinguishable from regular text. This is especially important for users with color blindness. Options include:

Adding underlines on hover and focus
Using a sufficiently different color from body text
Adding a border or background to links
Using font weight to distinguish links

Best practice: Keep underlines, or add them on hover/focus states.

Styling Different Link Types

You might want different styles for navigation links versus in-content links:

/* General content links */
article a {
    color: #2563eb;
    text-decoration: underline;
}

/* Navigation links */
nav a {
    color: #1f2937;
    text-decoration: none;
    font-weight: 600;
}

nav a:hover {
    color: #2563eb;
}

Creating Button-Style Links

For call-to-action links, you might style them as buttons:

.button-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #2563eb;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.button-link:hover {
    background-color: #1e40af;
}

<a href="signup.html" class="button-link">Sign Up Now</a>

Understanding Link States

Links have different states depending on user interaction and history. CSS provides special selectors called pseudo-classes to style these different states, providing important visual feedback to users.

The Four Main Link States

:link - Unvisited Links

The :link pseudo-class targets links that haven't been visited yet:

a:link {
    color: #2563eb;
}

:visited - Visited Links

The :visited pseudo-class targets links the user has already clicked:

a:visited {
    color: #7c3aed; /* Purple to indicate visited */
}

Note: For privacy reasons, browsers limit which CSS properties can be applied to :visited links (mainly color-related properties).

:hover - Mouse Over

The :hover pseudo-class activates when users move their mouse over the link:

a:hover {
    color: #1e40af;
    text-decoration: underline;
}

:active - Being Clicked

The :active pseudo-class applies while the user is actively clicking the link:

a:active {
    color: #1e3a8a;
}

The Correct Order: LVHA

When styling link states, order matters. Use the mnemonic "LoVe HAte" (LVHA):

a:link { color: #2563eb; }
a:visited { color: #7c3aed; }
a:hover { color: #1e40af; }
a:active { color: #1e3a8a; }

This order ensures that more specific states override less specific ones correctly.

Focus State for Keyboard Navigation

The :focus state is crucial for keyboard users who navigate using the Tab key:

a:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

Important: Never use outline: none on links without providing an alternative focus indicator. Visible focus states are essential for accessibility.

Combining Hover and Focus

Often you want the same styling for both hover and focus:

a:hover,
a:focus {
    color: #1e40af;
    text-decoration: underline;
}

Complete Link Styling Example

/* Default link styles */
a {
    color: #2563eb;
    text-decoration: underline;
    transition: color 0.2s ease;
}

/* Visited links */
a:visited {
    color: #7c3aed;
}

/* Hover and focus states */
a:hover,
a:focus {
    color: #1e40af;
}

/* Active (being clicked) */
a:active {
    color: #1e3a8a;
}

/* Focus visible for keyboard users */
a:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

Creating Navigation Menus

Navigation menus are one of the most important uses of links on a website. A well-structured navigation helps users find content and understand your site's organization.

Semantic Navigation Markup

Use the <nav> element to wrap navigation links. This provides semantic meaning and helps screen readers identify navigation areas:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Styling a Horizontal Navigation Bar

Transform a list into a horizontal navigation bar with CSS:

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}

nav a {
    color: #1f2937;
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

nav a:hover,
nav a:focus {
    background-color: #f3f4f6;
    color: #2563eb;
}

Indicating the Current Page

Help users understand which page they're on by styling the current page's link differently:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html" class="current">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

nav a.current {
    background-color: #2563eb;
    color: white;
}

Responsive Mobile Navigation

On small screens, stack navigation links vertically:

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 0;
    }

    nav a {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }
}

Breadcrumb Navigation

Breadcrumbs show users their location in the site hierarchy:

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="laptops.html">Laptops</a></li>
        <li>Model XYZ</li>
    </ol>
</nav>

nav[aria-label="Breadcrumb"] ol {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0.5rem;
}

nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
    content: "›";
    margin-left: 0.5rem;
    color: #6b7280;
}

Worked Example: Building a Complete Navigation System

This example demonstrates how to create a complete, accessible navigation system that includes a header navigation bar, breadcrumbs, and in-page table of contents. We'll combine semantic HTML with CSS styling to create a professional navigation experience.

Step 1: Create the HTML Structure

Start by building a complete page structure with multiple navigation elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Services - My Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Main navigation -->
    <header>
        <nav class="main-nav" aria-label="Main navigation">
            <a href="index.html" class="logo">
                <img src="logo.png" alt="Company Name Homepage">
            </a>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html" class="current">Services</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Breadcrumb navigation -->
    <nav class="breadcrumb" aria-label="Breadcrumb">
        <ol>
            <li><a href="index.html">Home</a></li>
            <li>Services</li>
        </ol>
    </nav>

    <main>
        <h1>Our Services</h1>

        <!-- Table of contents -->
        <nav class="toc" aria-label="Table of contents">
            <h2>On This Page</h2>
            <ul>
                <li><a href="#web-design">Web Design</a></li>
                <li><a href="#development">Development</a></li>
                <li><a href="#seo">SEO Services</a></li>
                <li><a href="#maintenance">Maintenance</a></li>
            </ul>
        </nav>

        <section id="web-design">
            <h2>Web Design</h2>
            <p>Content about web design services...</p>
        </section>

        <section id="development">
            <h2>Development</h2>
            <p>Content about development services...</p>
        </section>

        <section id="seo">
            <h2>SEO Services</h2>
            <p>Content about SEO services...</p>
        </section>

        <section id="maintenance">
            <h2>Maintenance</h2>
            <p>Content about maintenance services...</p>
        </section>
    </main>
</body>
</html>

Step 2: Style the Main Navigation

Create a professional horizontal navigation bar:

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.main-nav .logo img {
    height: 40px;
    display: block;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}

.main-nav a {
    color: #1f2937;
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.main-nav a:hover,
.main-nav a:focus {
    background-color: #f3f4f6;
    color: #2563eb;
}

.main-nav a.current {
    background-color: #2563eb;
    color: white;
}

Step 3: Style the Breadcrumb Navigation

.breadcrumb {
    padding: 1rem 2rem;
    background-color: #f9fafb;
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb li {
    color: #6b7280;
}

.breadcrumb a {
    color: #2563eb;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 0.5rem;
    color: #9ca3af;
}

Step 4: Style the Table of Contents

.toc {
    background-color: #f3f4f6;
    border-left: 4px solid #2563eb;
    padding: 1.5rem;
    margin: 2rem 0;
}

.toc h2 {
    margin-top: 0;
    font-size: 1.125rem;
    color: #1f2937;
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc li {
    margin: 0.5rem 0;
}

.toc a {
    color: #2563eb;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0;
}

.toc a:hover,
.toc a:focus {
    text-decoration: underline;
    padding-left: 0.5rem;
    transition: padding-left 0.2s ease;
}

Step 5: Add Responsive Behavior

Make the navigation mobile-friendly:

@media (max-width: 768px) {
    .main-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin-top: 1rem;
    }

    .main-nav a {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
    }
}

What This Example Demonstrates

This navigation system showcases several important concepts:

Semantic HTML: Using <nav> elements with descriptive aria-label attributes
Multiple navigation types: Main navigation, breadcrumbs, and table of contents each serve different purposes
Accessibility: Clear labels, keyboard navigation support, and focus states
Visual feedback: Current page indication and hover effects
Responsive design: Navigation adapts to different screen sizes

This pattern can be adapted for most websites, providing users with multiple ways to navigate your content.

Practice Opportunity

Create a multi-page website (at least 3 pages) with a complete navigation system that includes:

A header navigation bar that appears on all pages with links to each page
Visual indication of the current page in the navigation
At least one page with a table of contents that links to sections within that page
At least three external links that open in new tabs with proper security attributes
One page featuring image links (like a portfolio or gallery)
An email link and/or phone link in a contact section
Proper link styling with all states (link, visited, hover, focus, active)

Bonus Challenges

Add breadcrumb navigation to show the user's location in your site hierarchy
Create a "back to top" link that appears on long pages
Make your navigation responsive so it works well on mobile devices
Add smooth scrolling for anchor links using CSS (scroll-behavior: smooth;)
Ensure all links have descriptive link text (no "click here")

Testing Your Work

After creating your navigation:

Test all links to ensure they work correctly
Navigate using only the keyboard (Tab key) to verify focus states are visible
Check that external links open in new tabs
Verify that current page indication updates on each page
Test on mobile or resize your browser to check responsive behavior

Summary of Key Concepts

Links are the fundamental technology that connects the web together, allowing users to navigate between pages and discover content. The anchor tag (<a>) with the href attribute creates links to external websites, internal pages, or specific sections within a page.

What You've Learned

Effective link text is descriptive and tells users where the link leads. Avoid generic phrases like "click here" in favor of specific descriptions. When images are used as links, the alt text should describe the link's destination or purpose rather than the image itself.

Links have multiple states (link, visited, hover, active, focus) that can be styled with CSS pseudo-classes. Always provide visible focus indicators for keyboard users and maintain sufficient color contrast to ensure links are distinguishable from regular text. The proper order for styling link states is LVHA: Link, Visited, Hover, Active.

Navigation menus are best marked up using the semantic <nav> element containing lists of links. Different navigation types serve different purposes: main navigation helps users move between pages, breadcrumbs show location in site hierarchy, and tables of contents help users navigate within long pages.

Remember These Key Points

Use descriptive link text - tell users where they're going
External links with target="_blank" should include rel="noopener noreferrer"
Provide visual feedback for all link states, especially focus
Use semantic <nav> elements for navigation areas
Test keyboard navigation to ensure accessibility
Make current page clear in navigation menus

Bringing It All Together

With knowledge of both images (Lesson 09) and links, you can now create rich, interactive web pages with clickable images, image galleries, and complete navigation systems. These two lessons provide the foundation for building websites that are both visually appealing and easy to navigate.

Bibliography

Mozilla Developer Network. "The Anchor element." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

WebAIM. "Links and Hypertext." WebAIM. https://webaim.org/techniques/hypertext/

W3C Web Accessibility Initiative. "Link Purpose (In Context)." Understanding WCAG 2.1. https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

Mozilla Developer Network. "CSS :link pseudo-class." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/:link

Back to Home | Previous Lesson: Working with Images