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.

Practice

1. Which HTML tag represents the largest heading on a webpage?

easy

A. <h5>

B. <h1>

C. <h3>

D. <h6>

Solution

1. Step 1: Understand heading sizes

   HTML headings range from <h1> (largest) to <h6> (smallest).

2. Step 2: Identify the largest heading tag

   The <h1> tag is the biggest and most important heading on a page.

3. Final Answer:

   <h1> -> Option B

4. Quick Check:

   Largest heading = <h1> [OK]

Hint: Remember: h1 is biggest, h6 is smallest [OK]

Common Mistakes:

• Confusing h3 or h5 as largest heading
• Thinking h6 is the biggest heading
• Mixing heading tags with paragraph tags

2. Which of the following is the correct syntax for a level 3 heading in HTML?

easy

A. <h2>Heading Text</h2>

B. <h33>Heading Text</h33>

C. <heading3>Heading Text</heading3>

D. <h3>Heading Text</h3>

Solution

1. Step 1: Recall heading tag syntax

   HTML heading tags use the format <hN>...</hN> where N is a number 1 to 6.

2. Step 2: Identify correct level 3 heading

   The correct tag for level 3 heading is <h3> with matching closing tag </h3>.

3. Final Answer:

   <h3>Heading Text</h3> -> Option D

4. Quick Check:

   Correct syntax for h3 = <h3>...</h3> [OK]

Hint: Use h1 to h6 tags with matching closing tags [OK]

Common Mistakes:

• Using invalid tags like <heading3>
• Mismatched opening and closing tags
• Using numbers incorrectly like <h33>

3. What will be the visual result of this HTML code?

<h1>Title</h1>
<h4>Subtitle</h4>
<h2>Section</h2>

medium

A. All headings appear the same size

B. Title is smallest, Subtitle is largest, Section is medium

C. Title is largest, Section is medium, Subtitle is smallest

D. Subtitle is largest, Title is medium, Section is smallest

Solution

1. Step 1: Understand heading size order

   Heading sizes go from <h1> largest to <h6> smallest.

2. Step 2: Compare given headings

   <h1> Title is largest, <h2> Section is medium, <h4> Subtitle is smaller than h2.

3. Final Answer:

   Title is largest, Section is medium, Subtitle is smallest -> Option C

4. Quick Check:

   h1 > h2 > h4 sizes [OK]

Hint: Lower number means bigger heading size [OK]

Common Mistakes:

• Assuming h4 is bigger than h2
• Thinking all headings have same size
• Mixing order of heading sizes

4. Identify the error in this HTML snippet:

<h2>Welcome<h2>

medium

A. Missing closing tag should be </h2>

B. Tag <h2> is not valid in HTML

C. Heading tags cannot contain text

D. Opening tag should be <h3> instead

Solution

1. Step 1: Check tag correctness

   The opening tag is <h2>, but the closing tag is incorrectly written as <h2> instead of </h2>.

2. Step 2: Identify proper closing tag

   HTML requires closing tags to have a slash, so it should be </h2> to close the heading properly.

3. Final Answer:

   Missing closing tag should be </h2> -> Option A

4. Quick Check:

   Closing tags need slash / [OK]

Hint: Closing tags must have a slash before tag name [OK]

Common Mistakes:

• Forgetting the slash in closing tags
• Thinking heading tags can't have text
• Confusing tag names like h2 and h3

5. You want to create a page with a main title, two sections each with subtitles, and sub-subtitles under each subtitle. Which heading order is best practice for accessibility and SEO?

hard

A. <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4>

B. <h3>Main Title</h3>, <h1>Section</h1>, <h2>Subtitle</h2>, <h4>Sub-subtitle</h4>

C. <h4>Main Title</h4>, <h3>Section</h3>, <h2>Subtitle</h2>, <h1>Sub-subtitle</h1>

D. <h2>Main Title</h2>, <h3>Section</h3>, <h4>Subtitle</h4>, <h5>Sub-subtitle</h5>

Solution

1. Step 1: Understand heading hierarchy

   Headings should start with <h1> for main title, then <h2> for sections, <h3> for subtitles, and <h4> for sub-subtitles.

2. Step 2: Check options for correct order

   <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4> follows the correct descending order from h1 to h4, which helps screen readers and SEO understand content structure.

3. Final Answer:

   <h1>Main Title</h1>, <h2>Section</h2>, <h3>Subtitle</h3>, <h4>Sub-subtitle</h4> -> Option A

4. Quick Check:

   Proper heading order = h1, h2, h3, h4 [OK]

Hint: Use headings in descending order from h1 to h6 [OK]

Common Mistakes:

• Starting main title with h3 or lower
• Skipping heading levels randomly
• Using bigger numbers for main titles