HTML Exercise - Links

In this exercise, we will create a page with different kinds of link elements.

Exercise text

Create an HTML page that has the following links:

A link to an external URL/website
Multiple links to internal document sections
An image used as a link
A link inside a paragraph
A link inside a list

Solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <h1>Link Elements Exercise</h1>
    
    <h2>A link to an external website/URL</h2>
    <a href="https://www.example.com">example.com</a>

    <h2>Links to internal page sections</h2>
    <a href="#section-1">Section 1</a>
    <a href="#section-2">Section 2</a>
    <a href="#sub-section-2-1">Sub-section 2.1</a>
    <a href="#sub-section-2-2">Sub-section 2.2</a>
    <a href="#section-3">Section 3</a>

    <h2>An image as a link</h2>
    <p>A link element that wraps around an image. The image can now be used as a clickable link:</p>
    <a href="https://www.example.com">
        <img src="https://www.clearprogramming.net/images/logo.png" alt="Clear Programming Logo" height="100" width="100">
    </a>

    <h2>A link within a paragraph</h2>
    <p>This paragraph contains <a href="https://www.example.com">a link</a> element.</p>

    <h2>Links within a list</h2>
    <p>The following list element contains multiple link elements:</p>
    <ul>
        <li><a href="https://www.example.com">example.com</a></li>
        <li><a href="https://www.clearprogramming.net">clearprogramming.net</a></li>
    </ul>

    <h2 id="section-1">Section 1</h2>
    <p>This is a paragraph in section 1.</p>

    <h2 id="section-2">Section 2</h2>
    <p>This is a paragraph in section 2.</p>

    <h3 id="sub-section-2-1">Sub-section 2.1</h3>
    <p>This is a paragraph in sub-section 2.1</p>

    <h3 id="sub-section-2-2">Sub-section 2.2</h3>
    <p>This is a paragraph in sub-section 2.2</p>

    <h2 id="section-3">Section 3</h2>
    <p>This is a paragraph in section 3.</p>

</body>
</html>

Explanation

Our HTML page contains several <a> link elements. Some of them are freestanding links, some are parent elements, and some act as children elements.

A link to an external website

The first link is a freestanding link that points to an external website:

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

Internal links

Next, we have a group of links that point to internal document sections. They point to HTML elements with certain ID values:

<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>
<a href="#sub-section-2-1">Sub-section 2.1</a>
<a href="#sub-section-2-2">Sub-section 2.2</a>
<a href="#section-3">Section 3</a>

These links point to different sections in our document. The links point to elements whose id attribute value matches the link's href value, having a # prefix. Our headings are located at the bottom of the page, and each heading has a different id attribute value:

<h2 id="section-1">Section 1</h2>
<p>This is a paragraph in section 1.</p>

<h2 id="section-2">Section 2</h2>
<p>This is a paragraph in section 2.</p>

<h3 id="sub-section-2-1">Sub-section 2.1</h3>
<p>This is a paragraph in sub-section 2.1</p>
    
<h3 id="sub-section-2-2">Sub-section 2.2</h3>
<p>This is a paragraph in sub-section 2.2</p>

<h2 id="section-3">Section 3</h2>
<p>This is a paragraph in section 3.</p>

When we click on any of the above links, the page will scroll down to the location of the pointed-to element/heading.

An image as a link

Next, we have a link element <a> that wraps around an image element <img>:

<a href="https://www.example.com">
    <img src="https://www.clearprogramming.net/images/logo.png" alt="Clear Programming Logo" height="100" width="100">
</a>

This way, an entire image becomes a clickable link.

A link inside a paragraph

Next, we have a link element <a>, nested inside a paragraph element <p>:

<p>This paragraph contains <a href="https://www.example.com">a link</a> element.</p>

Links inside a list

Finally, we have several links nested inside the unordered list:

<ul>
    <li><a href="https://www.example.com">example.com</a></li>
    <li><a href="https://www.clearprogramming.net">clearprogramming.net</a></li>
</ul>

This list has two list items - <li>, and inside each list item there is a link element - <a>. Links inside list elements are often used in sidebars and navigation menus.

Summary

In this exercise, we practiced creating several different kinds of link elements. We used freestanding links, internal links, wrapper links and children links.

For more information about the <a> element, check out our HTML links tutorial.

In our next exercise, we will practice creating and using a table element.