Links & lists

Connect the dots

Lesson 2 of 20 · 6 min · Module 1: Content with meaning

The web is a web because pages connect to each other. Links let people explore, while lists organize related ideas.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Give a link a destination
Group related items into a list
Read HTML attributes

The idea

An <a> element uses an href attribute for its destination. Put <li> items inside a <ul> for a bulleted list.

<a href="https://developer.mozilla.org">Explore MDN</a>
<ul>
  <li>Learn</li>
  <li>Build</li>
</ul>

01An attribute configures an element

In an anchor, href identifies the destination. The visible link text helps a person decide whether to follow it. Put the attribute value in quotes.

<a href="https://developer.mozilla.org">Explore the documentation</a>

02Keep list items inside their container

ul identifies an unordered list. Its li children identify the individual items. A list communicates a relationship that separate paragraphs would not express.

Your turn

Create a link to https://developer.mozilla.org with the text Learn more. Add a bulleted list with at least three items.

What the checks look for

Link points to MDN and says Learn more
List has at least three items

Try it in the editor →

Take this with you

Use elements and attributes together to give content a clear purpose.