HTML, CSS & JavaScript · Chapter 1.3 · Basic level

Lists (Maggi Recipe vs Shopping List)

लिस्ट बनाना (<ol>, <ul>, और <li>)

Websites use two kinds of lists every day! When order matters — like steps to cook Maggi or 1st, 2nd, 3rd class rank — use <ol> (Ordered List, gives 1, 2, 3). When order doesn't matter — like a shopping list or menu — use <ul> (Unordered List, gives • bullets). Inside either list, every single item is wrapped in <li>...</li> (List Item)!

वेबसाइट पर दो तरह की सूचियाँ (Lists) बनती हैं! जब क्रम ज़रूरी हो — जैसे मैगी बनाने के स्टेप्स या क्लास में 1st, 2nd, 3rd रैंक — तब <ol> (Ordered List, 1, 2, 3 नंबर वाली) लगाओ। जब सिर्फ़ बिंदु (•) चाहिए — जैसे बाज़ार के सामान या खाने का मेन्यू — तब <ul> (Unordered List) लगाओ। दोनों के अंदर हर एक आइटम <li>...</li> (List Item) में रखा जाता है!

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<ol> ... </ol>

Ordered List — automatically numbers items 1., 2., 3.

नंबर वाली लिस्ट — आइटम्स के आगे खुद 1., 2., 3. लगा देता है।

<ul> ... </ul>

Unordered List — puts neat bullet points • before items.

बुलेट पॉइंट वाली लिस्ट — हर आइटम के आगे गोल बिंदु • लगाता है।

<li> ... </li>

List Item — every single point inside <ol> or <ul> MUST be inside <li>.

लिस्ट का एक आइटम — लिस्ट की हर लाइन <li> और </li> के अंदर आती है।

Ready example

<h3>🌅 Mera Daily Routine (Ordered):</h3>
<ol>
  <li>Subah 6 baje uthna</li>
  <li>School jaana</li>
  <li>Shaam ko coding aur cricket khelna</li>
</ol>

<h3>🍕 Mera Favourite Food (Unordered):</h3>
<ul>
  <li>Masala Dosa</li>
  <li>Paneer Pizza</li>
  <li>Mango Ice Cream</li>
</ul>

What you will see: Both a numbered routine list and a restaurant-style bulleted food menu appear cleanly!

प्रिव्यू में 1, 2, 3 वाली रूटीन लिस्ट और बुलेट पॉइंट्स वाला रेस्टोरेंट मेन्यू साफ़ बनकर दिखेगा!

Line by line

<ol> ... </ol>

Starts and ends a numbered list for daily routine steps.

<ol> से नंबर वाली लिस्ट शुरू और </ol> से बंद की।

<li>Subah 6 baje uthna</li>

First numbered item (1.) inside the list.

लिस्ट का पहला आइटम (1.)।

<ul> ... </ul>

Starts and ends a bulleted menu list for favourite foods.

<ul> से बुलेट पॉइंट्स वाली फ़ूड लिस्ट बनाई।

Common mistake

<ol>Apple, Mango</ol>

<ol>
  <li>Apple</li>
  <li>Mango</li>
</ol>

Never write items directly inside <ul> or <ol> without wrapping each item inside <li>...</li>!

<ul> या <ol> के अंदर सीधा टेक्स्ट मत लिखो — हर आइटम को <li>...</li> के अंदर रखना ज़रूरी है!

Your task

Create an unordered list <ul>...</ul> with at least 3 <li>...</li> items of your favourite foods!

<ul>...</ul> का उपयोग करके अपनी 3 पसंदीदा खाने की चीज़ों (<li>...</li>) की लिस्ट बनाओ!

1. Open <ul> and close </ul> at the bottom.
   <ul> खोलो और नीचे </ul> से बंद करो।
2. Inside it, write 3 items using <li>Food Name</li>.
   उसके अंदर <li>खाने का नाम</li> लिखकर 3 आइटम जोड़ो।
3. Click ▶ Run & Preview!
   ▶ Run & Preview दबाकर अपनी लिस्ट देखो!

<h3>🍽️ Mere 3 Favourite Foods:</h3>
<ul>
  <li>Pizza</li>
  <!-- TODO: 2 aur li items jodo (apne favourite khane) -->
</ul>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

• <ol> = numbered list (order matters); <ul> = bullet list (order does not matter).
• Every item goes inside its own <li>...</li>.
• The <li> items must sit between the opening and the closing list tag.

• <ol> = नंबर वाली list (क्रम ज़रूरी); <ul> = बुलेट वाली list (क्रम ज़रूरी नहीं)।
• हर item अपने <li>...</li> के अंदर जाता है।
• <li> items list के खुलने और बंद होने वाले टैग के बीच ही होने चाहिए।

Quick quiz

To display a numbered list (1, 2, 3), which outer tag is used?

नंबर वाली लिस्ट (1, 2, 3) बनाने के लिए बाहर कौन-सा टैग लगता है?

1. <ul>
2. <ol>
3. <li>
4. <dl>

Practice problems for this chapter

• Kirana Shop Signboard (h1 + p + list) · Basic · Write the code
  किराना दुकान का साइनबोर्ड (h1 + p + लिस्ट)

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.