Lists: Organising Data

Lists are everywhere on the web - navigation menus, step-by-step guides, product features, ingredients. HTML gives you dedicated tags for organised data so the browser (and screen readers and search engines) can understand the structure of your content.

Unordered Lists (<ul>)

The <ul> tag defines a list where the order does not matter. Browsers render each item with a bullet point (•) by default.

Think of a grocery list: "Eggs, Milk, Bread." It doesn't matter if you pick up the milk first or the eggs first - they are just a group of items.

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
  <li>Coffee</li>
</ul>

Output:

• Milk
• Eggs
• Bread
• Coffee

Note: The type attribute (circle, square) is deprecated. Use CSS list-style-type to change bullet shapes.

---

Ordered Lists (<ol>)

The <ol> tag defines a list where the order does matter. Browsers automatically number the items (1, 2, 3...).

Think of a recipe or assembly instructions - you cannot cook before you crack the eggs. The sequence is critical.

<ol>
  <li>Crack the eggs</li>
  <li>Add milk and whisk</li>
  <li>Pour into a hot pan</li>
  <li>Cook for 2 minutes</li>
</ol>

Output:

1. Crack the eggs
2. Add milk and whisk
3. Pour into a hot pan
4. Cook for 2 minutes

Useful <ol> Attributes

Attribute	Values	Effect
type	1, A, a, I, i	Changes numbering style
start	Any number	Starts counting from a custom value
reversed	(boolean)	Counts down instead of up

<!-- Roman numerals starting at I -->
<ol type="I">
  <li>Introduction</li>
  <li>Main Argument</li>
  <li>Conclusion</li>
</ol>

<!-- Start at 50 - useful for continuing a list after a break -->
<ol start="50">
  <li>Item fifty</li>
  <li>Item fifty-one</li>
</ol>

<!-- Countdown for a Top 3 -->
<ol start="3" reversed>
  <li>Bronze medal</li>
  <li>Silver medal</li>
  <li>Gold medal</li>
</ol>

---

The List Item (<li>)

The <li> tag is the only element that should be a direct child of <ul> or <ol>. It is the atom of every list - without it, you have a container with nothing inside.

The <li> tag is a shape-shifter:

• Inside a <ul> → becomes a bullet point
• Inside an <ol> → becomes a numbered item

The value Attribute (Ordered Lists Only)

Forces a specific item to a given number. All subsequent items continue counting from there.

<ol>
  <li>First item</li>
  <li value="10">This becomes item 10</li>
  <li>This becomes item 11</li>
</ol>

Nesting Lists

You can put an entire list inside a list item to create sub-lists:

<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

---

How Navigation Bars are Built

Almost every navigation menu you see on the web is secretly just a <ul> list. Developers use CSS to strip the bullets and lay the items out horizontally:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

Result: A clean, professional horizontal menu - built entirely from a list.

Pro tip: Always use a list for navigation menus, not a series of bare <a> tags. The <ul>/<li> structure tells screen readers this is a group of related links, and they can announce "navigation list, 4 items" to the user.