Lists and Organization

Welcome back.

In the previous lesson, you learned how to work with text, headings, and paragraphs.

Now we need order.

Because sometimes a paragraph is not enough.

Sometimes content wants to become a list.

Shopping items.

Steps in a recipe.

Skills.

Lessons.

Tasks.

Things you promised to do but are now pretending you forgot.

HTML gives us lists for this.

Very civilized.

What You’ll Learn

In this lesson, you’ll learn:

how unordered lists work;
how ordered lists work;
how to use li;
when to use ul;
when to use ol;
how to create nested lists;
how to organize content clearly.

Why Lists Matter

Lists make information easier to scan.

Compare this:

<p>I need to buy bread, milk, apples, coffee, pasta, tomatoes, and cheese.</p>

With this:

<ul>
  <li>Bread</li>
  <li>Milk</li>
  <li>Apples</li>
  <li>Coffee</li>
  <li>Pasta</li>
  <li>Tomatoes</li>
  <li>Cheese</li>
</ul>

The second version is easier to read.

Your eyes do not have to fight the paragraph.

Your brain says thank you.

Quietly.

But sincerely.

Unordered Lists

An unordered list uses the ul tag.

Each item goes inside an li tag.

Example:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ul means unordered list.

The order does not matter.

The browser usually shows bullets.

Use unordered lists for things like:

skills;
shopping items;
features;
tools;
general collections.

If the order is not important, use ul.

Ordered Lists

An ordered list uses the ol tag.

Example:

<ol>
  <li>Create an HTML file</li>
  <li>Write the document structure</li>
  <li>Add content</li>
  <li>Open the page in the browser</li>
</ol>

ol means ordered list.

The order matters.

The browser usually shows numbers.

Use ordered lists for:

instructions;
steps;
rankings;
recipes;
tutorials;
processes.

If changing the order changes the meaning, use ol.

The li Element

Every item in a list uses li.

Example:

<li>This is a list item.</li>

Do not put plain text directly inside ul or ol.

This is wrong:

<ul>
  HTML
  CSS
  JavaScript
</ul>

This is correct:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

The ul or ol is the container.

The li is the item.

Like a box and the things inside the box.

Do not throw potatoes directly into the air and call it storage.

A Skills List

Create a simple skills section:

<h2>My Skills</h2>

<ul>
  <li>HTML</li>
  <li>Linux Terminal</li>
  <li>Problem solving</li>
  <li>Making mistakes and learning from them</li>
</ul>

This is perfect for personal pages.

Simple.

Readable.

Not dramatic.

Unless the skills list contains “debugging CSS at midnight”.

Then it becomes dramatic.

A Step-by-Step List

For steps, use ol:

<h2>How to Create a Web Page</h2>

<ol>
  <li>Create a folder for the project.</li>
  <li>Create an index.html file.</li>
  <li>Add the HTML document structure.</li>
  <li>Write the content.</li>
  <li>Open the page in a browser.</li>
</ol>

This makes the process clear.

The reader knows what to do first, second, third, and so on.

Very helpful.

Very calm.

The opposite of “just figure it out”.

Nested Lists

A nested list is a list inside another list.

Example:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>Databases</li>
    </ul>
  </li>
</ul>

This is useful when content has categories.

Important: the nested list should be inside an li.

Not floating randomly.

HTML likes order.

It is not a soup kitchen for tags.

Good Nested List Structure

Correct:

<ul>
  <li>Web Development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Not ideal:

<ul>
  <li>Web Development</li>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</ul>

The second version may still appear in the browser.

But the structure is wrong.

Browsers forgive.

Good developers do not rely on forgiveness.

Create a Lists Practice Page

Create a new file:

touch lists.html

Add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lists Practice</title>
</head>
<body>
  <h1>Lists Practice</h1>

  <h2>Things I Want to Learn</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Web accessibility</li>
  </ul>

  <h2>How I Study</h2>
  <ol>
    <li>Open the lesson.</li>
    <li>Read the explanation.</li>
    <li>Write the code myself.</li>
    <li>Test it in the browser.</li>
    <li>Fix mistakes without panic.</li>
  </ol>

  <h2>Web Development Areas</h2>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>Backend
      <ul>
        <li>Server logic</li>
        <li>Databases</li>
        <li>APIs</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Open it in the browser.

You now have unordered lists, ordered lists, and nested lists.

The page is becoming organized.

Dangerously organized.

Common Mistakes

Using paragraphs for lists

This is not great:

<p>HTML, CSS, JavaScript, Git, Linux</p>

Better:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Git</li>
  <li>Linux</li>
</ul>

If it is a collection of items, a list is often better.

Using ul for steps

This is not ideal:

<ul>
  <li>First, create a file.</li>
  <li>Then, write HTML.</li>
  <li>Finally, open it in the browser.</li>
</ul>

Better:

<ol>
  <li>Create a file.</li>
  <li>Write HTML.</li>
  <li>Open it in the browser.</li>
</ol>

Steps have order.

Use ol.

Forgetting li

Wrong:

<ul>
  <p>HTML</p>
  <p>CSS</p>
</ul>

Correct:

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Inside lists, use li.

No rebellion.

Practice

Create a page about your daily routine.

It should include:

one h1;
one unordered list of things you use every day;
one ordered list of your morning routine;
one nested list with categories;
at least one paragraph before a list.

Example categories:

tools;
habits;
study topics;
work tasks;
sports;
languages.

Make it real.

Fake content is boring.

Real content has coffee stains and personality.

Mini Challenge

Create a file:

course-plan.html

Build a page that describes your learning plan.

It should include:

a main heading;
a paragraph introduction;
an unordered list of technologies you want to learn;
an ordered list of steps for studying;
a nested list that groups topics into categories;
a short summary paragraph.

No CSS.

No JavaScript.

Only HTML structure.

Because today we organize the content.

Tomorrow the content may start behaving.

Maybe.

Summary

Today you learned:

ul creates unordered lists;
ol creates ordered lists;
li creates list items;
unordered lists are for collections where order does not matter;
ordered lists are for steps or sequences where order matters;
nested lists are useful for categories;
nested lists should be placed inside li;
lists make content easier to scan and understand.

Good lists make pages cleaner.

Bad lists make pages feel like someone dropped a toolbox on the floor.

Use lists wisely.

Next Lesson

In the next lesson, we’ll learn links and navigation.

Because a web page alone is nice.

But a web page connected to other pages becomes a website.