elementChildrenValidity

Reports void DOM elements that have children, which is invalid HTML.

✅ This rule is included in the jsx logical preset.

Void elements (also called self-closing or empty elements) are HTML elements that cannot have children. These elements, such as <br>, <img>, and <input>, are self-closing by definition and attempting to give them children violates the HTML specification.

Examples

❌ Incorrect

<br>text content</br>

<img>Invalid children</img>

<input>
  <span>Not allowed</span>
</input>

<hr>{expression}</hr>

<meta>
  <div>Content</div>
</meta>

✅ Correct

<br />

<img src="photo.jpg" />

<input type="text" />

<hr />

<meta name="viewport" content="width=device-width" />

<div>
  <br />
  Text content around void elements
</div>

Options

This rule is not configurable.

When Not To Use It

This rule should not be disabled as void elements with children violates the HTML specification and will cause unpredictable browser behavior.

Further Reading

• MDN: Void elements
• HTML Standard: Void elements

Equivalents in Other Linters

• Deno: jsx-void-dom-elements-no-children