Proper indentation in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is proper indentation in HTML?

Proper indentation means using spaces or tabs to organize HTML code so that nested elements are visually grouped. This makes the code easier to read and understand.

beginner

Why should you use proper indentation in your HTML code?

Proper indentation helps you and others quickly see the structure of the webpage. It makes finding errors easier and improves teamwork when sharing code.

beginner

How many spaces are commonly used for each indentation level in HTML?

Most developers use 2 or 4 spaces per indentation level. The key is to be consistent throughout your code.

beginner

Show an example of properly indented HTML for a simple list.

• Item 1
• Item 2

Each

is indented inside the

to show it belongs there.

beginner

What problems can happen if HTML is not properly indented?

Without proper indentation, code becomes hard to read and debug. It can cause confusion about which tags belong inside others, leading to mistakes in the webpage layout.

What does proper indentation in HTML help with?

A Changing how the webpage looks

B Adding colors to text

C Making code easier to read

D Making the page load faster

Proper indentation organizes code visually but does not affect webpage appearance or speed.

Which is a common number of spaces used for one indentation level in HTML?

A 1 space

B 2 or 4 spaces

C 5 spaces

D 10 spaces

2 or 4 spaces per level is standard for readability and consistency.

How should nested HTML tags be indented?

A At the same level as parent tags

B Indented randomly

C Not indented at all

D Indented inside their parent tags

Nested tags should be indented inside their parent tags to show hierarchy.

What is a negative effect of not using proper indentation?

A Code becomes hard to read and debug

B Webpage will not display

C Browser crashes

D Text colors change

Lack of indentation makes code confusing and error-prone, but does not break the webpage display.

Which tool can help you check and fix indentation in HTML?

A Text editor with auto-format

B Browser Developer Tools

C Image editor

D Spreadsheet software

Many text editors can auto-format HTML to fix indentation automatically.

Explain why proper indentation is important in HTML and how it helps when writing code.

Think about how you read a book with clear paragraphs versus a wall of text.

Describe how you would indent nested HTML tags in a simple webpage.

Imagine putting smaller boxes inside bigger boxes, each inside the other.

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