Skip to content

Lists

Lists are everywhere on the web — navigation menus, bullet points, numbered steps, feature lists. HTML has two kinds, and both follow the same simple pattern.

Unordered lists — <ul>

An unordered list is a bullet-point list. Use it when the order does not matter.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
  • <ul> wraps the entire list
  • <li> wraps each item — li stands for list item

The browser adds the bullet points automatically. You do not write them.

Ordered lists — <ol>

An ordered list is a numbered list. Use it when the order matters.

<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
  <li>Connect everything to Python</li>
</ol>

Same structure — just <ol> instead of <ul>. The browser handles the numbers.

Using both together

<h2>What I already know</h2>
<ul>
  <li>Python</li>
  <li>Variables, functions, loops</li>
  <li>Working with data</li>
</ul>

<h2>My learning plan</h2>
<ol>
  <li>HTML — structure</li>
  <li>CSS — appearance</li>
  <li>JavaScript — behaviour</li>
  <li>Connect the frontend to Python</li>
</ol>

Copy that into first.html, save, and refresh. You have a proper two-section page.

Lists inside lists

You can nest a list inside a list item:

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

This creates an indented sub-list inside the parent item. Do not go more than two levels deep — it gets hard to read fast.

Challenge

Add two lists to your first.html:

  • An unordered list of Python topics you already know (variables, functions, loops — whatever applies)
  • An ordered list of the HTML tags you have learned so far, in the order you learned them

Look at them in the browser. Then try changing one <ul> to <ol> and see what happens to the bullets.

← Images    Next: The HTML Skeleton →