Lists, when each is right

1. Principle

HTML has three list types, each with a precise meaning:

Each list has child items:

• <ul> and <ol> contain <li> (list item) elements.
• <dl> contains <dt> (term) and <dd> (description) elements.

Pick the tag for the meaning, not the appearance. A <ul> with no bullets is still a <ul>. A list of steps with no numbers visible should still be an <ol> if the order matters. CSS controls how it looks; HTML controls what it is.

2. Do (you try)

Replace your Projects section with a real list of three projects:

<h2 id="projects">Projects</h2>
<ul>
<li>
  <strong>Project name one</strong> —
  A short description of what it does.
  <a href="https://github.com/you/project-one" target="_blank" rel="noopener noreferrer">repo</a>
</li>
<li>
  <strong>Project name two</strong> —
  A short description of what it does.
  <a href="https://github.com/you/project-two" target="_blank" rel="noopener noreferrer">repo</a>
</li>
<li>
  <strong>Project name three</strong> —
  A short description of what it does.
  <a href="https://github.com/you/project-three" target="_blank" rel="noopener noreferrer">repo</a>
</li>
</ul>

Replace the placeholder text and URLs with your actual projects. If you don't have three yet, invent them or list ideas you want to build. You will replace these later.

Save and refresh.

3. Verify (how you know)

Visual check: Three bulleted items, each with a bold name, a description, and a "repo" link.

Inspect check: Right-click any bullet → Inspect. The DevTools tree should show:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Not <div> masquerading as a list. Not <p> with a hyphen. The tags must be <ul> and <li>.

Click check: Each repo link opens the GitHub repo in a new tab.

4. Reference