LESSON 2.9

HTML Indentation and Comments

Write HTML that is easy to read and understand

Learn how to indent nested HTML elements and use comments to explain your code, two habits that set professional developers apart.

💡 The Concept

HTML indentation and comments are two of the most important professional habits you can build, even though browsers ignore both completely. Indenting your code is one of the most important professional habits you can build. Browsers do not care about indentation and will render your page the same either way. But other developers do care, and so do potential employers. On real websites, you can end up with dozens of nested elements. Without proper indentation, a single missing closing tag can take forever to track down. With it, the structure of your page is obvious at a glance.

HTML Indentation

In HTML, each nested element should be indented one level deeper than its parent. Use a tab (or consistent spaces) for each level:

<main>
   <p>This is a paragraph</p>
   <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
   </ul>
</main>

Notice how the <ul> is indented inside <main>, and the <li> items are indented inside the <ul>. Each level of nesting gets one more level of indentation.

HTML Comments

Code comments let you leave notes in your code that are completely invisible to website visitors. They are useful for explaining your reasoning, leaving reminders for yourself, or communicating with other developers on the same project.

HTML comments start with <!-- and end with -->:

<!-- This is a comment -->

A good comment explains something that is not obvious from the code itself:

<!-- This span exists to target the company name with CSS -->
<span class="co-name">Acme Corp</span>

Avoid commenting on things that are already self-explanatory:

<!-- This is my heading -->  ← not useful
<h1>Welcome to My Site</h1>

🎬 The Video

This video covers both HTML and CSS indentation and comments. It was recorded to cover both topics together, so you will also see the CSS portion, which is covered separately in Lesson 3.10.

Let’s Do It

Copy the code below into your editor and add proper indentation:

<main>
<h2>Minneapolis Lakes</h2>
<ul>
<li>Lake Harriet</li>
<li>Lake of the Isles</li>
<li>Bde Maka Ska</li>
<li>Cedar Lake</li>
<li>Lake Nokomis</li>
</ul>
</main>

Step 1: Go to JSFiddle.

Step 2: Copy the unindented code above into the HTML panel.

Step 3: Add proper indentation — indent each nested element one level deeper than its parent.

Step 4: Run JSFiddle to confirm your page still looks correct. Check your work against the screenshot below.

Frequently Asked Questions

What makes a good HTML comment?

Comment on the <em>why</em>, not the <em>what</em>. A comment like <code><!– paragraph –></code> above a <code><p></code> tag tells another developer nothing they could not already see. A comment like <code><!– Contact form: requires PHP on the server to function –></code> tells them something genuinely useful. Good comments explain purpose, context, or anything that is not obvious from the code itself.

How do I know when to add a comment?

Ask yourself: if you came back to this code in six months, would you still know what it does? If the answer is no, add a comment. You do not need to comment every line, but any section that has a specific purpose, a workaround, or a dependency on something external is worth a note.

Does indentation affect how my page looks in the browser?

No. Browsers ignore all whitespace, including indentation and blank lines. Your page will look exactly the same whether your code is perfectly indented or written on a single line. Indentation exists entirely for the benefit of the developer reading the code.

Is there a rule for how many spaces to use for indentation?

There is no universal rule, but one tab or two spaces per level is the most common convention. The most important thing is to be consistent throughout your entire file. Mixing tabs and spaces, or switching between two and four spaces, makes code harder to read than no indentation at all.

What happens if I forget to close a tag — will indentation help me find it?

Yes, and this is one of the main reasons indentation matters. When your code is properly indented, each closing tag lines up visually with its opening tag. A missing closing tag breaks that pattern and stands out immediately. Without indentation, a missing tag in a page with dozens of nested elements can take a very long time to find.

Before You Move On

Congratulations! You have completed the HTML Fundamentals lessons. You now know how to structure a web page, add headings, paragraphs, lists, links, images, and semantic elements — the building blocks of every website on the internet. Before moving on, test your knowledge with these exercises:

When you are ready, the next category of lessons is CSS Fundamentals, where you will learn how to style and design your pages with color, fonts, layout, and more.

Joystick Junkies Lab

If you would like to practice what you have learned, you can work on the Lab 2 section of Joystick Junkies. Joystick Junkies is a website about video games I created for my web development students. The website looks will look like this when completed:

★ Key Takeaways

Clean code is easier to read and much easier to fix when something breaks. This lesson covered how to indent your HTML and use comments to leave notes inside your code. Up next is Introduction to CSS, where you will start adding style to your web pages. CSS is what turns plain HTML into something that actually looks good.

Next Lesson: Introduction to CSS and CSS Syntax

← Back to HTML Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons