Nesting & Indentation

HTML elements can contain other elements. Placing one element inside another is called nesting.

Parent and child elements

When element B is placed inside element A, A is the parent and B is the child.

<div>
  <p>This paragraph is a child of the div.</p>
</div>

Elements at the same level inside a parent are siblings.

<div>
  <h2>Title</h2>
  <p>Paragraph.</p>
</div>

Here <h2> and  are siblings — both children of <div>.

Correct nesting

Elements must open and close in the right order. If you open B inside A, you must close B before you close A.

Correct:

<p>This is <strong>important</strong> text.</p>

Opening order:  then . Closing order:  then . Last opened, first closed.

Incorrect:

<p>This is <strong>important</p></strong>

 closes before  — the tags are interleaved, not nested. Browsers will try to recover from this, but the result is unpredictable.

Multiple levels of nesting

Nesting can go many levels deep:

<div>
  <section>
    <h2>About</h2>
    <p>Some text with an <a href="more.html">inline link</a>.</p>
  </section>
</div>

Each child is indented one level deeper than its parent.

Why indentation matters

Indentation does not affect how the browser renders the page. It exists entirely for the person reading the code.

Compare these two — identical to the browser, very different to read:

Hard to read:

<div><section><h2>About</h2><p>Some text.</p></section></div>

Easy to read:

<div>
  <section>
    <h2>About</h2>
    <p>Some text.</p>
  </section>
</div>

Use 2 spaces per indent level. This is the most common convention for HTML.

Exercise

Open index.html in VS Code.

Part 1 — Check your own indentation. Every element inside <html> should be indented 2 spaces. Every element inside <head> or <body> should be indented 4 spaces (2 levels). Verify this is true in your file and fix anything that is off.

Part 2 — Add a sibling. Inside <body>, add a second  below the one already there, indented to the same level:

<body>
  <h1>Your topic</h1>
  <p>Your first sentence.</p>
  <p>I am learning HTML.</p>
</body>

Part 3 — Spot and fix the nesting error. The snippet below has a nesting mistake. Replace the contents of your <body> with it temporarily, save, and open the file in your browser — notice how the browser guesses at what you meant. Then fix the closing tag order so it is correct, and reload to compare.

<p>This word is <strong>important.</p></strong>

The fix:  must come before  because  was opened after .

Recap

Nesting means placing elements inside other elements.
The outer element is the parent; the inner element is the child.
Elements at the same level inside a parent are siblings.
Always close elements in reverse order: last opened, first closed.
Indentation (2 spaces per level) has no effect on rendering but is essential for readable code.