Headings (h1–h6) in HTML - Browser Rendering Trace

Render Flow - Headings (h1–h6)

Read <h1>

→Create H1 node

↓

Read <h2>

→Create H2 node

↓

Read <h6>

→Create H6 node

The browser reads each heading tag from h1 to h6, creates a node for each, adds the text inside, and closes the tag, building the DOM tree with heading elements.

Render Steps - 6 Steps

Code Added:<h1>Heading 1</h1>

Before

→

After

[H1]
Heading 1

Adding the h1 element creates a large, bold heading at the top, visually distinct as the main title.

🔧 Browser Action:Creates H1 element node and applies default browser styles for h1.

Code Sample

This code displays six headings with decreasing size and importance from h1 to h6.

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Render Quiz - 3 Questions

After applying step 3, what do you see visually?

A Three headings side by side with equal size

B One large heading only

C Three headings stacked vertically, each smaller than the one above

D Three headings stacked but all same size

Common Confusions - 3 Topics

Why do all headings look bold even if I don't add font-weight?

Browsers apply default bold styling to all heading tags to show importance visually.

💡 Headings are bold by default; you only need to change font-weight if you want different style.

Why does h3 look smaller than h2 but still bold?

Headings use decreasing font sizes from h1 to h6 but keep bold font-weight by default.

💡 Size changes with heading level, but bold stays unless overridden.

Can I use headings just to make text bigger?

Headings have semantic meaning for structure and accessibility, not just size. Use CSS for styling if no heading meaning.

💡 Use headings for document structure, not just visual size.

Property Reference

Element	Default Font Size	Default Font Weight	Semantic Meaning	Visual Behavior
h1	2em	bold	Main page heading	Largest and most important heading
h2	1.5em	bold	Section heading	Second largest heading
h3	1.17em	bold	Subsection heading	Smaller than h2
h4	1em	bold	Sub-subsection heading	Smaller than h3
h5	0.83em	bold	Minor heading	Smaller than h4
h6	0.67em	bold	Least important heading	Smallest heading

Concept Snapshot

Headings h1 to h6 create a clear content hierarchy. Each heading is bold by default with decreasing font size from h1 (largest) to h6 (smallest). Use headings to organize content semantically, not just for size. Browsers apply default spacing and bold styling to headings. Multiple h1 tags are allowed but should be used thoughtfully for structure.