Validate element content model (element-permitted-content)

HTML defines what content is allowed under each type of element.

Rule details

Examples of incorrect code for this rule:

<!-- <li> is only allowed with <ul> or <ol> as parent -->
<div>
    <li>foo</li>
</div>

<!-- interactive elements cannot be nested -->
<button>
    <a href="#">Lorem ipsum</a>
</button>
error: <li> element is not permitted as content under <div> (element-permitted-content) at inline:3:6:
  1 | <!-- <li> is only allowed with <ul> or <ol> as parent -->
  2 | <div>
> 3 |     <li>foo</li>
    |      ^^
  4 | </div>
  5 |
  6 | <!-- interactive elements cannot be nested -->


error: <a> element is not permitted as a descendant of <button> (element-permitted-content) at inline:8:6:
  6 | <!-- interactive elements cannot be nested -->
  7 | <button>
> 8 |     <a href="#">Lorem ipsum</a>
    |      ^
  9 | </button>


2 errors found.

Examples of correct code for this rule:

<ul>
    <li>foo</li>
</ul>

<button>
    Lorem ipsum
</button>

Version history