Test your skills: Links

The aim of this skill test is to assess whether you understand how to implement hyperlinks in HTML.

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, jsFiddle, or Glitch to work on the tasks.

If you get stuck, then ask us for help — see the Assessment or further help section at the bottom of this page.

Task 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 two links in the example have the target="_blank" attribute set on them. This is not strictly best practice, but we've done it here so that the links 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:

Download the starting point for this task to work in your own editor or in an online editor.

Task 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:

Download the starting point for this task to work in your own editor or in an online editor.

Task 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:

Download the starting point for this task to work in your own editor or in an online editor.

Assessment or further help

You can practice these examples in the Interactive Editors mentioned 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, jsFiddle, or Glitch. 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. Your post should include:
    • A descriptive title such as "Assessment wanted for links skill test 1".
    • Details of what you have already tried and what you would like us to do; for example, tell us if you're 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.