---
title: 'Test your skills: Links'
slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links
tags:
  - Beginner
  - HTML
  - Learn
  - Links
  - test your skills
---
{{learnsidebar}}

The aim of this skill test is to assess whether you've understood our [Creating hyperlinks](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) article.

> **Note:** You can try out solutions in the interactive editors below; however, it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
>
> If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page.

## Links 1

In this task we want you to help fill in the links on our Whales information page:

- The first link should be linked to a page called `whales.html`, which is in the same directory as the current page.
- We'd also like you to give it a tooltip when moused over that tells the user that the page includes information on Blue Whales and Sperm Whales.
- The second link should be turned into a link you can click to open up an email in the user's default mail application, with the recipient set as "whales\@example.com".
- You'll get a bonus point if you also set it so that the subject line of the email is automatically filled in as "Question about Whales".

> **Note:** The first link in the example has the `target="_blank"` attribute set on it, so that when you click on it, it opens the page in a new tab. This is not strictly best practice, but we've done it here so that the page doesn't open in the embedded `<iframe>`, getting rid of your example code in the process!

Try updating the live code below to recreate the finished example:

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}

> **Callout:**
>
> [Download the starting point for this task](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links1-download.html) to work in your own editor or in an online editor.

## Links 2

In this task we want you to fill in the four links so that they link to the appropriate places:

- The first link should link to an image called `blue-whale.jpg`, which is located in a directory called `blue` inside the current directory.
- The second link should link to an image called `narwhal.jpg`, which is located in a directory called `narwhal`, which is located one directory level above the current directory.
- The third link should link to the UK Google Image search. The base URL is `https://www.google.co.uk`, and the image search is located in a subdirectory called `imghp`.
- The fourth link should link to the paragraph at the very bottom of the current page. It has an ID of `bottom`.

> **Note:** The first three links in the example have the `target="_blank"` attribute set on them, so that when you click on them, they open the linked page in a new tab. This is not strictly best practice, but we've done it here so that the pages don't open in the embedded `<iframe>`, getting rid of your example code in the process!

Try updating the live code below to recreate the finished example:

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 700)}}

> **Callout:**
>
> [Download the starting point for this task](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links2-download.html) to work in your own editor or in an online editor.

## Links 3

The following links link to an info page about Narwhals, a support email address, and a PDF factfile that is 4MB in size. In this task we want you to:

- Take the existing paragraphs with poorly-written link text, and rewrite them so that they have good link text.
- Add a warning to any links that need a warning added.

> **Note:** The first and third links in the example have the `target="_blank"` attribute set on them, so that when you click on them, they open the linked page in a new tab. This is not strictly best practice, but we've done it here so that the pages don't open in the embedded `<iframe>`, getting rid of your example code in the process!

Try updating the live code below to recreate the finished example:

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}

> **Callout:**
>
> [Download the starting point for this task](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links3-download.html) to work in your own editor or in an online editor.

## Assessment or further help

You can practice these examples in the Interactive Editors above.

If you would like your work assessed, or are stuck and want to ask for help:

1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections.
2. Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Your post should include:

    - A descriptive title such as "Assessment wanted for Links 1 skill test".
    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
    - A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
    - A link to the actual task or assessment page, so we can find the question you want help with.
