Lists: menus and recipes लिस्ट: मेन्यू और रेसिपी
Lesson 3 of 14 · about 12 minutes · Bulleted and numbered lists with <ul>, <ol> and <li>.
⚡ 0 XP
Step 1 of 2
Bulleted lists with <ul>
When the order does not matter — a shopping list, a menu — use an unordered list:
<ul> wraps the whole list- each item goes inside
<li> … </li> (list item)
The browser adds the bullets for you. Only <li> elements should go directly inside a <ul>.
<h2>Snacks</h2>
<ul>
<li>Samosa — ₹15</li>
<li>Vada pav — ₹20</li>
</ul>
🎯 Challenge: Chai Corner menu +15 XP
Complete the menu: the <ul> must have at least 4 items, and every item must show a price (like ₹10).
Try twice to unlock the solution (0/2)
index.htmlCtrl ⏎
Console
Output from console.log appears here.
Checklist
Press Run to check your code.
Lesson notes (text version)
1. Bulleted lists with <ul>
When the order does not matter — a shopping list, a menu — use an unordered list:
<ul> wraps the whole list- each item goes inside
<li> … </li> (list item)
The browser adds the bullets for you. Only <li> elements should go directly inside a <ul>.
<h2>Snacks</h2>
<ul>
<li>Samosa — ₹15</li>
<li>Vada pav — ₹20</li>
</ul>
Challenge: Chai Corner menu
Complete the menu: the <ul> must have at least 4 items, and every item must show a price (like ₹10).
2. Numbered lists with <ol>
When the order matters — recipe steps, directions — use an ordered list <ol>. Items still use <li>, but the browser numbers them 1, 2, 3…
A page can mix both: a <ul> of ingredients and an <ol> of steps. Put a heading above each list so readers know what it is.
<h2>Steps</h2>
<ol>
<li>Boil water</li>
<li>Add tea leaves</li>
</ol>
Challenge: Masala chai recipe
Make a recipe page: a <ul> of at least 3 ingredients, and an <ol> of at least 4 steps. Keep a heading above each list.