Nested elements in HTML - Browser Rendering Trace

Render Flow - Nested elements

Read <div>

↓

Create DIV node

↓

Read <p> inside DIV

↓

Create P node as child of DIV

↓

Add text node inside P

↓

Close P

↓

Close DIV

The browser reads the HTML from top to bottom, creating a tree of elements. Nested tags become child nodes inside their parent nodes, building a hierarchy.

Render Steps - 3 Steps

Code Added:<div>

Before

→

After

[DIV]
[     ]

The browser creates a box for the div element, which is empty so far.

🔧 Browser Action:Creates DIV node and layout box

Code Sample

A box (div) containing a paragraph with text inside it.

HTML

<div>
  <p>Hello, world!</p>
</div>

Render Quiz - 3 Questions

After step 2, what do you see inside the div?

A An empty box inside the div representing the paragraph

B Text 'Hello, world!' inside the div

C No change, still empty div

D Two sibling boxes inside the div

Common Confusions - 2 Topics

Why does the text appear indented inside the div?

The text is inside a paragraph, which by default has margin above and below, making it look indented inside the div (see step 3).

💡 Block elements like <p> add space around themselves inside their parent containers.

Why can't I see the div border if I don't add one?

A div is a block container but has no visible border or background by default, so it looks invisible unless styled.

💡 Add border or background color to see container boundaries.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
div	block	Generic container for flow content	Creates a block box that takes full width by default
p	block	Paragraph of text	Creates a block box with margin above and below by default
text node	inline	Text content inside elements	Displayed inline inside parent block or inline box

Concept Snapshot

Nested elements mean putting one HTML tag inside another. The browser builds a tree where inner tags become children of outer tags. <div> is a block container; <p> is a block for paragraphs. Text inside tags is shown inside their boxes. This creates a hierarchy visible in the page layout.