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

If your application is a rare one that violates HTML standards and places invalid children inside standard elements, this rule may be counterproductive for you.

Further Reading

• MDN: Void elements
• HTML Standard: Void elements

Equivalents in Other Linters

• Deno: jsx-void-dom-elements-no-children
• ESLint: react/void-dom-elements-no-children