Nested lists in HTML - Browser Rendering Trace

Render Flow - Nested lists

Read <ul>

→Create UL node

↓

Read <li>

→Create LI node as child of UL

↓

Add text to LI

↓

Read nested <ul>

→Create nested UL node as child of LI

↓

Read nested <li>

→Create nested LI node as child of nested UL

↓

Add text to nested LI

↓

Close nested LI

↓

Close nested UL

↓

Close LI

↓

Close UL

The browser reads the outer list, creates list nodes, then reads nested lists inside list items, building a tree of lists and list items.

Render Steps - 3 Steps

Code Added:<ul> and first <li> elements

Before

→

After

[• Fruits]
[ ]

The browser creates the outer list and the first list item 'Fruits'. It shows a bullet and the text.

🔧 Browser Action:Creates DOM nodes for UL and LI, paints text and bullet.

Code Sample

This code shows a bulleted list with two main items, each containing a smaller bulleted list inside.

HTML

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Render Quiz - 3 Questions

After render_step 2, what do you see inside the first list item?

A Text 'Fruits' with a nested bulleted list of 'Apple' and 'Banana' indented below

B Only the text 'Fruits' with no nested list

C A numbered list inside 'Fruits'

D No text or nested list visible

Common Confusions - 3 Topics

Why does the nested list appear indented?

Nested lists are inside list items, so the browser indents them to show hierarchy visually (see render_step 2).

💡 Nested lists always appear indented under their parent list item.

Why do nested list bullets look smaller or different?

Browsers use different bullet styles for nested lists to show levels clearly (render_step 2 and 3).

💡 Each nested list level uses a different bullet style by default.

Can I put text and a nested list inside the same <li>?

Yes, the text appears first, then the nested list is shown indented below it (render_steps 1 and 2).

💡 List items can contain text and nested lists together.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<ul>	block	Unordered list	Shows bullet points, vertical stacking, indented nested lists
<ol>	block	Ordered list	Shows numbers or letters, vertical stacking, indented nested lists
<li>	list-item	List item	Shows bullet or number, contains text or nested lists, indented if nested

Concept Snapshot

Nested lists are lists inside list items. <ul> creates bulleted lists; <li> holds items. Nested <ul> inside <li> shows indented sublists. Browsers indent nested lists automatically. Different bullet styles show nesting levels. Text and nested lists can coexist in one <li>.