Nesting and Identation

🧩 HTML Nested Lists and Indentation

📚 What Is a Nested List?

A nested list means putting one list inside another list. For example:

<ul>
  <li>Item A</li>
  <li>Item B
    <ul>
      <li>Sub-item B1</li>
      <li>Sub-item B2</li>
    </ul>
  </li>
  <li>Item C</li>
</ul>

In this example:

• A main list has three items: A, B, C

• Inside item B, we added another list with B1 and B2

👀 How It Looks

On the website, the nested list will be indented, which helps show the structure clearly.

✍️ How to Write Nested Lists

• First, write your main list (<ul> or <ol>)

• Inside a <li>, you can write another <ul> or <ol> after the text

• Always open and close tags properly

• Keep your code indented so it’s easier to read

🧠 Example of Deep Nesting

<ul>
  <li>A</li>
  <li>B
    <ol>
      <li>B1</li>
      <li>B2
        <ul>
          <li>B2a
            <ul>
              <li>B2aa</li>
              <li>B2ab</li>
            </ul>
          </li>
          <li>B2b</li>
          <li>B2c</li>
        </ul>
      </li>
      <li>B3
        <ol>
          <li>B31</li>
          <li>B32</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>C</li>
</ul>

🔧 Why Indentation Is Important

Proper indentation makes your code:

• Easy to read

• Easy to understand

• Easy to debug

If tags are misplaced, indentation helps you spot where something is missing.

💡 VS Code Tip

When using VS Code, press:

• Ctrl + S (Windows)

• Cmd + S (Mac)

It will automatically format and indent your code nicely.

🧪 Challenge Time!

Try making the above nested list on your own. Don’t just copy — type it out and see how it looks in your browser. It’ll help you learn faster!

✅ Final Note

Debugging and fixing code is a normal part of learning. Use the indentation and VS Code tools to help you. Practice regularly, and you’ll get better day by day!