Unordered lists in HTML - Browser Rendering Trace

Render Flow - Unordered lists

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

The browser reads the <ul> tag, creates a list container node, then reads each <li> item inside, creating child nodes with bullet points before rendering the list visually.

Render Steps - 4 Steps

Code Added:<ul> element added

Before

→

After

[UL]
  (empty list container)

The browser creates a container for the unordered list but no items are visible yet.

🔧 Browser Action:Creates UL node in DOM tree

Code Sample

This code produces a vertical list with bullet points before each fruit name.

HTML

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Render Quiz - 3 Questions

After step 2, what do you see visually?

A Just the word 'Apple' with no bullet

B A bullet point followed by the word 'Apple'

C A numbered list starting with 1

D An empty space with no text

Common Confusions - 3 Topics

Why don't my list items show bullet points?

If CSS sets list-style-type to 'none' or removes default padding/margin on <ul>, bullets disappear. Check CSS styles.

💡 Bullets come from list-style-type and default padding on <ul>.

Why is my list horizontal instead of vertical?

If CSS uses flexbox or inline styles on <ul> or <li>, items may line up horizontally. Remove or adjust display styles.

💡 Default <ul> stacks items vertically; flexbox changes layout direction.

Why does the bullet appear too close to the text?

Default padding/margin on <ul> controls bullet spacing. Removing or changing these can shift bullet closer to text.

💡 Adjust padding-left on <ul> to control bullet indentation.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<ul>	block	Unordered list container	Displays vertical list with bullet points
<li>	list-item	List item inside <ul> or <ol>	Displays text with bullet or number marker
<ol>	block	Ordered list container	Displays vertical list with numbers (not bullets)

Concept Snapshot

Unordered lists use <ul> as container and <li> for items. Each <li> shows a bullet point by default. Bullets come from the browser's default list-style. Removing <ul> or changing CSS can hide bullets. Lists stack vertically by default.