Self-Closing Tags in HTML5: Void vs Non-Void Elements

You will learn the difference between void and non-void HTML elements, why /> does not close ordinary HTML elements, and when the slash is acceptable. You will also see how HTML differs from XHTML/XML and how to write reliable markup.

HTML elements are divided into categories that affect how they are written.

• Void elements cannot have content and cannot have an end tag. Examples include br, img, input, meta, and link.
• Non-void elements can contain content, even if they are empty right now. Examples include div, span, p, textarea, and button.

In the HTML syntax of HTML5, a non-void element must use an explicit end tag when it is closed:

<div id="myDiv"></div>
<span id="mySpan"></span>
<textarea id="someTextMessage"></textarea>

Writing /> does not make a normal HTML element self-closing. A validator reports this as invalid self-closing syntax on a non-void HTML element. HTML parsers generally ignore the slash and treat it as an opening tag.

For void elements, both of these forms are accepted in HTML:

<br>
<br />

The slash in <br /> is optional in HTML and does not make the element void; br is already void by definition. The common modern HTML style is to omit it: <br>.

This matters because browsers try to recover from invalid markup. Recovery can produce a page that looks very different from the source code, especially when an unclosed div, span, or textarea absorbs later content.

Think of an HTML element as a container.

• A void element is like a sealed single-use item, such as a light switch. It has no space inside it, so it does not need a closing lid.
• A non-void element is like a box. Even when the box is empty, you still open it and close it: <div></div>.

Writing <div /> in HTML is like putting a small slash on the box's opening label and assuming the box closes itself. The HTML parser does not treat that slash as a closing lid; it still considers the box open.

Void elements have no end tags:

<!-- Valid HTML -->
<img src="avatar.png" alt="User avatar">
<input type="email" name="email">
<br>

A trailing slash is also accepted for void elements in HTML, although it is optional:

<img src="avatar.png" alt="User avatar" />
<input type="email" name="email" />
<br />

Non-void elements need a start tag and an end tag:

<!-- Valid HTML -->
<div id="myDiv"></div>
<span id="mySpan">New</span>
<textarea id="message"></textarea>

Do not use this for normal HTML elements:

<!-- Invalid HTML syntax for these non-void elements -->
<div id="myDiv" />
<span id="mySpan" />
<textarea id="message" />

Even an empty non-void element must be explicitly closed with its matching end tag.

Consider this invalid HTML:

<div class="notice" />
<p>Saved successfully.</p>

What an HTML parser effectively does:

1. It reads <div class="notice" />.

2. Because div is a non-void HTML element, the /> does not close it.

3. The parser treats it much like this opening tag:

   <div class="notice">
   

4. It then reads the paragraph as content inside the still-open div.

5. Since there is no </div>, the browser closes the div later as part of error recovery, often at the end of its containing section or document.

Write the intended structure explicitly:

<div class="notice"></div>
<p>Saved successfully.</p>

A particularly dangerous case is textarea:

<textarea id="message" />
<p>This looks like markup, but it can become textarea text.</p>

Because the textarea was not actually closed, the parser can treat later characters as the textarea's content until it finds a real </textarea> end tag.

• Form controls: input is void, but textarea is not. Use <input> without an end tag, and use <textarea></textarea> with an end tag.
• Layout components: Empty placeholders for client-side rendering still need closing tags, such as <div id="app"></div>.
• Icons and media: img is void, so <img src="logo.svg" alt="Logo"> has no </img>.
• Templates and CMS output: Generated HTML should emit valid opening and closing tags so later page content is not accidentally nested.
• Email HTML: Email clients have inconsistent error recovery. Explicitly closing non-void elements reduces layout surprises.
• HTML parsing tools: Linters, validators, scrapers, and test tools produce more predictable results when the markup follows HTML rules.

In modern HTML codebases, developers usually follow these patterns:

• Write native void elements without a closing slash:

  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <img src="product.jpg" alt="Product photo">
  

• Always close ordinary elements, including empty ones:

  <main id="app"></main>
  <div class="loading-spinner"></div>
  

• Use a formatter and HTML linter to catch invalid markup before deployment.

• Be aware of framework conventions. JSX, used by React and similar tools, requires elements with no children to be syntactically closed:

  <img src={avatarUrl} alt="Profile" />
  <div className="divider" />
  

  JSX is not raw HTML. A JSX compiler converts it into DOM operations or HTML-compatible output. Do not copy JSX rules directly into an .html file: raw HTML needs <div></div>, not <div />.

• When embedding SVG in HTML, recognize that SVG uses XML-style rules. Self-closing SVG elements such as <path /> are normal in SVG, while ordinary HTML elements still follow HTML parsing rules.

Assuming /> closes every element

<!-- Incorrect in HTML -->
<section />
<p>Content</p>

The section is not closed by />. Use:

<section></section>
<p>Content</p>

Adding end tags to void elements

<!-- Incorrect -->
<img src="cat.jpg" alt="Cat"></img>
<input type="text"></input>

Void elements must not have end tags. Write:

<img src="cat.jpg" alt="Cat">
<input type="text">

Treating textarea like input

<!-- Incorrect -->
<textarea name="comment" />

textarea is a container for text, so it needs an end tag:

<textarea name="comment"></textarea>

Confusing XHTML with HTML

In XML-based XHTML, <div /> is a self-closing element. In a document parsed as HTML, it is invalid for div and does not have the same meaning. Check whether the document is actually served and parsed as HTML or XML.

Omitting the space before a slash after an unquoted attribute

Avoid this form:

<img src=https://example.com/logo.svg/>

The slash can become part of the unquoted src value. Prefer quoted attributes and, in HTML, simply omit the slash:

<img src="https://example.com/logo.svg" alt="Logo">

The key question is not whether an element currently has content. The question is whether it is a void HTML element. A div with no content is still non-void.

• Void HTML elements have no end tag: br, img, input, meta, link, hr, source, area, base, col, embed, param, track, wbr.

• Valid void-element styles in HTML:

  <br>
  <br />
  

• Prefer <br> in ordinary HTML; the slash is optional.

• Non-void HTML elements require an end tag, even when empty:

  <div></div>
  <span></span>
  <textarea></textarea>
  

• Invalid in HTML:

  <div />
  <textarea />
  

• /> on a non-void HTML element does not reliably close it; browsers generally ignore the slash.

• Do not write </img> or </input>.

• XHTML/XML and JSX have different self-closing rules from raw HTML.

• Quote attribute values, especially if using the optional slash on a void element.

Is <div /> valid HTML5?

No. div is a non-void HTML element, so it needs an explicit end tag: <div></div>.

Does <br /> work in HTML5?

Yes. A trailing slash is accepted on a void element such as br, but it is optional. <br> is also valid and is the usual HTML form.

Why does a browser seem to accept <div />?

Browsers recover from invalid HTML instead of usually stopping with an error. They generally treat <div /> as an opening <div>, which can cause unexpected nesting.

Can I write </img> to close an image?

No. img is a void element and must not have an end tag.

Is <textarea /> self-closing in HTML?

No. textarea is non-void and requires </textarea>. Failing to close it can cause later markup to be interpreted as textarea content.

Why does React allow <div />?

React commonly uses JSX, not raw HTML syntax. JSX allows self-closing component and element syntax, then compiles it. In a plain .html file, use <div></div>.

Does XHTML allow self-closing non-void elements?

Yes, when the document is parsed as XML/XHTML. XML recognizes <div /> as a self-closing element. This rule should not be assumed for documents parsed as HTML.

Should I use <img> or <img />?

Both are accepted in HTML for a void img element. Choose one project convention; <img> is the standard HTML-style form.

• Void elements — The element category that determines whether an end tag is forbidden.
• HTML start tags and end tags — The basic syntax needed to create and close normal elements.
• HTML parsing and error recovery — Explains why invalid markup may still appear to work in browsers.
• XHTML and XML syntax — Uses true self-closing syntax for any XML element.
• JSX syntax — Uses self-closing syntax in React and other JavaScript UI tooling.
• SVG in HTML — SVG is commonly embedded in HTML but has XML-oriented element syntax.
• HTML validation — Validator tools identify markup that can lead to inconsistent browser behavior.
• Form elements — Helps distinguish void input from non-void textarea and button.