HTML & CSS - Mastery / HTML Basics

Lists: Ordered and Unordered

Master Code Block (This will be used for further examples)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Lists Example</title>
  </head>
  <body>
    <!--All content to be added here-->
  </body>
</html>

In HTML, lists help you display items in a neat, readable format. There are two main types:

🏷 Unordered Lists (<ul>)

  • Use when the order doesn’t matter

  • Shows bullet points by default

  • Great for things like ingredients, features, or tasks

Example:

🏷 Ordered Lists (<ol>)

  • Use when the order does matter

  • Numbers the items automatically

  • Perfect for steps, instructions, rankings, etc.

Example:

📝 Key Points

Both lists use <li> for each list item

  • <ul> = unordered (bullets)

  • <ol> = ordered (numbers)

You can nest lists inside one another too (we’ll get to that later)