elementChildrenValidity

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

✅ This rule is included in the jsx logical and logicalStrict presets.

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

❌ Incorre

CE6Csp ansty="le--0:#D6DEEB;--1:#403F">53text contesp>CA<E6Cd ivclassNa="meco">d>d>d>CE6iCsp ansty="le--0:#D6DEEB;--1:#403F">53Invalid childrsp>CA<E6iCd ivclassNa="meco">d>d>d>CE6inpCd ivclassNa="meec-li">nt< sp ansty="le--1:#8844">CE6spCsp ansty="le--0:#D6DEEB;--1:#403F">53Not allowsp>CA<E6spCd>d ivclassNa="meec-li">CA<E6inpCd>d ivclassNa="meco">d>d>d>CE6Csp ansty="le--0:#E2817F;--1:#B238">3sp><4{sp ansty="le--0:#D6DEEB;--1:#403F">53expressi3<4}sp ansty="le--1:#8844">CA<E6Cd ivclassNa="meco">d>d>d>CE6meCd ivclassNa="meec-li">nt< sp ansty="le--1:#8844">CE6dCsp ansty="le--0:#D6DEEB;--1:#403F">53Contesp>CA<E6dCd>d ivclassNa="meec-li">CA<E6meCd>d ivclassNa="meco">d>d>d>

<44AE spans="tyle--0:#7F">DECDBC<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6img spans="tyle--0:#7F">D61B<0src spans="tyle--0:#C792EA;--1:#88">4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dphoto<.jpg spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECDBCdi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6D61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dview1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0con4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dwidth=device-w1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">Dde<44AE spans="tyle--0:#7F">DECDBC3F<53 spans="tyle--0:#D6DEEB;--1:#40">3F53Text content around void elem<44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D

di>

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

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