0
0
HTMLmarkup~5 mins

Proper indentation in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Proper indentation helps you and others read your code easily. It shows the structure of your webpage clearly.

When writing HTML to organize nested tags like <code>&lt;div&gt;</code> inside <code>&lt;section&gt;</code>.
When working with other developers so everyone understands the code quickly.
When debugging your webpage to find errors faster.
When preparing code for future updates or changes.
When submitting code for review or learning purposes.
Syntax
HTML
<parent-element>
  <child-element>
    <nested-child-element></nested-child-element>
  </child-element>
</parent-element>
Use two or four spaces for each level of indentation; avoid mixing tabs and spaces.
Indent nested elements inside their parent elements to show hierarchy.
Examples
A simple example showing a paragraph inside a div with proper indentation.
HTML
<div>
  <p>Hello World</p>
</div>
List items are indented inside the unordered list to show they belong there.
HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
Navigation link is indented inside the nav, which is inside the header.
HTML
<header>
  <nav>
    <a href="#">Home</a>
  </nav>
</header>
Sample Program

This HTML page uses proper indentation to show the structure clearly. The <article> is inside the <section>, and the heading and paragraph are inside the article.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proper Indentation Example</title>
</head>
<body>
  <section>
    <article>
      <h1>Welcome</h1>
      <p>This paragraph is inside an article, which is inside a section.</p>
    </article>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Consistent indentation makes your code easier to maintain and understand.

Most code editors can auto-indent your code to save time.

Proper indentation does not affect how the webpage looks but helps with code clarity.

Summary

Indent nested HTML elements to show their relationship.

Use spaces consistently for indentation, not tabs mixed with spaces.

Proper indentation helps you and others read and maintain code easily.