","Before the outer <ol>"],"correctIndex":1,"explanation":"The nested list is child content of the relevant parent li, so it appears before that parent's closing </li>."},"guidedPractice":{"prompt":"Fill the blanks to nest Apple and Mango inside the Fruit parent item.","starterCode":"<ol>\n <li>Fruit\n <_____>\n <li>Apple</li>\n <li>Mango</li>\n </_____>\n </li>\n</ol>","requiredSnippets":["<li>Fruit","<ul>","<li>Apple</li>","<li>Mango</li>","</ul>","</li>"],"hint":"Open ul after the parent label and close it before closing the Fruit li."},"debugPractice":{"prompt":"The child list sits outside its parent item. Move it before the Fruit closing </li>.","starterCode":"<ol>\n <li>Fruit</li>\n <ul>\n <li>Apple</li>\n <li>Mango</li>\n </ul>\n</ol>","requiredSnippets":["<li>Fruit\n <ul>","</ul>\n </li>"],"forbiddenSnippets":["<li>Fruit</li>\n <ul>"],"hint":"The parent li must wrap both its label and the complete child ul."},"tryPrompt":"Add a third parent category and nest an ordered or unordered child list inside it. Keep the indentation and closing order clear.","starterCode":"<ol>\n <li>Fruit Shakes Category\n <ul type=\"disc\">\n <li>Mango Blend</li>\n <li>Orange Fusion</li>\n </ul>\n </li>\n <li>Icecreams Category\n <ul type=\"square\">\n <li>Strawberry Tub</li>\n <li>Chocolate Chunk</li>\n </ul>\n </li>\n</ol>","check":{"prompt":"Where should an inner list be placed?","options":["After the outer list closes","Inside its parent li","Inside the title tag","Between two unrelated paragraphs"],"correctIndex":1,"explanation":"The nested list is child content of the parent list item."}},{"id":"definition-lists","title":"Pair terms with descriptions","concept":"A definition list displays terms with their meanings instead of numbers or bullets. dl contains the full list, dt marks each term and dd contains its description. A dd may include ordinary text, line breaks, paragraphs or images.","keyIdea":"dl contains dt + dd pairs","parts":[{"code":"<dl>...</dl>","meaning":"Starts and ends the complete definition list."},{"code":"<dt>...</dt>","meaning":"Marks the word or term being defined."},{"code":"<dd>...</dd>","meaning":"Contains that term's definition or description."},{"code":"rich dd content","meaning":"Descriptions can contain text, br, paragraphs or images."}],"commonMistake":"Using li inside dl. Definition lists use dt and dd pairs rather than list items.","visualPrompt":"Build one term-description pair, add another, and then enrich a description with structured content.","visualStates":[{"label":"1. One term","code":"<dl>\n <dt>HTML</dt>\n</dl>","observation":"dt identifies a term, but it still needs a matching description."},{"label":"2. Add description","code":"<dl>\n <dt>HTML</dt>\n <dd>Hypertext Markup Language - used to create web pages.</dd>\n</dl>","observation":"dd supplies the meaning associated with HTML."},{"label":"3. Add another pair","code":"<dl>\n <dt>HTML</dt>\n <dd>Hypertext Markup Language - used to create web pages.</dd>\n <dt>XML</dt>\n <dd>eXtensible Markup Language - used to store and transport data.</dd>\n</dl>","observation":"The pattern repeats as dt followed by its dd description."},{"label":"4. Rich description","code":"<dl>\n <dt>HTML</dt>\n <dd>\n <p>Hypertext Markup Language.</p>\n <p>It structures web pages using elements.</p>\n </dd>\n</dl>","observation":"A description may contain paragraphs and other appropriate HTML content."}],"prediction":{"prompt":"Which tag contains the description associated with a <dt> term?","options":["li","dd","ol","caption"],"correctIndex":1,"explanation":"dt identifies the term and the following dd contains its definition or description."},"guidedPractice":{"prompt":"Complete the definition list with CSS as the term and the supplied sentence as its description.","starterCode":"<dl>\n <_____>CSS</_____>\n <_____>A language used to style web pages.</_____>\n</dl>","requiredSnippets":["<dt>CSS</dt>","<dd>A language used to style web pages.</dd>"],"hint":"Use dt for the term and dd for its description."},"debugPractice":{"prompt":"A definition list must not use li for its term and meaning. Replace them with the correct pair.","starterCode":"<dl>\n <li>HTML</li>\n <li>Language used to create web pages.</li>\n</dl>","requiredSnippets":["<dt>HTML</dt>","<dd>Language used to create web pages.</dd>"],"forbiddenSnippets":["<li>"],"hint":"The name uses dt; the explanation immediately after it uses dd."},"tryPrompt":"Add CSS and JavaScript terms with complete descriptions. Put two short paragraphs inside one dd.","starterCode":"<dl>\n <dt>HTML</dt>\n <dd>Hypertext Markup Language - used to create web pages.</dd>\n\n <dt>XML</dt>\n <dd>eXtensible Markup Language - used to store and transport data.</dd>\n</dl>","check":{"prompt":"Which tag contains a definition's description?","options":["dl","dt","dd","li"],"correctIndex":2,"explanation":"dd contains the description, while dt contains the term."}}],"deckStorageKey":"cbse-pilot:html-lists-cycle-deck:v1","challengeStarter":"<section>\n <h1>School Activity Guide</h1>\n \n</section>","challengeTitle":"Build a school activity guide","challengeDescription":"Combine a customised ordered schedule, a correctly nested bulleted materials list, and a two-term definition list.","challengeKind":"html-lists"}] </article></body></html>

1d:I[15286,["/_next/static/immutable/chunks/1uw8a0ezlr0xu.js","/_next/static/immutable/chunks/31k708gdnb8ar.js","/_next/static/immutable/chunks/1dg6bxbrr5eno.js","/_next/static/immutable/chunks/0d5blf-ic4bsx.js","/_next/static/immutable/chunks/01zz0k654jsjt.js","/_next/static/immutable/chunks/26gknsbsq1qq5.js","/_next/static/immutable/chunks/2uzgizmzf6stb.js"],"CodeCycleLesson"] 14:["$","$L1d",null,{"topic":{"id":"html-lists","chapter":5,"order":3,"title":"Lists in HTML","estimatedMinutes":20,"concepts":[{"id":"list-types","title":"Ordered, unordered and definition lists","body":"Ordered lists use ol and li when sequence matters. Unordered lists use ul and li when order does not matter. Definition lists use dl, dt for a term and dd for its description. Lists can be nested.","keyPoints":["ol can use type and start","ul can use disc, square or circle","dl pairs dt terms with dd descriptions"],"sourceRef":"Chapter 5 part 1.pdf, pp. 4-7"}],"visualLearning":[{"id":"list-playground","type":"interactive-html","title":"Toggle list structures","config":{"previewTitle":"List experiment","initialCode":"

Fresh Fruits
- Green Apple
- Ripe Mango

","presets":[{"id":"nested","label":"Nested list","code":"

Fresh Fruits
- Green Apple
- Ripe Mango

"},{"id":"definition","label":"Definition list","code":"

HTML: Language used to create web pages.
XML: Language used to store and transport data.

"},{"id":"ordered-start","label":"Start at VI","code":"

Point one
Point two

"}]},"sourceRef":"Chapter 5 part 1.pdf, pp. 4-7"}],"quickChecks":[{"questionId":"ch5-list-check"}],"workedExamples":[{"id":"nested-list-example","title":"Build a nested list","prompt":"Make an ordered list with a bulleted list inside its first item.","steps":["Open ol and li.","Open ul inside the li.","Add inner li items and close in reverse order."],"answer":"

Fruit
- Apple
- Mango

","sourceRef":"Chapter 5 part 1.pdf, p. 6"}],"pyqs":[{"questionId":"cbse-2026-set-4-q-7"},{"questionId":"cbse-2023-set-4-q-10"},{"questionId":"cbse-2024-set-4-q-9"},{"questionId":"cbse-2025-set-4-q-7"},{"questionId":"cbse-2026-set-4-q-10"},{"questionId":"cbse-2026-set-4-q-16-a"},{"questionId":"cbse-2023-set-4-q-18-b"},{"questionId":"cbse-2024-set-4-q-22-b"},{"questionId":"cbse-2025-set-4-q-18-b"},{"questionId":"cbse-2026-set-4-q-18-b"},{"questionId":"cbse-2026-set-4-q-20"},{"questionId":"cbse-2023-set-4-q-24-a"},{"questionId":"cbse-2023-set-4-q-24-b"}],"practice":[{"questionId":"ch5-list-practice"}],"revision":[{"id":"list-recap","summary":"Use ol for sequence, ul for bullets, dl with dt and dd for meanings, and nest lists inside list items.","sourceRef":"Chapter 5 part 1.pdf, pp. 4-7"}]},"cycles":[{"id":"ordered-lists","title":"Create an ordered list","concept":"Use an ordered list when sequence or numbering matters. ol contains the complete list and each li creates one item, automatically beginning on a new list line. type changes the marker style and start changes the first counting value.","keyIdea":"ol contains li items; type changes markers; start changes the first value","parts":[{"code":"

...","meaning":"The container for the complete numbered sequence."},{"code":"

...

","meaning":"One list item; no br is needed between items."},{"code":"type=\"1/A/a/I/i\"","meaning":"Selects numbers, capital/small letters or capital/small Roman numerals."},{"code":"start=\"6\"","meaning":"Begins counting at the sixth value of the chosen marker style."}],"commonMistake":"Adding br after every li or writing start=VI. start uses the numeric position 6 even when type=\"I\" displays Roman numerals.","visualPrompt":"Build the list first, then change its numbering system and starting position.","visualStates":[{"label":"1. Default numbers","code":"

Mango Fruit
Orange Fruit
Banana Fruit

","observation":"An ordered list counts from 1 by default; li already separates the items."},{"label":"2. Capital letters","code":"

Mango Fruit
Orange Fruit
Banana Fruit

","observation":"type A displays capital-letter markers."},{"label":"3. Lowercase Roman","code":"

Mango Fruit
Orange Fruit
Banana Fruit

","observation":"type i displays lowercase Roman-numeral markers."},{"label":"4. Start at six","code":"

Mango Item
Orange Item
Banana Item

","observation":"The numeric start value 6 appears as VI because the selected type is capital Roman."}],"prediction":{"prompt":"What is the first marker produced by

Plan
Build

Plan
Build

Revision point
Practice point

Fruit Varieties:

Mango Fruit
Orange Fruit
Banana Fruit

...

Whole Milk
Fresh Bread
Cereal Box

Whole Milk
Fresh Bread
Cereal Box

Whole Milk
Fresh Bread
Cereal Box

Whole Milk
Fresh Bread
Cereal Box

Notebook
Pencil

Notebook
Pencil

Grocery Supplies

Whole Milk
Fresh Bread

Whole Milk","

Fresh Bread

",""],"hint":"Every group of unordered li items needs a surrounding ul container."},"tryPrompt":"Switch among disc, square and circle, then add a fourth grocery item without inserting a br tag.","starterCode":"Grocery Supplies:\n

Whole Milk
Toilet Paper
Cereal Box
Fresh Bread

","check":{"prompt":"Which list is appropriate when item order does not matter?","options":["ol","ul","dl only","table"],"correctIndex":1,"explanation":"ul represents an unordered collection using bullet markers."}},{"id":"nested-lists","title":"Place one list inside another","concept":"A nested list is a list inside another list. The inner ul or ol belongs inside the relevant parent li, after that item's label and before its closing li tag. Ordered and unordered structures may be mixed.","keyIdea":"parent list → parent li → nested list → nested li items","parts":[{"code":"outer ol","meaning":"Creates the main category sequence."},{"code":"parent li","meaning":"Contains both the category label and its nested list."},{"code":"inner ul","meaning":"Creates the child bullet collection within that parent item."},{"code":"close in reverse","meaning":"Finish the inner list before closing its parent li and outer list."}],"commonMistake":"Closing the parent li before opening the nested ul. The child list must be structurally inside its parent item.","visualPrompt":"Grow a category list one nesting level at a time and follow the closing-tag order.","visualStates":[{"label":"1. Outer categories","code":"

Fruit Shakes Category
Icecreams Category

","observation":"The outer ordered list contains two top-level categories."},{"label":"2. Open first parent","code":"

\n Fruit Shakes Category\n
Icecreams Category

","observation":"The first li is expanded so child content can be placed before its closing tag."},{"label":"3. Add nested bullets","code":"

\n Fruit Shakes Category\n
- Mango Blend
- Orange Fusion
- Banana Smoothie
\n
Icecreams Category

","observation":"The inner ul sits inside the Fruit Shakes parent li."},{"label":"4. Complete both categories","code":"

Fruit Shakes Category\n
- Mango Blend
- Orange Fusion
\n
Icecreams Category\n
- Strawberry Tub
- Chocolate Chunk
\n

","observation":"Each parent li owns its own nested list, and the two inner lists may use different bullet styles."}],"prediction":{"prompt":"Where must a child

be placed when it describes one parent list item?","options":["After the outer

","Inside the page ","Before the outer <ol>"],"correctIndex":1,"explanation":"The nested list is child content of the relevant parent li, so it appears before that parent's closing </li>."},"guidedPractice":{"prompt":"Fill the blanks to nest Apple and Mango inside the Fruit parent item.","starterCode":"<ol>\n <li>Fruit\n <_____>\n <li>Apple</li>\n <li>Mango</li>\n </_____>\n </li>\n</ol>","requiredSnippets":["<li>Fruit","<ul>","<li>Apple</li>","<li>Mango</li>","</ul>","</li>"],"hint":"Open ul after the parent label and close it before closing the Fruit li."},"debugPractice":{"prompt":"The child list sits outside its parent item. Move it before the Fruit closing </li>.","starterCode":"<ol>\n <li>Fruit</li>\n <ul>\n <li>Apple</li>\n <li>Mango</li>\n </ul>\n</ol>","requiredSnippets":["<li>Fruit\n <ul>","</ul>\n </li>"],"forbiddenSnippets":["<li>Fruit</li>\n <ul>"],"hint":"The parent li must wrap both its label and the complete child ul."},"tryPrompt":"Add a third parent category and nest an ordered or unordered child list inside it. Keep the indentation and closing order clear.","starterCode":"<ol>\n <li>Fruit Shakes Category\n <ul type=\"disc\">\n <li>Mango Blend</li>\n <li>Orange Fusion</li>\n </ul>\n </li>\n <li>Icecreams Category\n <ul type=\"square\">\n <li>Strawberry Tub</li>\n <li>Chocolate Chunk</li>\n </ul>\n </li>\n</ol>","check":{"prompt":"Where should an inner list be placed?","options":["After the outer list closes","Inside its parent li","Inside the title tag","Between two unrelated paragraphs"],"correctIndex":1,"explanation":"The nested list is child content of the parent list item."}},{"id":"definition-lists","title":"Pair terms with descriptions","concept":"A definition list displays terms with their meanings instead of numbers or bullets. dl contains the full list, dt marks each term and dd contains its description. A dd may include ordinary text, line breaks, paragraphs or images.","keyIdea":"dl contains dt + dd pairs","parts":[{"code":"<dl>...</dl>","meaning":"Starts and ends the complete definition list."},{"code":"<dt>...</dt>","meaning":"Marks the word or term being defined."},{"code":"<dd>...</dd>","meaning":"Contains that term's definition or description."},{"code":"rich dd content","meaning":"Descriptions can contain text, br, paragraphs or images."}],"commonMistake":"Using li inside dl. Definition lists use dt and dd pairs rather than list items.","visualPrompt":"Build one term-description pair, add another, and then enrich a description with structured content.","visualStates":[{"label":"1. One term","code":"<dl>\n <dt>HTML</dt>\n</dl>","observation":"dt identifies a term, but it still needs a matching description."},{"label":"2. Add description","code":"<dl>\n <dt>HTML</dt>\n <dd>Hypertext Markup Language - used to create web pages.</dd>\n</dl>","observation":"dd supplies the meaning associated with HTML."},{"label":"3. Add another pair","code":"<dl>\n <dt>HTML</dt>\n <dd>Hypertext Markup Language - used to create web pages.</dd>\n <dt>XML</dt>\n <dd>eXtensible Markup Language - used to store and transport data.</dd>\n</dl>","observation":"The pattern repeats as dt followed by its dd description."},{"label":"4. Rich description","code":"<dl>\n <dt>HTML</dt>\n <dd>\n <p>Hypertext Markup Language.</p>\n <p>It structures web pages using elements.</p>\n </dd>\n</dl>","observation":"A description may contain paragraphs and other appropriate HTML content."}],"prediction":{"prompt":"Which tag contains the description associated with a <dt> term?","options":["li","dd","ol","caption"],"correctIndex":1,"explanation":"dt identifies the term and the following dd contains its definition or description."},"guidedPractice":{"prompt":"Complete the definition list with CSS as the term and the supplied sentence as its description.","starterCode":"<dl>\n <_____>CSS</_____>\n <_____>A language used to style web pages.</_____>\n</dl>","requiredSnippets":["<dt>CSS</dt>","<dd>A language used to style web pages.</dd>"],"hint":"Use dt for the term and dd for its description."},"debugPractice":{"prompt":"A definition list must not use li for its term and meaning. Replace them with the correct pair.","starterCode":"<dl>\n <li>HTML</li>\n <li>Language used to create web pages.</li>\n</dl>","requiredSnippets":["<dt>HTML</dt>","<dd>Language used to create web pages.</dd>"],"forbiddenSnippets":["<li>"],"hint":"The name uses dt; the explanation immediately after it uses dd."},"tryPrompt":"Add CSS and JavaScript terms with complete descriptions. Put two short paragraphs inside one dd.","starterCode":"<dl>\n <dt>HTML</dt>\n <dd>Hypertext Markup Language - used to create web pages.</dd>\n\n <dt>XML</dt>\n <dd>eXtensible Markup Language - used to store and transport data.</dd>\n</dl>","check":{"prompt":"Which tag contains a definition's description?","options":["dl","dt","dd","li"],"correctIndex":2,"explanation":"dd contains the description, while dt contains the term."}}],"deckStorageKey":"cbse-pilot:html-lists-cycle-deck:v1","challengeStarter":"<section>\n <h1>School Activity Guide</h1>\n \n</section>","challengeTitle":"Build a school activity guide","challengeDescription":"Combine a customised ordered schedule, a correctly nested bulleted materials list, and a two-term definition list.","challengeKind":"html-lists"}] </article></body></html>

Just a moment…