HTML: Structure

Lists and links

Lesson 4 of 18 · About 20 minutes

Your goal: Add a list and a useful link.

Learn

ul groups an unordered list and li marks each item. An a element links to the address in href. Use descriptive link text.

View starter code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style></style>
  </head>

  <body>
    <h1>My hobby</h1>
    <p>I enjoy learning something new.</p>
    <ul>
      <li>First item</li>
    </ul>
    <a href="https://playcode123.com/">Visit Playcode123</a>
  </body>
</html>

Your challenge

List three things needed for your hobby and add a useful web link.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

Practise in the sandbox

Show a hint

Add three li elements inside the ul element. Use a full https:// address for your link.

Show a sample answer

Try the challenge first. This is one possible answer or a snippet to adapt.

<ul>
  <li>Seeds</li>
  <li>Soil</li>
  <li>A pot</li>
</ul>
<a href="https://playcode123.com/">Practise making web pages</a>

Check your work

Three list items appear, and the link opens the intended page.

I tried the challenge and checked the result.

Completion is your own check, not an automatic grade.