Ordered lists in HTML - Browser Rendering Trace

Render Flow - Ordered lists

[Read <ol>] -> [Create OL node] -> [Read <li>] -> [Create LI as child] -> [Add text to LI] -> [Close LI] -> [Repeat for each LI] -> [Close OL]

The browser reads the ordered list tag <ol>, creates a list container, then reads each list item <li> inside it, creating child nodes with text. It numbers each item automatically.

Render Steps - 4 Steps

Code Added:<ol>

Before

→

After

[1. ]
(Empty list container)

Adding the <ol> tag creates a container for the ordered list. It reserves space for numbered items but no items appear yet.

🔧 Browser Action:Creates OL element node and prepares numbering context

Code Sample

This code produces a numbered list with three items, each on its own line, with numbers 1, 2, and 3 automatically added by the browser.

HTML

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Render Quiz - 3 Questions

After applying step 3, what do you see in the browser?

A Two numbered items stacked vertically: 1. First item, 2. Second item

B Two bullet points stacked vertically

C Two items side by side without numbers

D One numbered item only

Common Confusions - 3 Topics

Why do my list items not show numbers?

If you use <ul> instead of <ol>, the browser shows bullets, not numbers. Only <ol> creates numbered lists (see render_steps 1-4).

💡 Use <ol> for numbers, <ul> for bullets.

Why are my list numbers not starting at 1?

The <ol> element can have a start attribute to change numbering. Without it, numbering starts at 1 by default (render_steps show default start).

💡 Check if <ol start="..."> is set to change numbering.

Why does my list appear all on one line?

List items <li> are block-level by default, so they stack vertically. If CSS changes display to inline, items appear horizontally.

💡 Keep <li> as block to stack vertically.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<ol>	block	Ordered list container	Numbers each <li> automatically, vertical stacking
<li>	list-item	List item inside <ol> or <ul>	Displays with bullet or number, indented
<ul>	block	Unordered list container	Bullets instead of numbers

Concept Snapshot

Ordered lists use the <ol> tag to create numbered lists. Each <li> inside <ol> is automatically numbered starting at 1. Numbers appear before each item, stacked vertically. Use <ul> for bullet lists instead. You can change numbering start with the start attribute.

Practice

1. What HTML tag is used to create a numbered list?

easy

A. <ol>

B. <ul>

C. <li>

D. <list>

Solution

1. Step 1: Understand list types in HTML

   There are two main list types: ordered (<ol>) and unordered (<ul>).

2. Step 2: Identify the tag for numbered lists

   The <ol> tag creates numbered (ordered) lists, while <ul> creates bullet lists.

3. Final Answer:

   <ol> -> Option A

4. Quick Check:

   Numbered list tag = <ol> [OK]

Hint: Numbered lists always use <ol> tag [OK]

Common Mistakes:

• Confusing <ol> with <ul>
• Using <li> as the list container
• Trying to use a non-existent <list> tag

2. Which of the following is the correct syntax to start an ordered list in HTML?

easy

A. <orderedlist>

B. <list type='number'>

C. <ol>

D. <ul type='1'>

Solution

1. Step 1: Recall standard HTML tags for lists

   The standard tag for ordered lists is <ol>. Other tags like <orderedlist> or attributes on <ul> are not valid HTML.

2. Step 2: Confirm correct syntax

   The correct way to start an ordered list is simply <ol> without extra attributes or incorrect tag names.

3. Final Answer:

   <ol> -> Option C

4. Quick Check:

   Correct ordered list tag = <ol> [OK]

Hint: Ordered lists start with <ol>, no extra attributes needed [OK]

Common Mistakes:

• Using non-standard tags like <orderedlist>
• Adding type attribute to <ul> for numbers
• Confusing <ul> and <ol> tags

3. What will be the visual output of this HTML code?

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

medium

A. A bulleted list with items: First, Second, Third

B. An error because <li> tags are not allowed inside <ol>

C. Plain text showing the tags and items

D. A numbered list with items: 1. First 2. Second 3. Third

Solution

1. Step 1: Understand the <ol> and <li> relationship

   The <ol> tag creates a numbered list, and each <li> is a list item.

2. Step 2: Predict the rendered output

   The browser will show a numbered list: 1. First, 2. Second, 3. Third.

3. Final Answer:

   A numbered list with items: 1. First 2. Second 3. Third -> Option D

4. Quick Check:

   Ordered list with
5. items = numbered list [OK]

Hint: Ordered lists show numbers before each <li> item [OK]

Common Mistakes:

• Thinking <ol> creates bullets instead of numbers
• Expecting raw HTML code to show on page
• Believing <li> tags are invalid inside <ol>

4. Identify the error in this HTML snippet:

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</ol>
</li>

medium

A. The closing </li> tag is misplaced after the closing </ol> tag

B. The <ol> tag should be <ul>

C. Missing <li> tags for each item

D. No errors, this is valid HTML

Solution

1. Step 1: Check tag nesting order

   Each <li> must open and close inside the <ol>. Here, the last </li> is after </ol>, which breaks proper nesting.

2. Step 2: Identify correct closing order

   The last list item should close before the ordered list closes. The misplaced closing tag causes invalid HTML.

3. Final Answer:

   The closing </li> tag is misplaced after the closing </ol> tag -> Option A

4. Quick Check:

   List items must close before the list closes [OK]

Hint: Close all <li> tags before closing <ol> [OK]

Common Mistakes:

• Closing <li> after
• Mixing <ul> and <ol> tags incorrectly
• Forgetting to close <li> tags

5. You want to start an ordered list at number 5 instead of 1. Which attribute should you add to the <ol> tag to do this?

hard

A. value="5"

B. start="5"

C. number="5"

D. count="5"

Solution

1. Step 1: Recall the attribute to set starting number

   The start attribute on <ol> sets the first number in the list.

2. Step 2: Confirm correct attribute usage

   Using start="5" will make the list begin numbering at 5.

3. Final Answer:

   start="5" -> Option B

4. Quick Check:

   Use start attribute to set list start number [OK]

Hint: Use start="number" on <ol> to begin numbering there [OK]

Common Mistakes:

• Using value or number attributes which don't exist on <ol>
• Trying to set start on <li> instead of <ol>
• Confusing with CSS counters