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.