HTML Guides for self-closing

In HTML, elements fall into two categories regarding their content model: void elements and non-void elements. Void elements like <img>, <br>, <hr>, <input>, <meta>, and <link> cannot have any content and never need a closing tag. Non-void elements like <div>, <p>, <span>, <select>, <textarea>, and <script> can (or must) contain content and require both an opening tag and a closing tag.

When you write <div /> or <select />, you might expect the browser to treat it as a complete, self-contained element — similar to how XML or XHTML would interpret it. However, the HTML parser does not work this way. According to the WHATWG HTML Living Standard, the /> on a non-void element is simply ignored. The browser treats <div /> as just <div> — an opening tag without a corresponding closing tag. This can lead to serious structural problems in your document, as the browser will keep looking for content and a closing tag, potentially swallowing subsequent elements as children.

This issue commonly arises when developers are accustomed to frameworks like React (JSX), where <Component /> syntax is standard, or when coming from an XML/XHTML background where any element can be self-closed. It also appears when developers mistakenly believe that an element with no intended content can be self-closed in HTML.

The consequences can be significant. The browser’s DOM tree may end up drastically different from what you intended, causing layout problems, broken functionality, and accessibility issues. For example, a self-closed <script /> tag won’t behave as expected — the browser will treat everything after it as the script’s content until it finds a </script> closing tag somewhere else in the document, effectively hiding your visible page content.

How to fix it

1. Remove the trailing slash from the non-void element’s opening tag.
2. Add a proper closing tag immediately after the opening tag if the element should be empty, or after its content.

The complete list of void elements in HTML is: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, and <wbr>. Only these elements may use self-closing syntax (and even for these, the / is optional in HTML).

Examples

Incorrect: Self-closing syntax on non-void elements

<div />

<select />
  <option value="1">one</option>
</select>

<span />

<textarea />

<script src="app.js" />

Each of these will trigger the warning. The validator ignores the slash and treats them as opening tags, meaning the browser expects content and a closing tag to follow.

Correct: Using proper closing tags

<div></div>

<select>
  <option value="1">one</option>
</select>

<span></span>

<textarea></textarea>

<script src="app.js"></script>

Correct: Self-closing syntax on void elements

Void elements can optionally use the trailing slash. Both forms below are valid:

<!-- With optional trailing slash -->

<img src="photo.jpg" alt="A photo" />
<br />
<input type="text" name="username" />

<!-- Without trailing slash (equally valid) -->

<img src="photo.jpg" alt="A photo">
<br>
<input type="text" name="username">

A subtle trap: <script />

This example demonstrates one of the most dangerous cases of this issue:

<!-- Incorrect: browser treats everything after this as script content -->

<script src="app.js" />
<p>This paragraph will not be rendered — it's consumed as script text.</p>

<!-- Correct -->

<script src="app.js"></script>
<p>This paragraph renders normally.</p>

The browser interprets the incorrect version as an opening <script> tag and reads all subsequent markup as script content until it encounters </script>, effectively hiding your page content and likely producing JavaScript errors.