Require elements to be closed in correct order

Rule ID:
close-order
Category:
HTML syntax and concepts
Standards:
  • HTML5
Fixable:
No

HTML requires elements to be closed in the correct order.

Rule details

Examples of incorrect code for this rule:

<main>
    <label>Lorem ipsum</label>
  </div> <!-- div closed but never opened -->
</main>
error: Stray end tag '</div>' (close-order)
  1 | <main>
  2 |     <label>Lorem ipsum</label>
> 3 |   </div> <!-- div closed but never opened -->
    |    ^^^^
  4 | </main>


1 error found.


<main>
  <h1> <!-- h1 opened but not closed -->
    Lorem ipsum <small>dolor sit amet</small>
</main>
error: Unclosed element '<h1>' (close-order)
  1 | <main>
> 2 |   <h1> <!-- h1 opened but not closed -->
    |    ^^
  3 |     Lorem ipsum <small>dolor sit amet</small>
  4 | </main>


error: End tag '</main>' seen but there were open elements (close-order)
  2 |   <h1> <!-- h1 opened but not closed -->
  3 |     Lorem ipsum <small>dolor sit amet</small>
> 4 | </main>
    |  ^^^^^


2 errors found.


<main>
  <h1>
    Lorem ipsum <small>dolor sit amet</small>
  </h1>
</div> <!-- opened as main but closed as div -->
error: Unclosed element '<main>' (close-order)
> 1 | <main>
    |  ^^^^
  2 |   <h1>
  3 |     Lorem ipsum <small>dolor sit amet</small>
  4 |   </h1>


error: Stray end tag '</div>' (close-order)
  3 |     Lorem ipsum <small>dolor sit amet</small>
  4 |   </h1>
> 5 | </div> <!-- opened as main but closed as div -->
    |  ^^^^


2 errors found.


<div>
  <!-- closed in wrong order -->
  <p>
    <strong>
  </p>
    </strong>
</div>
error: Unclosed element '<strong>' (close-order)
  2 |   <!-- closed in wrong order -->
  3 |   <p>
> 4 |     <strong>
    |      ^^^^^^
  5 |   </p>
  6 |     </strong>
  7 | </div>


error: End tag '</p>' seen but there were open elements (close-order)
  3 |   <p>
  4 |     <strong>
> 5 |   </p>
    |    ^^
  6 |     </strong>
  7 | </div>


2 errors found.


<p>
  <address></address>
</p> <!-- p is already implicitly closed by address tag -->
error: Stray end tag '</p>' (close-order)
  1 | <p>
  2 |   <address></address>
> 3 | </p> <!-- p is already implicitly closed by address tag -->
    |  ^^


1 error found.

Examples of correct code for this rule:

<p><strong></strong></p>

<div></div>