Block-level elements in HTML - Browser Rendering Trace

Render Flow - Block-level elements

Read <div>

→Create DIV node

↓

Calculate width: fills container width

↓

Place on new line

↓

Render height based on content

↓

Paint background and border

↓

Composite to screen

The browser reads the HTML, creates block-level elements like <div>, places them on new lines filling the container width, calculates their height from content, then paints and composites them on screen.

Render Steps - 3 Steps

Code Added:<div>Block 1</div>

Before

→

After

[Block 1__________________________]
[new line below]

The first <div> creates a block box that fills the container width and starts on a new line.

🔧 Browser Action:Creates block box, triggers reflow to allocate full width and new line

Code Sample

Three block-level elements stacked vertically, each on its own line filling the container width.

HTML

<div>Block 1</div>
<div>Block 2</div>
<p>Paragraph block</p>

Render Quiz - 3 Questions

After step 2, how are the two <div> elements arranged visually?

A Side by side horizontally

B Stacked vertically, each on its own line

C Overlapping each other

D Hidden from view

Common Confusions - 2 Topics

Why does my <div> always start on a new line?

Because <div> is a block-level element, it always creates a box that starts on a new line and fills the container width.

💡 Block elements stack vertically, each on its own line.

Why can't I put two <div> elements side by side by default?

Block elements take full width by default, so they stack vertically. To place side by side, you must change their display or use layout techniques.

💡 Block = full width, inline = side by side.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<div>	block	Generic container	Starts on new line, fills container width
<p>	block	Paragraph of text	Starts on new line, fills container width
<h1>	block	Top-level heading	Starts on new line, fills container width
<section>	block	Thematic grouping	Starts on new line, fills container width

Concept Snapshot

Block-level elements start on a new line and fill the container width by default. Common block elements: <div>, <p>, <h1>, <section>. They stack vertically, one after another. To place side by side, change display or use layout techniques. Block elements create boxes that affect layout flow.