Warning Self-closing syntax on a non-void element

Why <div /> doesn't actually close a <div> in HTML5, unlike XML or JSX, and what the parser does instead.

The validator flags a start tag ending in /> where the element is not one of HTML's void elements (img, br, input, hr, meta, link, and a handful of others that never have content or a closing tag).

Example

<!-- Looks closed, but isn't -->
<div class="card" />
<p>This ends up nested inside the div above.</p>

<!-- Right -->
<div class="card"></div>
<p>This is a sibling, as intended.</p>

Why it matters

XML, XHTML, and JSX all treat a trailing /> as meaningful on any element — it closes the tag immediately, with no content. The HTML5 parser doesn't work that way: the trailing slash is only recognized on void elements, where it's optional and purely stylistic (<br> and <br /> are identical). On anything else, the slash is silently ignored and the element stays open exactly as if you'd written <div class="card"> with no slash at all — everything that follows becomes a child of it until a real closing tag appears or the parser's error-recovery rules infer one. This is one of the more common surprises for developers coming from React/JSX or XML-based templating.

Frequently asked questions

So is the trailing slash ever wrong to include?

It's harmless on void elements (img, br, input, etc.) where the HTML5 spec explicitly allows but doesn't require it — that's purely a style choice, often kept for XHTML-style consistency. It only actively causes a bug on non-void elements.

Why does this work in JSX then?

JSX compiles to createElement() calls, not to raw HTML text — the browser's HTML parser never sees the JSX source, so XML-style self-closing syntax is completely valid there. The gap only appears when writing raw .html files or HTML-as-a-string.