HTML Guides for slash

The HTML parser expects a slash inside a tag to signal the end of a self-closing (void) element, such as <br /> or <img />. When the parser encounters a / that isn’t immediately followed by >, it can’t interpret the tag correctly and raises this error. This can happen in several scenarios:

• A typo in an attribute name or value, such as accidentally typing a / instead of another character.
• An unquoted attribute value that contains a slash, like a URL path.
• A misplaced slash somewhere in the middle of a tag.

While browsers are generally forgiving and may still render the page, relying on error recovery leads to unpredictable behavior across different browsers. Fixing these issues ensures your markup is unambiguous, standards-compliant, and easier to maintain.

Examples

Stray slash in a tag (typo)

A common typo where a slash appears between attributes:

<!-- ❌ Slash not immediately followed by ">" -->

<input type="text" / name="username">

Remove the stray slash:

<!-- ✅ Correct -->

<input type="text" name="username">

Unquoted attribute value containing a slash

If an attribute value contains a / and isn’t wrapped in quotes, the parser sees the slash as part of the tag syntax rather than the value:

<!-- ❌ Unquoted value with slash confuses the parser -->

<img src=images/photo.jpg alt="Photo">

Always quote attribute values, especially those containing slashes:

<!-- ✅ Correct: quoted attribute value -->

<img src="images/photo.jpg" alt="Photo">

Slash in the wrong position for self-closing tags

Placing the slash before the final attribute instead of at the end of the tag:

<!-- ❌ Slash is not immediately before ">" -->

<img src="logo.png" / alt="Logo">

Move the self-closing slash to the very end, or simply remove it (self-closing syntax is optional in HTML5 for void elements):

<!-- ✅ Correct: slash at the end -->

<img src="logo.png" alt="Logo" />

<!-- ✅ Also correct: no self-closing slash needed in HTML -->

<img src="logo.png" alt="Logo">

Accidental double slash

Sometimes a self-closing tag ends up with an extra slash:

<!-- ❌ Double slash before ">" -->

<br //>

Use a single slash or omit it entirely:

<!-- ✅ Correct -->

<br />

<!-- ✅ Also correct -->

<br>

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.