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

Need a 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

Need a 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!
    
    
  

Need a 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.
    
    
  

Need a hint?

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