Unordered Lists: <ul> and <li>

An unordered list is a collection of items where the order does not matter. HTML uses two elements to create one: <ul> as the container and <li> for each item.

`<ul>` and `<li>`

<ul> stands for unordered list. It is the wrapper that tells the browser “this is a list.”

<li> stands for list item. Every item in the list is wrapped in its own <li>.

<ul>
  <li>Hiking boots</li>
  <li>Water bottle</li>
  <li>Trail map</li>
</ul>

The browser renders this with bullet points by default (CSS controls that appearance, which you will learn later).

The parent/child relationship

<ul> is the parent. Each <li> is a child of <ul>. List items must always live inside a list container — placing an <li> directly in <body> or <main> is invalid.

Valid:

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Invalid — <li> outside <ul>:

<li>First item</li>
<li>Second item</li>

The second example has no container. Browsers may attempt to render it, but the structure is wrong and communicates nothing.

Lists inside semantic containers

A <ul> belongs inside the same semantic elements as any other content — <main>, <section>, <article>, or <aside>:

<main>
  <section>
    <h2>Gear</h2>
    <p>Good gear makes the difference on a long hike.</p>
    <ul>
      <li>Hiking boots</li>
      <li>Water bottle</li>
      <li>Trail map</li>
    </ul>
  </section>
</main>

When to use an unordered list

Use <ul> when the items are related but the order does not matter. If you could shuffle the items and the meaning would be the same, an unordered list is the right choice.

Good candidates:

A list of ingredients
A set of features
A group of links
A collection of items to pack

If the order matters — steps, rankings, a sequence — use <ol> instead. You will learn that in the next lesson.

Exercise

Open index.html in VS Code.

Find one of the <section> elements inside <main>. You are going to add an unordered list of three or more items related to that section’s topic.

Inside the <section>, below the existing <p>, add a <ul>.
Add at least three <li> elements inside the <ul> with relevant items.
Indent each <li> one level inside <ul>.

For example, if your section is about a hobby or topic:

<section>
  <h2>Essential Gear</h2>
  <p>Having the right gear makes every outing better.</p>
  <ul>
    <li>Sturdy boots</li>
    <li>Water bottle</li>
    <li>Sunscreen</li>
    <li>Trail map</li>
  </ul>
</section>

Save and open index.html in your browser. You should see a bulleted list under the paragraph.

Recap

<ul> is the list container. <li> is each item inside it.
<li> must always be a child of <ul> (or <ol>).
Use <ul> when the order of items does not matter.
Place <ul> inside semantic containers like <section> or <main>.