Lesson 6 — Fundamentals

Lists

HTML provides ordered, unordered, and description lists to structure grouped information clearly for both sighted users and assistive technology.

Ordered and Unordered Lists

Use <ul> when the order of items doesn't matter, and <ol> when it does (like steps in a recipe). Each item, regardless of list type, is wrapped in <li>.

HTML — Lists 
<h2>Shopping List</h2>
<ul>
  <li>Bread</li>
  <li>Milk</li>
  <li>Eggs</li>
</ul>

<h2>Steps to Sign Up</h2>
<ol>
  <li>Create an account</li>
  <li>Verify your email</li>
  <li>Complete your profile</li>
</ol>

Nested Lists

A list item can contain its own nested list, which is useful for hierarchical content like a table of contents or a multi-level menu.

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

Common Mistakes

  • Placing content directly inside <ul> or <ol> without wrapping it in <li>.
  • Using an unordered list for steps that must be followed in a specific order — use <ol> instead.
  • Using <br> tags to fake a list instead of using proper list elements, which breaks accessibility.
  • Forgetting to close a nested <ul> before closing its parent <li>.

Professional Tip

Lists aren't just for bullet points — using proper <ul>/<ol> markup for navigation menus and grouped content gives screen readers useful information, like announcing "list with 5 items" so users know what to expect.

Your Turn

Create a page listing your top 5 favourite movies as an ordered list, and your hobbies as an unordered list, with at least one nested sub-list under one of the hobbies.

Mini Quiz

Which list type should you use when the sequence of items matters, like steps in a process?