Proper indentation in HTML - Browser Rendering Trace

Render Flow - Proper indentation

Read <html>

↓

Create HTML node

↓

Read <body>

↓

Create BODY node as child

↓

Read <div>

↓

Create DIV node as child

↓

Read <p>

↓

Create P node as child

↓

Add text content

↓

Close P

↓

Close DIV

↓

Close BODY

↓

Close HTML

The browser reads the HTML line by line, creating a tree of elements. Indentation in code helps humans see this tree structure clearly but does not affect how the browser builds the DOM.

Render Steps - 3 Steps

Code Added:Add <html> and <body> tags

Before

[empty page]

→

After

[Browser window]
  (blank white page)

The browser creates the root HTML and body elements, showing a blank page as no visible content is added yet.

🔧 Browser Action:Creates DOM root nodes

Code Sample

This code produces a simple webpage with a paragraph inside a div, properly indented for readability.

HTML

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

Render Quiz - 3 Questions

After step 3, what do you see on the page?

A An error message

B A blank white page

C The text 'Hello, world!' displayed

D Only a div border

Common Confusions - 2 Topics

Does indentation change how the page looks in the browser?

No, indentation is only for humans to read code better. The browser ignores spaces and line breaks outside text content.

💡 Think of indentation as neat handwriting, not paint on the wall.

Why does my code look messy if I don't indent?

Without indentation, nested elements look like a flat list, making it hard to see parent-child relationships.

💡 Indent nested tags to show the tree structure clearly.

Property Reference

Indentation Style	Effect on Browser	Effect on Developer	Common Practice
No indentation	No effect	Hard to read nested structure	Avoid
Two spaces	No effect	Clear and compact	Common in HTML
Four spaces	No effect	Very clear but more space	Also common
Tabs	No effect	Depends on editor settings	Used by some teams

Concept Snapshot

Proper indentation: - Uses spaces or tabs to show nested HTML structure - Does NOT affect browser rendering - Helps developers read and maintain code - Common styles: 2 or 4 spaces - Indent child elements inside parents - Keep consistent style for clarity

Practice

1. Why is proper indentation important in HTML code?

easy

A. It changes how the webpage looks in the browser.

B. It makes the webpage load faster.

C. It helps make the code easier to read and understand.

D. It is required for the browser to display the page.

Solution

1. Step 1: Understand the role of indentation

   Indentation organizes code visually but does not affect browser rendering.

2. Step 2: Identify the main benefit

   Proper indentation helps developers read and maintain the code easily.

3. Final Answer:

   It helps make the code easier to read and understand. -> Option C

4. Quick Check:

   Indentation improves readability = B [OK]

Hint: Indent nested tags to show structure clearly [OK]

Common Mistakes:

• Thinking indentation changes webpage appearance
• Mixing tabs and spaces causing inconsistent look
• Ignoring indentation making code hard to read

2. Which of the following HTML snippets shows proper indentation?

easy

A. <div>\n<p>Hello</p>\n</div>

B. <div>\n <p>Hello</p>\n</div>

C. <div>\n <p>Hello</p>\n </div>

D. <div>\n <p>Hello</p>\n </div>

Solution

1. Step 1: Check indentation consistency

   <div>\n <p>Hello</p>\n</div> uses two spaces to indent the <p> tag inside <div>, showing clear nesting. Closing tag aligns with opening.

2. Step 2: Compare other options

   B has no indentation for <p>; C incorrectly indents the closing </div> tag with four spaces; D indents both <p> and closing </div> with one space, misaligning the closing tag.

3. Final Answer:

   <div>\n <p>Hello</p>\n</div> -> Option B

4. Quick Check:

   Consistent two-space indent = A [OK]

Hint: Indent child tags inside parent tags with consistent spaces [OK]

Common Mistakes:

• No indentation for nested tags
• Using inconsistent spaces for indentation
• Mixing tabs and spaces

3. What will the browser display when rendering this HTML code with proper indentation?

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

medium

A. An error message because of indentation.

B. Plain text showing the tags and words.

C. A numbered list with Apple and Banana.

D. A bulleted list with Apple and Banana items.

Solution

1. Step 1: Understand HTML list tags

   The <ul> tag creates a bulleted list, and <li> tags are list items.

2. Step 2: Recognize indentation effect

   Indentation does not affect rendering; it only helps readability.

3. Final Answer:

   The browser shows a bulleted list with Apple and Banana items. -> Option D

4. Quick Check:

   <ul> with <li> = bulleted list [OK]

Hint: Indent list items inside <ul> or <ol> tags [OK]

Common Mistakes:

• Thinking indentation changes list style
• Confusing <ul> with numbered lists (<ol>)
• Expecting errors from indentation

4. Find the problem with indentation in this HTML snippet:

<div>
  <p>Welcome</p>
    <span>User</span>
</div>

medium

A. The <span> tag is over-indented compared to <p>.

B. There is no problem; indentation is correct.

C. The closing </div> tag is missing indentation.

D. The <p> tag is not indented inside the <div>.

Solution

1. Step 1: Compare indentation of sibling tags

   The <p> tag is indented two spaces inside the <div>; <span> is indented four spaces.

2. Step 2: Identify inconsistency

   Siblings inside <div> should have the same indentation level; here <span> is over-indented.

3. Final Answer:

   The <span> tag is over-indented compared to <p>. -> Option A

4. Quick Check:

   Siblings need equal indent = D [OK]

Hint: Indent sibling tags equally inside parent tags [OK]

Common Mistakes:

• Indenting only some child tags
• Ignoring sibling indentation consistency
• Assuming closing tags need indentation

5. You have this HTML code:

<section>
  <article>
    <h2>Title</h2>
  </article>
</section>

How should you indent a new <p> tag inside <article> to keep proper indentation?

hard

A. Indent the <p> tag with 4 spaces inside <article>.

B. Indent the <p> tag with 2 spaces inside <section>.

C. Do not indent the <p> tag; keep it at the same level as <section>.

D. Indent the <p> tag with 1 space inside <article>.

Solution

1. Step 1: Analyze current indentation levels

   <section> is at 0 spaces, <article> is indented 2 spaces, <h2> inside <article> is indented 4 spaces.

2. Step 2: Determine correct indent for new <p>

   Since <p> is inside <article>, it should match <h2> indentation, which is 4 spaces.

3. Final Answer:

   Indent the <p> tag with 4 spaces inside <article>. -> Option A

4. Quick Check:

   Child tags indent 2 spaces more than parent [OK]

Hint: Indent child tags 2 spaces more than their parent [OK]

Common Mistakes:

• Indenting less than parent level
• Indenting siblings inconsistently
• Using odd number of spaces