Proper indentation in HTML - Mini Project: Build & Apply

Proper Indentation in HTML

📖 Scenario: You are creating a simple webpage for a local bakery. The page will have a header, a main section with a welcome message, and a footer. Proper indentation will help keep your code neat and easy to read.

🎯 Goal: Build a small HTML page with correct indentation for each nested element so the structure is clear and easy to follow.

📋 What You'll Learn

Use semantic HTML5 tags:

,

, and

Indent nested elements by two spaces

Include a

inside the header with the text 'Welcome to Our Bakery!'

Include a

inside the main with the text 'Fresh bread and pastries every day.'

Include a inside the footer with the text '© 2024 Bakery Inc.'

💡 Why This Matters

🌍 Real World

Web developers always write HTML with proper indentation to make their code easy to read and maintain. This is important when working alone or with a team.

💼 Career

Understanding and applying proper indentation is a fundamental skill for front-end developers, ensuring clean, professional code that others can easily understand and update.

1

Create the basic HTML structure

Write the basic HTML skeleton with html, head, and body tags properly opened and closed. Use the lang="en" attribute in the html tag and include a meta charset="UTF-8" tag inside head. Indent nested tags by two spaces.

HTML

Hint

Remember to indent nested tags by two spaces to keep your code clean.

2

Add the header section

Inside the body, add a header tag. Inside the header, add a h1 tag with the exact text Welcome to Our Bakery!. Indent the header two spaces inside body and the h1 two spaces inside header.

HTML

Hint

Indent the header two spaces inside body and the h1 two spaces inside header.

3

Add the main content

Below the header, add a main tag. Inside main, add a p tag with the exact text Fresh bread and pastries every day.. Indent the main two spaces inside body and the p two spaces inside main.

HTML

  
    
  
  
    
      Welcome to Our Bakery!
    
    
  

Hint

Keep the indentation consistent: two spaces for main inside body and two spaces for p inside main.

4

Add the footer section

Below the main, add a footer tag. Inside footer, add a small tag with the exact text © 2024 Bakery Inc.. Indent the footer two spaces inside body and the small two spaces inside footer.

HTML

  
    
  
  
    
      Welcome to Our Bakery!
    
    
      Fresh bread and pastries every day.
    
    
  

Hint

Indent the footer two spaces inside body and the small two spaces inside footer.

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